С помощью CSS динамически добавлять дни недели к числам дня в календаре

Question

С помощью CSS динамически добавлять дни недели к числам дня в календаре

Рейтинг: 0Ответов: 0Опубликовано: 20.03.2023

Суть задачи - при нажатии на кнопку, разметка календаря меняется с grid на flex путем добавления класса. Блок с названиями дней недели должен исчезать и отображаться рядом с числом. Числа в разметку добавляются динамически через css counter.

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calendar-container {
  margin: 50px auto;
  width: 40%;
  border: 1px solid black;
}

.calendar-title {
  margin: 20px;
}

ul {
  display: flex;
  justify-content: space-around;
}

.days-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  counter-reset: my-counter;
}

.day::before {
  counter-increment: my-counter;
  content: counter(my-counter);
}

.flat {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.flat>.day {
  margin: 15px 5px;
  color: red;
}

.first_day {
  grid-column-start: 3;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kalendarz</title>
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <button id="flex-btn">click me</button>
  <div class="calendar-container">
    <h1 class="calendar-title">Marzec 2023</h1>
    <ul id="week-list">
      <div class="week-item">Po</div>
      <div class="week-item">Wt</div>
      <div class="week-item">Śr</div>
      <div class="week-item">Cz</div>
      <div class="week-item">Pi</div>
      <div class="week-item">So</div>
      <div class="week-item">Ni</div>
    </ul>
    <div class="days-container ">
      <div class="day first_day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
      <div class="day"></div>
    </div>
  </div>
  <script src="main.js"></script>
</body>

</html>

Главное условие - это исчезание блока с днями недели и динамическое подставление к числам.

css html

Источник: Stack Overflow на русском

С помощью CSS динамически добавлять дни недели к числам дня в календаре

Ответы