Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #81 (permalink)  
Старый 30.07.2019, 19:36
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

laimas,
в принципе календарь и будет менять свой вид раз в месяц, поскольку он будет встраиваться в страницу, а не использоваться как отдельная страница сайта...
Ответить с цитированием
  #82 (permalink)  
Старый 30.07.2019, 19:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Блондинка
календарь и будет менять свой вид раз в месяц
Это как, если у него есть кнопки управления для перелистывания его?
Не спрашивайте у меня как сделать, как хотите так и делайте, я не имею цели переубедить вас.
Ответить с цитированием
  #83 (permalink)  
Старый 30.07.2019, 23:22
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

ну если основной контент страницы несёт свою смысловую информацию, и где-то в левой или правой боковой колонке страницы несущей дополнительную информацию расположен календарь с элементами управления и возможностью просмотра других месяцев, то это не значит что посетители будут игнорить основной контент и ежесекундно щёлкать календарь...
Ответить с цитированием
  #84 (permalink)  
Старый 31.07.2019, 01:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Если следовать вашей логике, то вы опираетесь на предположение, что пользователи будут игнорировать ваш календарь. Тогда встает вопрос зачем он вообще нужен, зачем ему элементы управления, зачем вообще вы тратите на него столько времени?
Ответить с цитированием
  #85 (permalink)  
Старый 31.07.2019, 12:53
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

laimas,
если календарём в основном не будут пользоваться, то это не значит что не может возникнуть ситуация у кого нибудь из пользователей что нужно посмотреть сетку за другой месяц, и хотелось бы чтобы в этих случаях календарь был максимально удобным в навигации...
Ответить с цитированием
  #86 (permalink)  
Старый 31.07.2019, 13:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Блондинка
может возникнуть ситуация у кого нибудь из пользователей что нужно посмотреть сетку за другой месяц, и хотелось бы чтобы в этих случаях календарь был максимально удобным в навигации...
К чему тогда разговоры об ином, вот и делайте удобный интерфейс.
Ответить с цитированием
  #87 (permalink)  
Старый 31.07.2019, 14:22
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Блондинка,
Элита делает так (календарь):
Date.prototype.reduce = function(callback, value) {
    var year = this.getFullYear();
    var month = this.getMonth();
    var step = new Date(year, month, 1);
    var last = new Date(year, month + 1, 0);
    step.setHours(24 * (0 - (step.getDay() + 6) % 7));
    last.setHours(24 * (6 - (last.getDay() + 6) % 7));
    for (var i = 0; step <= last; i++) {
        value = callback(value, new Date(+step), i, this);
        step.setHours(24);
    }
    return value;
};

var test = new Date();
var text = test.reduce(function(value, current, index, source) {
    return value + current.getDate() + (current.getDay() ? '\t' : '\n');
}, 'Пн\tВт\tСр\tЧт\tПт\tСб\tВс\n');

console.log(text);

Последний раз редактировалось Rise, 31.07.2019 в 14:29.
Ответить с цитированием
  #88 (permalink)  
Старый 31.07.2019, 23:26
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

рони,
не могу разобраться с твоим примером
<!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>
возможно ли переместить кнопки "пред" "след" и разместить их возле выпадающего списка, и возможно ли задать таблице фиксированную высоту?
Ответить с цитированием
  #89 (permalink)  
Старый 01.08.2019, 02:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Блондинка,
попробуйте дописать refresh и сегодня самостоятельно ... все примеры у вас есть.

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="utf-8">
<title></title>
    <style type="text/css">
