Форум

Блондинка · #41 (**permalink**) 21.07.2019, 02:36

Сообщение от Русский

Это у кого праздник, интересно, у тебя, что ли? Кстати, тоже брехня, после того как параша провозгласила независимость, СССР формально существовал ещё полгода.

В гугле По запросу "календарь яваскрипт" на' первой странице ссылка, откуда было тупо скопировано кусок кода, так что претензии по поводу того какие праздники я отмечаю, не принимаются, можешь их(претензии) высказать владельцу того сайта...

рони · #42 (**permalink**) 21.07.2019, 11:41

Блондинка,

<!DOCTYPE html>

<html>
  <head>
    <title>Untitled</title>
    <meta charset="utf-8" />
    <style type="text/css">


      #wrapper button:after {
        content: 'prev';
      }
      #wrapper button:nth-of-type(2):after {
        content: 'next';

      }

      #wrapper button:nth-of-type(3){
          order: 1;
      }
      #wrapper button:nth-of-type(2){
          order: 2;
      }

      #wrapper button:nth-of-type(3):after {
        content: 'сегодня';
      }
      #wrapper input {
        width: 50px;
        height: 18px;
        margin-top: -3px;
        text-align: center;
      }

      #wrapper {
        width: 320px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      #wrapper table {
        flex: 1 0 100%;
        border-collapse: separate;
         width: 100%;
        padding: 1px;
      }
      table,
      th,
      td {
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
        margin: 1px;
      }
      th,
      td {
        text-align: center;
      }

      .currentMonthWeek {
        background-color: #def1ff;
        color: #0091ff;
      }
      .currentMonthWeek:nth-child(n + 6) {
        background-color: #ffc3d7;
        color: #dc143c;
      }
      td.currentDay {
        background-color: #c2d6ff;
        border: 1px solid #00f;
        font-weight: bold;
        color: #fff;
        text-shadow: 1px 1px #00f, -1px 1px #00f, 1px -1px #00f, -1px -1px #00f,
          1px 0 #00f, 0 1px #00f, -1px 0 #00f, 0 -1px #00f;
      }
      td.currentDay:nth-child(n + 6) {
        background-color: #ffc3d7;
        border: 1px solid #ff69b4;
        text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;

      }

      #wrapper th {
        background-color: #c2d6ff;
        color: #0069ff;
      }
      #wrapper th:nth-child(n + 6) {
        background-color: #ffb4d2;
        color: #b92346;
      }
      #wrapper th.currentDay {
        border: 1px solid #285fcd;
        background-color: #6b9cff;
        color: #e6f5ff;
      }
      #wrapper th:nth-child(n + 6).currentDay {
        background-color: #ff389c;
        color: #ffed85;
      }

     #wrapper button {
        flex 0;
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
      }
    </style>
   <script src="https://polyfill.io/v3/polyfill.min.js"></script>
  </head>

  <body>
    <div id="wrapper"></div>
    <script>
      "use strict";

var timer;

function createCalendar(id, year, month) {
  var table = document.createElement('table');
  var header = document.createElement('tr');
  var daysOfWeek = ['пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт', 'вск'];
  var monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
  var data = new Date(year, month, 0);
  var daysInMonth = data.getDate();
  var indexMonth = data.getMonth();
  var currentData = new Date();
  var currentDay = currentData.getDate();
  var currentMonth = currentData.getMonth();
  var currentFullYear = currentData.getFullYear();
  var selectHtml = monthNames.reduce(function (html, nameMonth, i) {
    return html += "<option value=".concat(i, " ").concat(indexMonth == i ? 'selected' : '', ">").concat(nameMonth);
  }, "<select>");
  var yearFull = data.getFullYear();
  selectHtml += "<input value=".concat(yearFull, ">");
  table.insertAdjacentHTML('beforeend', "<tr><th colspan='7'>".concat(selectHtml, "</th></tr>"));

  for (var _i = 0, _daysOfWeek = daysOfWeek; _i < _daysOfWeek.length; _i++) {
    var _day = _daysOfWeek[_i];
    header.insertAdjacentHTML('beforeend', "<th>".concat(_day, "</th>"));
  }

  table.append(header);
  var firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
  var nextDayToAdd = 1 - firstDay;

  while (nextDayToAdd <= daysInMonth) {
    var week = document.createElement('tr');

    for (var i = 0; i < 7; i++) {
      var day = document.createElement('td');
      var cls = 'currentMonthWeek';

      if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth) {
        if (currentMonth == indexMonth && currentFullYear == yearFull && nextDayToAdd == currentDay) {
          cls = 'currentDay';
          table.querySelectorAll('th')[i + 1].className = 'currentDay';
        }

        day.innerHTML = nextDayToAdd;
      }

      cls && day.classList.add(cls);
      nextDayToAdd++;
      week.append(day);
    }

    table.append(week);
  }

  var div = document.getElementById(id);
  div.innerHTML = '';
  div.append(table);
  [0, 2].forEach(function (n) {
    var button = document.createElement('button');
    button.addEventListener('click', function () {
      return createCalendar(id, yearFull, indexMonth + n);
    });
    div.append(button);
  });
  table.querySelector('select').addEventListener('change', function () {
    createCalendar(id, yearFull, ++this.value);
  });
  table.querySelector('input').addEventListener('input', function () {
    if (/^\d{4}$/.test(this.value)) createCalendar(id, +this.value, indexMonth + 1);
  });

  if (currentMonth != indexMonth || currentFullYear != yearFull) {
    var button = document.createElement('button');
    button.addEventListener('click', function () {
      return createCalendar(id, currentFullYear, currentMonth + 1);
    });
    div.append(button);
  }

  function refresh() {
    window.clearTimeout(timer);
    var finish = new Date().setHours(24, 0, 0, 0);
    finish -= currentData;
    timer = window.setTimeout(function () {
      createCalendar(id, yearFull, indexMonth + 1);
      refresh();
    }, finish);
  }

  refresh();
  return table;
}

