Форум

laimas · #71 (**permalink**) 30.07.2019, 16:39

Блондинка,
не знаю, у нас разное видение интерфейса.

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

Блондинка · #72 (**permalink**) 30.07.2019, 17:19

laimas,
думаю что лучше если будет изменятся расстояние от элементов УПРАВЛЕНИЯ до верхнего и нижнего края блока а по горизонтали отступы должны быть постоянными, если кнопка сегодня скрыта при отображение сетки текущего месяца и показывается при других месяцах, это дополнительно показывает что при наличии кнопки отображается не текущий месяц...

laimas · #73 (**permalink**) 30.07.2019, 19:20

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

думаю что лучше если будет изменятся расстояние

Думаете, пробуйте, проверяйте оправдает ли это ваше ожидание. Я же ранее высказался, что это не интерфейс. Если бы календарь был на месяц, а значит изменял свой вид раз в месяц, еще ладно, но если изменяется сам календарь, элементы его управления меняют размеры/положение, то это уже плохо.

Блондинка · #74 (**permalink**) 30.07.2019, 19:36

laimas,
в принципе календарь и будет менять свой вид раз в месяц, поскольку он будет встраиваться в страницу, а не использоваться как отдельная страница сайта...

laimas · #75 (**permalink**) 30.07.2019, 19:49

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

календарь и будет менять свой вид раз в месяц

Это как, если у него есть кнопки управления для перелистывания его?
Не спрашивайте у меня как сделать, как хотите так и делайте, я не имею цели переубедить вас.

Блондинка · #76 (**permalink**) 30.07.2019, 23:22

ну если основной контент страницы несёт свою смысловую информацию, и где-то в левой или правой боковой колонке страницы несущей дополнительную информацию расположен календарь с элементами управления и возможностью просмотра других месяцев, то это не значит что посетители будут игнорить основной контент и ежесекундно щёлкать календарь...

laimas · #77 (**permalink**) 31.07.2019, 01:39

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

Блондинка · #78 (**permalink**) 31.07.2019, 12:53

laimas,
если календарём в основном не будут пользоваться, то это не значит что не может возникнуть ситуация у кого нибудь из пользователей что нужно посмотреть сетку за другой месяц, и хотелось бы чтобы в этих случаях календарь был максимально удобным в навигации...

laimas · #79 (**permalink**) 31.07.2019, 13:38

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

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

К чему тогда разговоры об ином, вот и делайте удобный интерфейс.

Блондинка · #80 (**permalink**) 31.07.2019, 23:26

рони,
не могу разобраться с твоим примером

<!DOCTYPE html>

<html>
  <head>
    <title>тест-каледарь (рони)</title>
    <meta charset="utf-8" />
    <style type="text/css">


      #wrapper button:after {
        content: 'пред.';
      }
      #wrapper button:nth-of-type(2):after {
        content: 'след.';

      }
      #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>

возможно ли переместить кнопки "пред" "след" и разместить их возле выпадающего списка, и возможно ли задать таблице фиксированную высоту?

Форум

Справочник

Discord чат

Курсы javascript