БЛОГ НА HUSL


Как грамотно переписать календарь?

Автор вопроса: Дмитрий

Имею сайт необычных подарков, на сайте стоит самый банальный выбор даты через select. Недавно поменял дизайн сайта, решил также сделать красивый календарь для выбора даты. Начала углубляться в изучение js, и понеслась. Я знаю что есть уже готовые скрипты, но хотелось написать все самостоятельно, так сказать понять как это работает изнутри.

Неделю пытался заставить работать свой скрипт, но даже не мог подумать, что это так сложно. Якобы все заработало, но после того как начинаешь тестировать, видишь, то дата некорректно выводится, то день недели неверно выставляет, то количество дней неверное и т.д.

Буквально парочку часов назад мой скрипт заработал так как и задумано. Но я понимаю, что я многое упустил или написал лишнего. Вот и решил поинтересоваться у людей который в этом понимают.

Подскажите, пожалуйста, что можно и нужно убрать из скрипта лишнее, или как правильно скомпоновать код для лучшей его работы.

ПРОШУ не ругаться, я только учусь).

Весь код загрузил для теста.

Всем заранее спасибо!

let md = ["1947", "Февраль", "28"];
let days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];


// ===================== Создаем option
function createSelectOption(sel, mass_md, calen) {
  let s_opt = document.createElement("option");
  s_opt.value = sel;
  s_opt.innerHTML = sel;

  if (sel == mass_md) {
    s_opt.setAttribute("selected", "");
  }
  calen.append(s_opt);
}

// Создаем разметку с месяцами select
let aMounth = new Array("Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"),
  calendar__month = document.getElementById("calendar__month"),
  calendar__month_opt = document.querySelectorAll("#calendar__month option");

for (let i = 0; i < aMounth.length; i++) {
  createSelectOption(aMounth[i], md[1], calendar__month);
}

// Определяем какой под номером месяц по его названию
function mounthIndex(e) {
  let result;
  aMounth.forEach((elem, index) => {
    if (e == elem) {
      result = index;
    }
  });
  return result + 1;
}

// Создаем разметку с годовым диапазоном select
let aYear = new Array(),
  calendar__year = document.getElementById("calendar__year"),
  calendar__year_opt = document.querySelectorAll("#calendar__year option");

for (let j = 1918; j <= 1991; j++) {
  aYear.push(j);
  createSelectOption(j, md[0], calendar__year);
}

// Создаем разметку для чисел дней
let calendar__num_dey = document.querySelector(".calendar__num_dey");
let inStart = 42; // всего ячеек

for (let d = 0; d < inStart; d++) {
  let calendar___date = document.createElement("div");
  calendar___date.classList.add("calendar___date");
  calendar__num_dey.append(calendar___date);
}


function startDates() {

  // ===============================
  const outGWD = getWeekDay(`${md[0]}/${mounthIndex(md[1])}/1`); // день недели
  let inOstatok = +getWeekDayIndex(outGWD) - 1; // день недели номер

  // ===== Получения дня недели
  function getWeekDay(gwd) {
    gwd = new Date(gwd);
    let day = gwd.getDay();
    return days[day];
  }

  // === Узнаем номер дня недели
  function getWeekDayIndex(d) {
    for (let key in days) {
      if (days[key] == d) d = key;
    }

    if (d == 0) d = 7;
    return d;
  }
  // ===============================


  // ===== Узнаем кол.во дней в месяце
  Date.prototype.daysInMonth = function() {
    return 32 - new Date(this.getFullYear(), this.getMonth(), 32).getDate();
  };

  // текущий месяц
  let inMounthThis = new Date(md[0], mounthIndex(md[1]) - 1, 1).daysInMonth();

  // прошедший месяц
  let inMountAfter = new Date(md[0], mounthIndex(md[1]) - 1, 0).daysInMonth();

  let inMountAfterMass = [];

  function dateRevers() {
    let out = [];
    for (let i = inMountAfter; i >= 1; i--) {
      out.push(i);
    }

    let outRes = [];
    for (let j = 0; j < inOstatok; j++) {
      outRes.push(out[j]);
    }

    outRes.reverse();
    inMountAfterMass = outRes;
  }
  dateRevers();
  // ===== end Узнаем кол.во дней в месяце


  function dateDeyNum() {

    // ======================== ДНИ
    let calDate = document.querySelectorAll(".calendar___date");

    // Сбрасываем все выделынные дни после нажатия
    function calDateRemove() {
      calDate.forEach(elem => {
        elem.classList.remove("active");
      });
    }

    let count = 1;
    // Текущий
    for (let i = inOstatok; i < inMounthThis + inOstatok; i++) {
      calDate[i].innerHTML = count++;

      calDate[i].classList.remove("calendar__date_nopointer");

      // Выделяем выбранный день
      calDate[i].onclick = function() {
        calDateRemove();
        this.classList.add("active");
        calendare(this.innerHTML);
      }

      // Отслеживаем выбранный день и оставляем активным
      if (calDate[i].innerHTML == md[2]) {
        calDateRemove();
        calDate[i].classList.add("active");
      }
    }

    // Прошедший
    for (let j = 0; j < inOstatok; j++) {
      calDate[j].innerHTML = inMountAfterMass[j];
      calDate[j].classList.add("calendar__date_nopointer");
    }

    // Будущий
    count = 1;
    for (let g = inMounthThis + inOstatok; g < inStart; g++) {
      calDate[g].innerHTML = count++;
      calDate[g].classList.add("calendar__date_nopointer");
    }

  }
  dateDeyNum();
}
startDates();


