SVG Calenadr

by Артём Пендюрин

HTML

<div class="staff-calendar">
       <div class="staff-calendar__body">
            <svg class="staff-calendar__canvas" viewBox="0 0 420 720" shape-rendering="optimizeSpeed"
                preserveAspectRatio="none">
                <defs>
                    <pattern id="event-pattern"
                        width="12" height="12" patternUnits="userSpaceOnUse"
                        patternTransform="scale(1, 1.42)">
                        <path fill="white" d="M 6,0 6,12 12,12 12,6 0,6 0,0"></path>
                    </pattern>
                    <mask id="event-mask">
                        <rect width="100%" height="100%" fill="url(#event-pattern)"></rect>
                    </mask>
                    <symbol width="60" height="60" id="event-symbol">
                        <rect width="60" height="100%"></rect>
                        <rect width="60" height="100%" fill="currentColor" mask="url(#event-mask)"></rect>
                    </symbol>
                </defs>
                <svg class="staff-calendar__day staff-calendar__day_theme_weekday" x="0" width="60">
                    <rect width="100%" height="100%"></rect>
                    <g class="staff-calendar__grid">
                        <line vector-effect="non-scaling-stroke" x1="0" x2="100%" y1="60" y2="60"></line>
                        <line vector-effect="non-scaling-stroke" x1="0" x2="100%" y1="120" y2="120"></line>
                        <line vector-effect="non-scaling-stroke" x1="0" x2="100%" y1="180" y2="180"></line>
                        <line vector-effect="non-scaling-stroke" x1="0" x2="100%" y1="240" y2="240"></line>
                        <line vector-effect="non-scaling-stroke" x1="0" x2="100%" y1="300" y2="300"></line>
                        <line vector-effect="non-scaling-stroke" x1="0" x2="100%" y1="360" y2="360"></line>
                        <line vector-effect="non-scaling-stroke" x1="0" x2="100%" y1="420" y2="420"></line>
                        <line...

CSS

.staff-calendar__body {
    position: relative;

    width: 600px;
    height: 720px;
}

.staff-calendar__canvas {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.staff-calendar__date {
    font-size: 11px;
}

.staff-calendar__date_theme_weekend,
.staff-calendar__date_theme_holiday {
    color: #bcb9b1;
}

.staff-calendar__dates {
    position: absolute;

    display: flex;
    justify-content: space-around;
}
.staff-calendar__day_theme_weekend {
  fill: #ededeb;
}
.staff-calendar__day_theme_weekday {
  fill: #d3d2ce;
}
.staff-calendar__day_event_vacation {
  fill: #a5d6e9;
}

.staff-calendar__event {
  position: absolute;

  transition: margin 0.15s ease-in-out;
  pointer-events: none;

  color: transparent;

  fill: transparent;
}

.staff-calendar__event_type_meeting.staff-calendar__event_parity_odd {
  fill: #92d0ff;
}
.staff-calendar__event_type_meeting.staff-calendar__event_parity_even {
  fill: #5db8ff;
}
.staff-calendar__event_type_meeting.staff-calendar__event_parity_odd.staff-calendar__event_level_2 {
  color: #bde3ff;
}
.staff-calendar__event_type_meeting.staff-calendar__event_parity_even.staff-calendar__event_level_2 {
  color: #92d0ff;
}

.staff-calendar__grid {
    pointer-events: none;

    stroke: #fff;
}