30.07.2019, 19:36
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
laimas,
в принципе календарь и будет менять свой вид раз в месяц, поскольку он будет встраиваться в страницу, а не использоваться как отдельная страница сайта...
|
|
30.07.2019, 19:49
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Блондинка
|
календарь и будет менять свой вид раз в месяц
|
Это как, если у него есть кнопки управления для перелистывания его?
Не спрашивайте у меня как сделать, как хотите так и делайте, я не имею цели переубедить вас.
|
|
30.07.2019, 23:22
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
ну если основной контент страницы несёт свою смысловую информацию, и где-то в левой или правой боковой колонке страницы несущей дополнительную информацию расположен календарь с элементами управления и возможностью просмотра других месяцев, то это не значит что посетители будут игнорить основной контент и ежесекундно щёлкать календарь...
|
|
31.07.2019, 01:39
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Если следовать вашей логике, то вы опираетесь на предположение, что пользователи будут игнорировать ваш календарь. Тогда встает вопрос зачем он вообще нужен, зачем ему элементы управления, зачем вообще вы тратите на него столько времени?
|
|
31.07.2019, 12:53
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
laimas,
если календарём в основном не будут пользоваться, то это не значит что не может возникнуть ситуация у кого нибудь из пользователей что нужно посмотреть сетку за другой месяц, и хотелось бы чтобы в этих случаях календарь был максимально удобным в навигации...
|
|
31.07.2019, 13:38
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Блондинка
|
может возникнуть ситуация у кого нибудь из пользователей что нужно посмотреть сетку за другой месяц, и хотелось бы чтобы в этих случаях календарь был максимально удобным в навигации...
|
К чему тогда разговоры об ином, вот и делайте удобный интерфейс.
|
|
31.07.2019, 14:22
|
Профессор
|
|
Регистрация: 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.
|
|
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>
возможно ли переместить кнопки "пред" "след" и разместить их возле выпадающего списка, и возможно ли задать таблице фиксированную высоту?
|
|
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>
|
|
01.08.2019, 14:06
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
рони,
сорри, но моих познаний тут явно недостаточно...
|
|
|
|