var table = createCalendar('wrapper', 2019, 6);
    </script>
  </body>
</html>

рони · #43 (**permalink**) 21.07.2019, 11:55

Блондинка,
конвертор в es5
https://babeljs.io/repl
Copy & Paste
скопировать код es6, получить код es5, заменить одно на другое, добавить полифил перед кодом, если нужно.

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

Блондинка · #44 (**permalink**) 21.07.2019, 17:09

рони, сейчас скрипт почти работает,
при загрузке страницы отображается сетка календаря за июнь 2019, а хотелось бы чтобы был текущий месяц
при вводе года и при клике на кнопки всё работает, но при попытке выбрать месяц в выпадающем списке ничего не меняется, хотелось бы чтобы и селект работал
возможно ли добавить кнопки для перемещения По годам (и разместить кнопки перед таблицей, возле списка/поля)
возможно ли заполнить пустые ячейки числами пред/буд месяца разными отдельными стилями как в 16 посте?

рони · #45 (**permalink**) 21.07.2019, 18:50

Сообщение от Блондинка

хотелось бы чтобы и селект работал

исправлено.

Сообщение от Блондинка

возможно ли

да возможно, но лучше сами, так будет быстрее.

Блондинка · #46 (**permalink**) 21.07.2019, 20:10

рони,
насколько я поняла строка 212

var table = createCalendar('wrapper', 2019, 6);

устанавливает июнь 2019 г при загрузке страницы, как исправить на текущий месяц/год?

рони · #47 (**permalink**) 21.07.2019, 20:55

Сообщение от Блондинка

как исправить на текущий месяц/год?

создать дату, получить год, получить месяц + 1.
смотри строки 129 - 132 пост #53

рони · #48 (**permalink**) 21.07.2019, 21:19

Сообщение от Блондинка

как исправить на текущий месяц/год?

вариант для текущей даты

<!DOCTYPE html>

<html>
  <head>
    <title>Untitled</title>
    <meta charset="utf-8" />
    <style type="text/css">


      #wrapper button:after {
        content: 'prev';
      }
      #wrapper button:nth-of-type(2):after {
        content: 'next';

      }
      #wrapper button:nth-of-type(3):after {
        content: 'сегодня';
      }
      #wrapper button:nth-of-type(3){
          order: 2;
      }
      #wrapper button:nth-of-type(2){
          order: 3;
      }
      #wrapper button:nth-of-type(1){
          order: 1;
      }

      #wrapper input {
        width: 50px;
        height: 18px;
        margin-top: -3px;
        text-align: center;
      }

      #wrapper {
        width: 320px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      #wrapper table {
        flex: 1 0 100%;
        border-collapse: separate;
         width: 100%;
        padding: 1px;
      }
      table,
      th,
      td {
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
        margin: 1px;
      }
      th,
      td {
        text-align: center;
      }

      .currentMonthWeek {
        background-color: #def1ff;
        color: #0091ff;
      }
      .currentMonthWeek:nth-child(n + 6) {
        background-color: #ffc3d7;
        color: #dc143c;
      }
      td.currentDay {
        background-color: #c2d6ff;
        border: 1px solid #00f;
        font-weight: bold;
        color: #fff;
        text-shadow: 1px 1px #00f, -1px 1px #00f, 1px -1px #00f, -1px -1px #00f,
          1px 0 #00f, 0 1px #00f, -1px 0 #00f, 0 -1px #00f;
      }
      td.currentDay:nth-child(n + 6) {
        background-color: #ffc3d7;
        border: 1px solid #ff69b4;
        text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;

      }

      #wrapper th {
        background-color: #c2d6ff;
        color: #0069ff;
      }
      #wrapper th:nth-child(n + 6) {
        background-color: #ffb4d2;
        color: #b92346;
      }
      #wrapper th.currentDay {
        border: 1px solid #285fcd;
        background-color: #6b9cff;
        color: #e6f5ff;
      }
      #wrapper th:nth-child(n + 6).currentDay {
        background-color: #ff389c;
        color: #ffed85;
      }

     #wrapper button {
        flex 0;
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
      }
    </style>
   <script src="https://polyfill.io/v3/polyfill.min.js"></script>
  </head>

  <body>
    <div id="wrapper"></div>
    <script>
      "use strict";

