Форум

рони · #71 (**permalink**) 04.08.2019, 17:59

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

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

строка 25 добавить класс vert

<div class="month vert"></div>

Блондинка · #72 (**permalink**) 05.08.2019, 14:50

Сообщение от Malleys

чтобы выбрать дату, вы можете...
использовать <input type="date">

мне кажется что в календаре целесообразнее использовать поле с другим типом, например <input type="month">

Блондинка · #73 (**permalink**) 05.08.2019, 15:08

как правильно использовать input type month и как установить переключение с дива на кнопку?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Calendar</title>
  </head>
  <body>
    <style>
      #calendar { width: 238px; height: 270px; padding: 3px; border: 1px solid #a9a9a9; }
      #navigation_panel { width: 228px; padding: 3px; margin-bottom: 3px; border: 1px solid #a9a9a9; display: inline-block; }
      .month,
      .month.vert .week,
      .day {
        display: inline-block;
      }
      .month.vert .day {
        display: block;
      }
      .day {
        border: 1px solid #a9a9a9;
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 1px;
      }
        input[type=month] { backgroud-color: #ffffff; border: 1px solid #a9a9a9; }
        #switching { background-color: #fff; border: 1px solid #a9a9a9; }
    </style>
    <div id="calendar">
    <div id="navigation_panel">
    <input type="month">
    <button id="switching">⇘</button>
    </div>
    <div class="month vert"></div>
    <script>
      var calendar = {
        update: function(year, month) {
          this.days.length = 7;
          var stepDay = new Date(year, month, 1);
          stepDay.setDate(stepDay.getDate() + 0 - ((stepDay.getDay() + 6) % 7));
          var lastDay = new Date(year, month + 1, 0);
          lastDay.setDate(lastDay.getDate() + 6 - ((lastDay.getDay() + 6) % 7));
          while (stepDay <= lastDay) {
            this.days.push(stepDay.getDate());
            stepDay.setHours(24);
          }
        },
        render: function() {
          var html = '';
          for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) {
            if (j == 0) html += '<div class="week">';
            html += '<div class="day">' + this.days[i] + '</div>';
            if (j == 6) html += '</div>';
          }
          this.element.innerHTML = html;
        },
        toggle: function() {
          this.element.classList.toggle('vert');
        },
      };
      var today = new Date(),
        thisYear = today.getFullYear(),
        thisMonth = today.getMonth();
      calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];

      calendar.element = document.querySelector('.month');
      calendar.element.addEventListener('click', function() {
        calendar.toggle();
      });
      calendar.update(thisYear, thisMonth);
      calendar.render();
    </script>
  </div>
  </body>
</html>

Блондинка · #74 (**permalink**) 05.08.2019, 23:31

рони,
может подскажешь, есть ли на форуме реализация не вертикально-горизонтального, а только вертикального календаря?

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

рони · #75 (**permalink**) 05.08.2019, 23:52

Блондинка,
не могу подсказать

Блондинка · #76 (**permalink**) 06.08.2019, 00:39

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

Блондинка · #77 (**permalink**) 10.08.2019, 00:58

1.) кто может сделать вертикальный календарь ?

2.) есть ли css свойство у технологии flexbox анолигичное border-spacing для таблиц ?

Блондинка · #78 (**permalink**) 10.08.2019, 01:18

бюджет то найдется,
на дивах или таблица? на карточку можно оплатить?

Блондинка · #79 (**permalink**) 11.08.2019, 07:21

Сообщение от laimas

Должно быть так:

01
document.addEventListener('DOMContentLoaded', function() {
02
    var d = new Date(),
03
        days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");
04

05
    document.querySelector('#day').textContent = days[d.getDay()];
06
    document.querySelector('#day_01').options[d.getDay()||7].selected = true;
07
    document.querySelector('#day_02').value = d.getDay()
08
    document.querySelector('#date').options[d.getDate()-1].selected = true;
09
    document.querySelector('#date_01').value = d.getDate();
10
    document.querySelector('#month').options[d.getMonth()].selected = true;
11
    document.querySelector('#year').value = d.getFullYear();
12
});

Здесь объявлены две переменные d и days, через запятую, хотя можно написать и так:

var d = new Date();
var days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");

что я делаю не так? попыталась в соответствующие блоки вставить компоненты даты, но ничего не получается

;
   });
  </script>
 </head>
 <body>
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
  <div id="day"></div>
  <div id="date"></div>
  <div id="month"></div>
  <div id="month_name"></div>
  <div id="year"></div>
 </body>
</html>]

Блондинка · #80 (**permalink**) 11.08.2019, 18:03

на этом форуме кто нибудь может объяснить как в элементы с определенными id вставить соответствующие компоненты даты? при наличии такого hrml-кода...

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   div {
    font: 14px serif;
    border: 1px solid #ccc;
    padding: 5px;
    margin-bottom: 5px;
    text-align: center;
   }
  </<style>
  <script>
   document.addEventListener('DOMContentLoader', function() {
   var d = new Date();
   var days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split("  ");
   document.querySelector('day').textContent = daus[
   d.getDay()];
   });
  </script>
 </head>
 <body>
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
  <div id="day"></div>
  <div id="date"></div>
  <div id="month"></div>
  <div id="month_name"></div>
  <div id="year"></div>
 </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript