Страница 4 из 10 « Первая < 23 4 56 > Последняя »
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   помогите доработать календарь (https://javascript.ru/forum/misc/78011-pomogite-dorabotat-kalendar.html)

Блондинка 20.07.2019 18:06
Русский, а я думаю что виновата лень разработчиков, которым просто лень добавить лишнюю строчку с вендорным префиксами для свойства css например, и что лучше стараться писать код кроссбраузерность по возможности...

Блондинка 20.07.2019 19:11
рони,
вот типа как тут, выпадающий список и поле ввода 
<style>
#calendar3 {
  width: 100%;
  font: monospace;
  line-height: 1.2em;
  font-size: 15px;
  text-align: center;
}
#calendar3 thead tr:last-child {
  font-size: small;
  color: rgb(85, 85, 85);
}
#calendar3 tbody td {
  color: rgb(44, 86, 122);
}
#calendar3 tbody td:nth-child(n+6), #calendar3 .holiday {
  color: rgb(231, 140, 92);
}
#calendar3 tbody td.today {
  outline: 3px solid red;
}
</style>

<table id="calendar3">
  <thead>
    <tr><td colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select><td colspan="3"><input type="number" value="" min="0" max="9999" size="4">
    <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
  <tbody>
</table>

<script>
function Calendar3(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
    D = new Date(year,month,Dlast),
    DNlast = D.getDay(),
    DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
    calendar = '<tr>',
    m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
    g = document.querySelector('#'+id+' input');
if (DNfirst != 0) {
  for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
  for(var  i = 0; i < 6; i++) calendar += '<td>';
}
for(var  i = 1; i <= Dlast; i++) {
  if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
    calendar += '<td class="today">' + i;
  }else{
    if (  // список официальных праздников
        (i == 1 && D.getMonth() == 0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930) || D.getFullYear() > 1947)) || // Новый год
        (i == 2 && D.getMonth() == 0 && D.getFullYear() > 1992) || // Новый год
        ((i == 3 || i == 4 || i == 5 || i == 6 || i == 8) && D.getMonth() == 0 && D.getFullYear() > 2004) || // Новый год
        (i == 7 && D.getMonth() == 0 && D.getFullYear() > 1990) || // Рождество Христово
        (i == 23 && D.getMonth() == 1 && D.getFullYear() > 2001) || // День защитника Отечества
        (i == 8 && D.getMonth() == 2 && D.getFullYear() > 1965) || // Международный женский день
        (i == 1 && D.getMonth() == 4 && D.getFullYear() > 1917) || // Праздник Весны и Труда
        (i == 9 && D.getMonth() == 4 && D.getFullYear() > 1964) || // День Победы
        (i == 12 && D.getMonth() == 5 && D.getFullYear() > 1990) || // День России (декларации о государственном суверенитете Российской Федерации ознаменовала окончательный Распад СССР)
        (i == 7 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005)) || // Октябрьская революция 1917 года
        (i == 8 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992)) || // Октябрьская революция 1917 года
        (i == 4 && D.getMonth() == 10 && D.getFullYear() > 2004) // День народного единства, который заменил Октябрьскую революцию 1917 года
       ) {
      calendar += '<td class="holiday">' + i;
    }else{
      calendar += '<td>' + i;
    }
  }
  if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
    calendar += '<tr>';
  }
}
for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
    document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(220, 0, 0)'; // в выпадающем списке выделен текущий месяц
}
Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
  Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
}
</script>

рони 20.07.2019 23:02
календарь с выбором месяца селектом и кнопками
 
Блондинка,