var timer;

function createCalendar(id, year, month) {
  var table = document.createElement('table');
  var header = document.createElement('tr');
  var daysOfWeek = ['пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт', 'вск'];
  var monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
  var currentData = new Date();
  var currentDay = currentData.getDate();
  var currentMonth = currentData.getMonth();
  var currentFullYear = currentData.getFullYear();
  if(month == void 0) month = currentMonth + 1;
  if(year == void 0) year = currentFullYear;
  var data = new Date(year, month, 0);
  var daysInMonth = data.getDate();
  var indexMonth = data.getMonth();
  var yearFull = data.getFullYear();
  var selectHtml = monthNames.reduce(function (html, nameMonth, i) {
    return html += "<option value=".concat(i, " ").concat(indexMonth == i ? 'selected' : '', ">").concat(nameMonth);
  }, "<select>");
  selectHtml += "<input value=".concat(yearFull, ">");
  table.insertAdjacentHTML('beforeend', "<tr><th colspan='7'>".concat(selectHtml, "</th></tr>"));

  for (var _i = 0, _daysOfWeek = daysOfWeek; _i < _daysOfWeek.length; _i++) {
    var _day = _daysOfWeek[_i];
    header.insertAdjacentHTML('beforeend', "<th>".concat(_day, "</th>"));
  }

  table.append(header);
  var firstDay = (new Date(yearFull, indexMonth).getDay() + 6) % 7;
  var nextDayToAdd = 1 - firstDay;

  while (nextDayToAdd <= daysInMonth) {
    var week = document.createElement('tr');

    for (var i = 0; i < 7; i++) {
      var day = document.createElement('td');
      var cls = 'currentMonthWeek';

      if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth) {
        if (currentMonth == indexMonth && currentFullYear == yearFull && nextDayToAdd == currentDay) {
          cls = 'currentDay';
          table.querySelectorAll('th')[i + 1].className = 'currentDay';
        }

        day.innerHTML = nextDayToAdd;
      }

      cls && day.classList.add(cls);
      nextDayToAdd++;
      week.append(day);
    }

    table.append(week);
  }

  var div = document.getElementById(id);
  div.innerHTML = '';
  div.append(table);
  [-1, 1].forEach(function (n) {
    var button = document.createElement('button');
    button.addEventListener('click', function () {
      return createCalendar(id, year, month + n);
    });
    div.append(button);
  });
  table.querySelector('select').addEventListener('change', function () {
    createCalendar(id, yearFull, ++this.value);
  });
  table.querySelector('input').addEventListener('input', function () {
    if (/^\d{4}$/.test(this.value)) createCalendar(id, +this.value, indexMonth + 1);
  });

  if (currentMonth != indexMonth || currentFullYear != yearFull) {
    var button = document.createElement('button');
    button.addEventListener('click', function () {
      return createCalendar(id, currentFullYear, currentMonth + 1);
    });
    div.append(button);
  }

  function refresh() {
    window.clearTimeout(timer);
    var finish = new Date().setHours(24, 0, 0, 0);
    finish -= currentData;
    timer = window.setTimeout(function () {
      createCalendar(id, yearFull, indexMonth + 1);
      refresh();
    }, finish);
  }

  refresh();
  return table;
}

var table = createCalendar('wrapper'); //без параметров текущий месяц и год, createCalendar('wrapper', 2019, 6); июнь 2019
    </script>
  </body>
</html>

Блондинка · #49 (**permalink**) 22.07.2019, 10:46

рони,
можно исправить ошибку в работе кнопки назад? перед январём 19г идёт декабрь 18г, но почему показывает текущий месяц, кнопка вперёд работает вроде правильно...

рони · #50 (**permalink**) 22.07.2019, 12:32

Блондинка,
исправил prev, проверьте пост# 59 снова.

Форум

Справочник

Discord чат

Курсы javascript