Календарь

Февраль 2024
Пн Вт Ср Чт Пт Сб Вс 12345678910111213141516171819202122232425262728 29 30 31 

<div class="c-calendar">
  <div class="c-calendar__title">Февраль 2024</div>
  <div class="c-calendar__wrapper">
    <div class="c-calendar__inner">
      <span class="c-calendar__item c-calendar__item-day">Пн</span>
      <span class="c-calendar__item c-calendar__item-day">Вт</span>
      <span class="c-calendar__item c-calendar__item-day">Ср</span>
      <span class="c-calendar__item c-calendar__item-day">Чт</span>
      <span class="c-calendar__item c-calendar__item-day">Пт</span>
      <span class="c-calendar__item c-calendar__item-day">Сб</span>
      <span class="c-calendar__item c-calendar__item-day">Вс</span>
      <span class="c-calendar__item"></span>
      <span class="c-calendar__item"></span>
      <span class="c-calendar__item"></span>
      <span class="c-calendar__item"></span>
      <span class="c-calendar__item"></span>
      <span class="c-calendar__item">1</span
      ><span class="c-calendar__item">2</span
      ><span class="c-calendar__item">3</span
      ><span class="c-calendar__item">4</span
      ><span class="c-calendar__item">5</span
      ><span class="c-calendar__item">6</span
      ><span class="c-calendar__item">7</span
      ><span class="c-calendar__item">8</span
      ><span class="c-calendar__item">9</span
      ><span class="c-calendar__item">10</span
      ><span class="c-calendar__item c-calendar__item-active">11</span
      ><span class="c-calendar__item c-calendar__item-between--active">12</span
      ><span class="c-calendar__item c-calendar__item-between--active">13</span
      ><span class="c-calendar__item c-calendar__item-between--active">14</span
      ><span class="c-calendar__item c-calendar__item-active">15</span
      ><span class="c-calendar__item">16</span
      ><span class="c-calendar__item">17</span
      ><span class="c-calendar__item">18</span
      ><span class="c-calendar__item">19</span
      ><span class="c-calendar__item">20</span
      ><span class="c-calendar__item">21</span
      ><span class="c-calendar__item">22</span
      ><span class="c-calendar__item">23</span
      ><span class="c-calendar__item">24</span
      ><span class="c-calendar__item">25</span
      ><span class="c-calendar__item">26</span
      ><span class="c-calendar__item">27</span
      ><span class="c-calendar__item">28</span>
      <span class="c-calendar__item">29</span>
      <span class="c-calendar__item">30</span>
      <span class="c-calendar__item">31</span>
      <span class="c-calendar__item"></span>
      <span class="c-calendar__item"></span>
      <span class="c-calendar__item"></span>
      <span class="c-calendar__item"></span>
    </div>
  </div>
</div>



.c-calendar {
  --clr-calendar-title: var(--clr-sym-calendar-title);
  --clr-calendar-day: var(--clr-sym-calendar-day);
  --clr-calendar-day-item: var(--clr-sym-calendar-day-item);
  --clr-calendar-between: var(--clr-font);
  max-width: 300px;
  border: 1px solid var(--clr-gray-3);
  border-radius: 8px;
  padding: 1.75rem 1.875rem 2.5rem;
}
.c-calendar__title {
  color: var(--clr-calendar-title);
  padding-bottom: 1.5rem;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
}
.c-calendar__item-day {
  color: var(--clr-calendar-day);
}
.c-calendar__wrapper {
  padding-bottom: 100%;
  position: relative;
}
.c-calendar__inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.c-calendar__item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 400;
  color: var(--clr-calendar-day-item);
}
.c-calendar__item-between--active {
  background-color: #A0B1F5;
  color: var(--clr-calendar-between);
}
@media screen and (max-width: 600px) {
  .c-calendar__item {
    font-size: 0.75rem;
  }
}
.c-calendar__item-active {
  background-color: var(--clr-primary-1);
  color: var(--clr-white);
}