<!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>
  </head>

  <body>
    <div id="wrapper"></div>
    <script>
      let timer;
      function createCalendar(id, year, month) {
        const table = document.createElement('table');
        const header = document.createElement('tr');
        const daysOfWeek = ['пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт', 'вск'];
        const monthNames = [
          'Январь',
          'Февраль',
          'Март',
          'Апрель',
          'Май',
          'Июнь',
          'Июль',
          'Август',
          'Сентябрь',
          'Октябрь',
          'Ноябрь',
          'Декабрь',
        ];
        const data = new Date(year, month, 0);
        const daysInMonth = data.getDate();
        const indexMonth = data.getMonth();
        const currentData = new Date();
        const currentDay = currentData.getDate();
        const currentMonth = currentData.getMonth();
        const currentFullYear = currentData.getFullYear();
        let selectHtml = monthNames.reduce(
          (html, nameMonth, i) =>
            (html += `<option value=${i} ${
              indexMonth == i ? 'selected' : ''
            }>${nameMonth}`),
          `<select>`
        );
        const yearFull = data.getFullYear();
        selectHtml += `<input value=${yearFull}>`;
        table.insertAdjacentHTML(
          'beforeend',
          `<tr><th colspan='7'>${selectHtml}</th></tr>`
        );
        for (const day of daysOfWeek)
          header.insertAdjacentHTML('beforeend', `<th>${day}</th>`);
        table.append(header);
        let firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
        let nextDayToAdd = 1 - firstDay;
        while (nextDayToAdd <= daysInMonth) {
          const week = document.createElement('tr');
          for (let i = 0; i < 7; i++) {
            const day = document.createElement('td');
            let 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);
        }
        let div = document.getElementById(id);
        div.innerHTML = '';
        div.append(table);
        [0, 2].forEach(n => {
          let button = document.createElement('button');
          button.addEventListener('click', () =>
            createCalendar(id, yearFull, indexMonth + n)
          );
          div.append(button);
        });
        table.querySelector('select').addEventListener('input', 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) {
          let button = document.createElement('button');

          button.addEventListener('click', () =>
            createCalendar(id, currentFullYear, currentMonth + 1)
          );
          div.append(button);
        }
        function refresh() {
          window.clearTimeout(timer);
          let finish = new Date().setHours(24, 0, 0, 0);
          finish -= currentData;
          timer = window.setTimeout(function() {
            createCalendar(id, yearFull, indexMonth + 1);
            refresh();
          }, finish);
        }
        refresh();

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

Блондинка 21.07.2019 02:14
рони,
если честно, то даже не знаю как реагировать, дело в том что при просмотре запускаемого примера а также в блокноте виден только див
#wrapper {
036
        width: 320px;
037
        padding: 5px;
038
        margin: 5px;
039
        border: 1px solid #a9a9a9;
040
        border-radius: 6px/4px;

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

Блондинка 21.07.2019 02:19
Русский,
под словом "кросбраузерно" подразумевается основные браузеры версии хотя бы 2-3 летней давности, но никак не браузеры 90х годов прошлого столетия...

Блондинка 21.07.2019 02:36
Цитата:
Сообщение от Русский
Это у кого праздник, интересно, у тебя, что ли? Кстати, тоже брехня, после того как параша провозгласила независимость, СССР формально существовал ещё полгода.
В гугле По запросу "календарь яваскрипт" на' первой странице ссылка, откуда было тупо скопировано кусок кода, так что претензии по поводу того какие праздники я отмечаю, не принимаются, можешь их(претензии) высказать владельцу того сайта...

рони 21.07.2019 11:41
calendar select es5 polyfill
 
Блондинка,
<!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>

рони 21.07.2019 11:55
Блондинка,
конвертор в es5
https://babeljs.io/repl
Copy & Paste
скопировать код es6, получить код es5, заменить одно на другое, добавить полифил перед кодом, если нужно.
<script src="https://polyfill.io/v3/polyfill.min.js"></script>

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

рони 21.07.2019 18:50
Цитата:
Сообщение от Блондинка
хотелось бы чтобы и селект работал
исправлено.
Цитата:
Сообщение от Блондинка
возможно ли
да возможно, но лучше сами, так будет быстрее.


Часовой пояс GMT +3, время: 12:14.
Страница 4 из 10 « Первая < 23 4 56 > Последняя »
Показывать 40 сообщений этой темы на одной странице