// =================================
// =================================

function calendare(thise, num) {

  // =========
  let calendar_date_title = document.querySelector(".calendar_date_title");

  if (thise !== undefined && num !== undefined) {
    let optinner = thise.options[thise.selectedIndex];

    if (optinner.value !== "") {

      if (num == 0) {
        md[num] = +optinner.innerHTML;
        calendar_date_title.children[2].innerHTML = optinner.innerHTML;
      } else if (num == 1) {
        md[num] = optinner.innerHTML;
        calendar_date_title.children[1].innerHTML = optinner.innerHTML;
      }

    }
  } else if (thise !== undefined && num == undefined) {
    md[2] = thise;
    calendar_date_title.children[0].innerHTML = thise;
  }
  // =========
  startDates();
  console.log(md);
}

// Записываем месяц в массив
calendar__month.onchange = function() {
  calendare(this, 1); // (значение, индекс в массиве)
}

// Записываем год в массив
calendar__year.onchange = function() {
  calendare(this, 0); // (значение, индекс в массиве)
}
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Marck+Script&display=swap');

/* MEDIA */

@media (max-width: 900px) {
  .calendar__item {
    width: 100%;
  }
  .calendar__item:nth-child(2) {
    border-radius: 0 0 34px 34px;
  }
}

body {
  max-width: 1000px;
  margin: 5% 3%;
}


/* =========== Calendar */

.calendar_wrp {
  display: flex;
  flex-wrap: wrap;
}

.calendar__item {
  position: relative;
  background-color: #fff;
  width: 400px;
  box-shadow: 0 0 5rem rgb(0 0 0 / 20%);
}

.calendar__item:nth-child(1) {
  position: relative;
  z-index: 1;
}

.calendar__item:nth-child(2) {
  border-radius: 0 34px 34px 0;
}

.calendar___items {
  padding: 20px;
}

.calendar___items:nth-child(2) {
  background-color: #f3f4f6;
}

.calendar__numer__item,
.calendar__num_dey {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.calendar__numer__item select {
  width: 48%;
  background-color: #f3f4f6;
  /* == */
  background-image: url(/img/strelka.svg);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) center;
  /* == */
  font-family: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  border-radius: 20px;
  outline: none;
  border: 0;
  padding: 15px 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.calendar__title_dey {
  font-family: 'Lobster', cursive;
  display: flex;
  justify-content: space-between;
  flex-basis: 100%;
  padding: 25px 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #888;
}


/* === */

.calendar___date {
  cursor: pointer;
  flex: 0 0 13%;
  width: 46px;
  min-height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(255 255 255 / 100%);
  border-radius: 7px;
  margin: 3px 0;
  font-size: 16px;
  font-weight: 600;
  -webkit-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.calendar___date:nth-child(7n+7),
.calendar___date:nth-child(7n+6) {
  background: rgb(241, 229, 227);
  color: red;
}

.calendar___date:hover,
.calendar___date.active {
  color: #fff;
  background-size: 200%;
  border-color: transparent !important;
  transition: all 0.5s;
  transition: all 0.3s ease-in-out;
}

.calendar___date.active {
  background-image: linear-gradient(to right, #FF6E5A 0, #f8ae56 51%, #f8ae56 100%);
}

.calendar___date:hover {
  background-image: linear-gradient(to right, #ff6d5a81 0, #f8ae56 51%, #f8ae56 100%);
}

.calendar__date_nopointer {
  box-shadow: none;
  pointer-events: none;
  opacity: .3;
}


/* ===== Right block */

.calendar_date_title {
  text-align: center;
  font-family: 'Lobster', cursive;
  padding: 20px 0;
}

.cdt_mounth {
  font-size: 35px;
}

.cdt_dey {
  font-size: 5rem;
  line-height: 0.9;
}

.cdt_year {
  font-size: 35px;
}
<!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">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/other.css">
  <title>Document</title>
</head>

<body>

  <div class="body">

    <div class="calendar_wrp">
      <div class="calendar__item">

        <div class="calendar___items">
          <div class="calendar__numer__item">
            <select name="calendar__month" id="calendar__month" title="month">
              <option value="">Месяц</option>
            </select>
            <select name="calendar__year" id="calendar__year" title="year">
              <option value="">Год</option>
            </select>
            <div class="calendar__title_dey">
              <div>Пн</div>
              <div>Вт</div>
              <div>Ср</div>
              <div>Чт</div>
              <div>Пт</div>
              <div>Сб</div>
              <div>Вс</div>
            </div>
          </div>
        </div>

        <div class="calendar___items calendar__num_dey"> </div>
      </div>

      <div class="calendar__item">
        <div class="calendar___items">
          <div class="calendar_date_title">
            <div class="cdt_dey">23</div>
            <div class="cdt_mounth">Февраль</div>
            <div class="cdt_year">1988</div>
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.