body { width: 960px; }
body, select, input { font: 14px serif; }
#calendar { width: 330px; display: inline-block; border: 1px solid #a9a9a9; border-radius: 6px/4px; padding: 5px; }
#navigation_panel { background-color: #c5e3ff; height: 53px; border: 1px solid #a9a9a9; border-radius: 6px/4px; padding: 5px; margin-bottom: 3px; text-align: center; vertical-align: middle; }
#navigation_panel button, #navigation_panel #calendar_year { background-color: #94cdff; color: #00f; font: 14px serif; border: 1px solid #00f; }
#calendar_month { background-color: transparent; color: #00f; font: 14px serif; border: 1px solid #00f; }
#navigation_panel button { height: 24px; vertical-align: middle; }
#background_month { background-color: #94cdff; display: inline-block; }
button.minus { border-radius: 6px 0 0 6px / 4px 0 0 4px; margin-right: -5px; }
button.plus { border-radius: 0 6px 6px 0 / 0 4px 4px 0; margin-left: -5px; }
.month_plus { margin-right: 35px; }
#presently { width: 252px; margin-top: 5px; border-radius: 6px/4px; }
#calendar_month { width: 89px; display: inline-block; }
#calendar_year { width: 54px; display: inline-block; }
select { height: 24px; }
input { height: 20px; border: 1px solid #a9a9a9; display: inline-block; text-align: center; }
#table { width: 100%; height: 222px; padding: 2px; }
#table, td { border: 1px solid #a9a9a9; border-radius: 6px/4px; }
td { margin: 1px; text-align: center; }
td.week-day { height: 33px; }
.prevMonth{
    background-color: #228B22;
}
.curMonth{
    background-color: #FF69B4;
}
.nextMonth{
    background-color: #48D1CC;
}
.curDay{
    background-color: #FFFACD;
}

</style>
</head>
<body>
<div id="calendar">
<div id="navigation_panel">
<button class="month_minus minus">‹</button>
<span id="background_month"><select id="calendar_month"></select></span>
<button class="month_plus plus">›</button>
<button class="year_minus minus">‹</button>
<input type="text" size="4" id="calendar_year">
<button class="year_plus plus">›</button><br>
<button id="presently">сегодня</button>
</div>
<table id="table">
<thead>
<tr><td class="week-day">Пн.</td><td class="week-day">Вт.</td><td class="week-day">Ср.</td><td class="week-day">Чт.</td><td class="week-day">Пт.</td><td class="week-day">Сб.</td><td class="week-day">Вс.</td></tr>
</thead>
<tbody></tbody>
</table>
</div>
    <script>
Date.prototype.reduce = function(callback, value) {
        var year = this.getFullYear();
        var month = this.getMonth();
        var step = new Date(year, month, 1);
        var last = new Date(year, month + 1, 0);
        step.setHours(24 * (0 - (step.getDay() + 6) % 7));
        last.setHours(24 * (6 - (last.getDay() + 6) % 7));
        for (var i = 0; step <= last; i++) {
                value = callback(value, new Date(+step), i, this);
                step.setHours(24);
        }
        return value;
};
var data = new Date();
var selectMonth = document.querySelector('#calendar_month');
var monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
monthNames.forEach(function(monthName, i) {
    selectMonth.options[i] = new Option(monthName, i)
})
selectMonth.addEventListener("change", function() {
        data.setMonth(this.value);
        createCalendar(data);
    });
var minusMonth = document.querySelector('.month_minus');
minusMonth.addEventListener("click", function() {
        data.setMonth(data.getMonth() - 1);
        createCalendar(data);
    });
var plusMonth = document.querySelector('.month_plus');
plusMonth.addEventListener("click", function() {
        data.setMonth(data.getMonth() + 1);
        createCalendar(data);
    });
var minusYear = document.querySelector('.year_minus');
minusYear.addEventListener("click", function() {
        data.setYear(data.getFullYear() - 1);
        createCalendar(data);
    });
var plusYear = document.querySelector('.year_plus');
plusYear.addEventListener("click", function() {
        data.setYear(data.getFullYear() + 1);
        createCalendar(data);
    });
var inputYear = document.querySelector('#calendar_year');
inputYear.addEventListener('input', function () {
        if (/^\d{4}$/.test(this.value)) {
           data.setYear(this.value);
           createCalendar(data);
        }
    });
// и т.д.
function createCalendar(data)
{
var now = (new Date()).setHours(0,0,0,0);
var year = data.getFullYear();
inputYear.value = year;
var month = data.getMonth();
selectMonth.selectedIndex = month;
var cls = ['prevMonth', 'curMonth', 'nextMonth'], indexCls = 0;
var html = data.reduce(function(value, current, index, source) {
var date = current.getDate();
if(date == 1) indexCls++;
var className = cls[indexCls];
if (+now == +current) { // если дата равна сегодня
   className += ' curDay';
   //
}
if (current.getDay() == 1) value += '<tr>';
        return value + '<td class="'+className+'">' + date;
}, '');
document.querySelector('#table tbody').innerHTML = html;
}
createCalendar(data);
// и т.д



    </script>
</body>
</html>
Ответить с цитированием
  #90 (permalink)  
Старый 01.08.2019, 14:06
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

рони,
сорри, но моих познаний тут явно недостаточно...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите доработать скрипт хештега alex72bel Общие вопросы Javascript 1 20.09.2015 23:20
Помогите доработать скрипт меню Фартовый Оффтопик 7 27.11.2014 14:07
Помогите доработать скрипт Joannes Общие вопросы Javascript 0 08.09.2013 21:21
Помогите доработать скрипт Kalashmet Ваши сайты и скрипты 2 02.09.2013 19:50
Помогите доработать скрипт jenya jQuery 12 01.11.2011 09:27