Нужен календарь
Нуже подобный календарь, а только более удобный и функциональный...
<style>
#calendar3 { width: 250px; font: monospace; line-height: 1.2em; font-size: 24px; text-align: center; }
#calendar3 thead tr:last-child { font-size: small; color: #555555; }
#calendar3 tbody td { color: #2c567a; }
#calendar3 tbody td { color: #2c567a; }
#calendar3 tbody td:nth-child(n+6), #calendar3 .holiday { color: #e7285c; }
#calendar3 tbody td.today { outline: 3px solid #ff0000; }
td { background: #e6e6e6; border: 1px solid #b9b9b9; }
</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> ';
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> <td> <td> <td> <td> <td> <td> ';
}
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>
Кто возьмётся написать? или доработать этот? |
По поводу календаря, пока есть два вопроса,
возможно ли скрипт разделить на части, чтобы информация о государственных праздниках, рабочих субботах, важных событиях бралась из отдельных файлов, например txt Насколько сложно реализовать календарь, что бы по клику менялась ориентация, с горизонтальной на вертикальную (пн вт ср расположены в колонку а не в строку) и обратно по клику... |
Цитата:
|
Тогда остается один вопрос, насколько сложно реализовать календарь, что бы по клику менялась ориентация, с горизонтальной на вертикальную (пн вт ср расположены в колонку а не в строку) и обратно по клику...
другими словами хочу спросить насколько больше получится кода, в процентах, на 10, 20, 50, 100%? |
Цитата:
Цитата:
|
Rise,
ну как вариант сойдет, но мне бы хотелось разделить этот момент, тоесть праздники отдельно из файла, рабочие субботы отдельно из другого файла, а просто выходные по дню недели... |
Цитата:
|
Rise,
Ну я как бы живу в Белоруссии, и это должны быть моими проблемами, что именно отмечать в отдельных файлах, просто я продумываю календарь универсальный, который можно будет использовать на любом сайте любой тематики, и что бы можно было изменить его функционал изменяя только стили |
Rise,
Всегда бывают исключения, надо разместить скрипт на сайте предприятия где из-за непрерывного цикла смещены рабочие субботы, на сайте религиозной тематики другие праздники, и тд Ну к примеру календарь отображает дни предыдущего и будущего месяца, зачем копаться в коде и убирать их? если можно просто изменить цвет текста, на транспорент, ргба, хсла и просто поставить цвет как фона, на одном сайте нужно добавить селект с выбором числа, на другом сайте не нужно, есть свойство дисплей ноге, в одном случае надо чтобы скрипт выводил праздники-события, в другом случае не надо, убираем опять через дисплей ноне... с этим справиться любой новичок только познающий хтмл |
Тут появился вопросик, хочу под календарем чтобы вывалилась информация о празднике/событии, и навигацией по дням, с эстетической так сказать точки зрения, как лучше эту навигацию? или добавить селект с выбором числа, или же лучше чтобы числа были ссылками, для перехода к конкретному числу?
|
Не могу найти образец, где названия дней недели меняется при клике, со строки в столбик...
|
Rise,
Я тут подумал, ведь в принципе возможно определить страну посетителя, так почему бы не создать отдельные файлы с праздниками разных стран (России, Украины, Белоруссии, Казахстана, и др стран СНГ) и исходя из содержимого этих файлов менять класс ячеек(подсвечивать праздники) |
Rise,
Я пересмотрел весь инет, но именно этого функционала не смог найти ни в одном календаре, это именно то, что я очень долго искал... Если бы неделя начиналась с понедельника, были выделены дни предыдущего/будущего месяца, выходные(сб,вс) и рабочие дни через класс, было бы отлично, а если бы подсвечивались сегодняшнее число и день недели было бы вообще супер... Навигация мне представляется через селект с выбором месяца и инпут для ввода года, для большего удобства думаю добавить и к селекту и к инпуту кнопки вперёд/назад, и скрытую кнопку "сегодня" которая появляется при навигации, а по умолчанию скрыта...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calendar</title>
<style>
body { margin: 5px; font: 14px; color: #008000; }
#calendar { width: 400px; background: #e6e6e6; }
table.panel { width: 500px; border-left: 1px solid #008000; border-top: 1px solid #008000; border-right: 1px solid #008000; }
td.top-panel { border: 1px solid #008000; height: 12px; line-height: 0px; }
select.select-panel { background: #d7ffd7; color: #008000; font-size: 14px; height: 22px; border: 1px solid #d7ffd7; margin-top: -5px; margin-bottom: -5px; }
input.unput-panel { width: 36px; height: 18px; background: #d7ffd7; color: #008000; font-size: 14px; border: 1px solid #d7ffd7; margin: 0px; }
option { background: #ddeeff; color: #008000; }
td.left { background: #d7ffd7; width: 26px; height: 12px; text-align: center; border: 1px solid #008000; border-top-left-radius: 18px 12px; border-bottom-left-radius: 18px 12px; } td.right { background: #d7ffd7; width: 26px; height: 12px; text-align: center; border: 1px solid #008000; border-top-right-radius: 18px 12px; border-bottom-right-radius: 18px 12px;}
a.left { color: #008000; display: block; vertical-align: middle; }
a.right { color: #008000; display: block; vertical-align: middle; }
td.display_none { height: 24px; background: #d7ffd7; border: 1px solid #008000; border-radius: 18px/12px; }
a.presently { color: #008000; display: block; text-align: center; vertical-align: middle; }
td.td_day_right { height: 20px; border: 1px solid #008000; border-top-left-radius: 5px; border-top-right-radius: 18px 12px; border-bottom-left-radius: 5px; border-bottom-right-radius: 18px 12px; vertical-align: top; }
span.day_norotate { line-height: 0.2; }
span.day_right, span.day_bottom { display: inline-block; font-size: 5px; }
span.text_bottom { -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); display: inline-block; vertical-align: text-top; }
td.td_day_bottom { height: 20px; border: 1px solid #008000; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 12px 18px; border-bottom-right-radius: 12px 18px; }
table.calendar_menu { width: 360px; border: 1px solid #008000; }
td.name_day { border: 1px solid #909090; color: #0000aa; padding: 5px; } /* название дня недели Пн Вт Ср Чт Пт */
td.name_day_today { border: 1px solid #909090; color: #000066; padding: 5px; } /* выделяем сегодняшний день недели */
td.name_day_output { border: 1px solid #909090; color: #c70000; padding: 5px; } /* название дня недели Сб Вс */
td.name_day_output_today { border: 1px solid #909090; color: #a30000; padding: 5px; } /* выделяем сегодняшний день недели Сб Вс */
td.other_month { border: 1px solid #909090; color: #ffa900; padding: 5px; } /* выделяем дни предыдущего и будущего месяца */
td.workday { border: 1px solid #909090; color: #2179ba; padding: 5px; } /* отмечаем будние дни (и рабочие субботы) */
td.workday_today { border: 1px solid #909090; color: #175685; padding: 5px; } /* выделяем сегодняшнее число */
td.event { border: 1px solid #909090; color: #5abe5a; padding: 5px; } /* выделяем событие, день рождения бабушки папы мамы дочки сына и т.д. */
td.event_today { border: 1px solid #909090; color: #428c42; padding: 5px; } /* выделяем сегодняшнее число с событием */
td.event_output { border: 1px solid #909090; color: #e14384; padding: 5px; } /* выделяем событие выпадающее на выходной */
td.output { border: 1px solid #909090; color: #e65151; padding: 5px; } /* выделяем выходные */
td.output_today { border: 1px solid #909090; color: #dc6529; padding: 5px; } /* выделяем сегодняшнее число выходного */
td.holiday { border: 1px solid #909090; color: #ff6562; padding: 5px; } /* выделяем праздники */
td.holiday_today { border: 1px solid #909090; color: #de5451; padding: 5px; } /* выделяем сегодняшнее число праздника */
.month, .month.vert .week, .day { display:inline-block; }
.month.vert .day { display:block; }
.day { border: 1px solid #ccc; width: 30px; line-height: 30px; text-align: center; margin: 1px; }
</style>
</head>
<body>
<div id="calendar">
<table class="panel" cellspacing="3"><tr><td class="left"><a class="left">◁</a></td>
<td class="top-panel"><select class="select-panel"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select></td>
<td class="right"><a class="right">▷</a></td>
<td class="left"><a class="left">◁</a></td><td class="top-panel"><select class="select-panel"><option value="января">января</option><option value="февраля">февраля</option><option value="марта">марта</option><option value="апреля">апреля</option><option value="мая">мая</option><option value="июня">июня</option><option value="июля">июля</option><option value="августа">августа</option><option value="сентября">сентября</option><option value="октября">октября</option><option value="ноября">ноября</option><option value="декабря">декабря</option></select><td class="right"><a class="right">▷</a></td>
<td class="left"><a class="left">◁</a></td><td class="top-panel"><input type="number" step="1" size="4" maxlength="4" name="year" class="unput-panel"/></td><td class="right"><a class="right">▷</a></td>
<td class="td_day_right"><span class="day_norotate">➙</span><span class="day_right"><br/>Пн Вт Ср</span></td><td class="td_day_bottom"><span class="text_bottom">➙</span><span class="day_bottom">Пн<br/>Вт<br/>Ср</span></td></tr>
<tr><td colspan="10" class="display_none"><a class="presently">Сегодня</a></td></tr></table>
<div class="month"></div>
<script>
var calendar = {
update: function (year, month) {
this.days.length = 7;
var stepDay = new Date(year, month, 1);
stepDay.setDate(1 - stepDay.getDay());
var lastDay = new Date(year, month + 1, 0);
lastDay.setDate(lastDay.getDate() + 6 - lastDay.getDay());
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></head>
селект с выбором числа и по умолчанию скрыты, если нужно выводить в отдельном диве события/праздники тогда вывести на экран этот селект, как то так... |
Праздники и события я думаю можно вынести в отдельные файлы "html", для праздников один файл, для рабочих суббот второй, для особых событий третий, и четвертый для простых событий которые в календаре не подсвечиваются а только выводятся текстом в диве внизу,
даты в файлах заносить в виде хх.хх.хххх-хххх г. чтобы можно было указать начало события, или конец события, ну или промежуток годов когда это событие показывается, например новый год начали отмечать в 193х или 194х году, точно не помню, надо в вики посмотреть, значит указыаем 01.01.19хх-хххх, а до этого года нг выводится как будний день, Рождество отмечалась до революции, при союзе не отмечалось, а после распада союза опять начали отмечать, значит в файл заносим две записи, 07.01.хххх-1917 и 07.01.1991-хххх, что значит что Рождество подсвечиваться до 1917 и после 1991 года... как то так мне представляется реализация календаря... |
Вопрос такой, может правильнее заносить даты событий в формате число месяц ≤/≥год?
С знаками ≤ и ≥? И в случае необходимости указывать года через запятую? Например 01.07.≤1917,≥1991 Рождество Как правильнее и универсальнее заносить даты событий/праздников в отдельные файлы? |
Rise,
Ну в принципе можно добавить минимальное и максимальное значения для поля ввода, типа <input type="number" size="4" name="year" min="1900" max="2100" value="2019"> ну для большей универсальности можно чуть больше... <input type="number" size="4" name="year" min="1850" max="2200" value="2019"> но мне кажется это почему то лишним, ведь никто не будет вводить подобные даты чтоб посмотреть календарь за эти года, поэтому я думаю надо смотреть на вещи реально, и ограничиться датами советского периода(максимум 1900г.) ну и на 50-100 лет вперед, так что крещение Руси и более ранние периоды это уже слишком... Для начала под словом универсальность я подразумевал максимально удобную навигацию, как два выпадающих списка для выбора числа и месяца и поля ввода для года, с добавлеными кнопками < и > плюс скрытая/появляющаяся кнопка сегодня, и кнопка для изменения ориентации календаря(с меняющимся текстом, стрелка вправо при вертикальном расположении дней и вниз при горизонтальном), Сначала хотелось бы получить календарь см выше, с первым днем недели пн, подсвеченными днями пред/будущ мес, подсвеченными выходными, и подсвеченными сегодняшним днем недели и числом, а подсветка праздников пока только в планах... просто я интересуюсь как лучше и правильнее это реализовать... |
Поскольку календарь предназначен для вывода на страницах сайта, он по умолчанию не может быть универсальным в широком смысле этого слова, а должен быть универсальным для просмотра и навигации именно на сайте, Rise согласись, не очень удобно когда месяц и год выводятся текстом и только две кнопки вперед/назад, удобнее когда подобные кнопки есть и у месяца и у года, неудобно кнопками листать 20-30-50 месяцев или лет, гораздо удобнее когда есть выпадающий список, а ещё удобнее когда возле выпадающего списка есть кнопки вперёд/назад, так придётся делать гораздо меньше телодвижений для просмотра определённого месяца, также выпадающий список не удобен для навигации по годам если надо посмотреть календарь за +-50лет, тут гораздо удобнее поле ввода, но поле ввода не очень удобно для просмотра +-1 год, в этом случае гораздо удобнее кнопки, а когда есть и поле ввода и кнопки это намного удобнее, в одном случае можно воспользоваться кнопками, в другом полем ввода или выпадающим списком, так придётся делать на порядок меньше телодвижений, кнопка "сегодня" как бы мешает и раздражает если она есть всегда, но она намного удобнее для возврата к текущему месяцу, значит (я считаю) её нужно спрятать и показывать только тогда, когда на экране отображается нетекущий месяц, как так я пытаюсь рассуждать...
По поводу подсветки праздников, я хочу вывести всю информацию о празднике(как бы скопировать нужную часть с вики и тд) и пытаюсь разобраться как лучше заносить даты чтобы потом было удобнее, скопировать только часть текста из этих файлов для вставки в Нижний див под сеткой календаря... как то так... |
Rise,
Позволь с тобой не согласиться по некоторым пунктам, и так пункт первый: кнопка поворот, видимо ты не внимательно читал мои посты... Цитата:
Пункт второй: кнопка "сегодня" по моему мнению неважно о чём разговор о сегодняшнем числе или месяце, мне представляется что она нужна только для того, чтобы, подчёркиваю в один клик, вернуться к сегодняшнему числу или месяцу, поэтому мне не совсем понятно зачем она нужна при отображении текущего месяца или числа, поэтому я и думаю что её надо скрыть и показывать при любом отклонении от текущего момента... Пункт третий: навигация по годам, я пытался искать календари в сети, посмотрел не один десяток вариантов, и пришёл к выводу что навигация на 30-50 лет очень нудна при использовании кнопок, также достаточно муторно с выпадающий списком, сначала на 10 лет, потом второй третий пятый раз? также муторно пользоваться селектом если там будут указаны все года, одним словом я пришёл к выводу что навигация по годам наиболее удобна именно с полем ввода, начал искать, найдя в сети календарь который выложен в первом посте, попробовал поюзать, выяснилось что он оптимален для юзанья на большие периоды (30-50 и более лет), но неудобен при отклонении на год 2-3, из предыдущего опыта юзанья других календарей я пришёл к выводу наиболее оптимальным вариантом будет поле ввода плюс кнопки, на этом варианте и остановился... |
Пункт четвёртый: навигация по месяцам, из предыдущего опыты юзанья разных календарей пришёл к выводу, что выпадающий список практически одинаков по удобству юзанья с вариантом где месяц выведен текстом с кнопками, просто раньше мне хотелось скорее из соображений эстетических чтобы был элемент формы, что то типа поля ввода или выпадающий список, но впринципе вывести месяц текстом и сьимитировать внешний вид выпадающего списка через стили элементарно, просто добавлю треугольник-стрелку... "∇"
Пункт пятый: навигация по числам - поскольку это не органайзер, не ежедневник, а именно календарь, мне тоже кажется что выбор дат из сетки будет лучше, плюс уменьшиться ширина календаря что органично повлияет на внешний вид, маленький размер текста с большими отступами смотрится не очень... тут возник вопрос, возможно ли как нибудь реализовать чтобы на разных страницах одного и того же сайта отображался календарь на одних стр с выбором числа, а на других без выбора числа? рано или поздно прийду к подсветке праздников для разных стран, как лучше поступить если вдруг у кого-то не определило страну, и опредилило ошибочно? Может стоит добавить заранее выпадающий список с выбором страны, чтобы посетитель мог вручную выбрать страну? |
Rise,
п2. поскольку это календарь для сайта, то его предназначение просто показать сетку календаря за текущий месяц, плюс возможность навигации месяцам и годам, по умолчанию стоит текущие месяц и число, если кому-то надо что-то другое(не текущее число), пусть тот и заморачивается, мне же надо просто календарь с текущим числом/месяцем, как названа кнопка "сегодня", "назад", "вернуться" мне кажется не столь важным.. предназначение этой кнопки - в один клик вернуться к исходному отображении.. п.3 для листания календаря есть кнопки возле поля ввода... п.4 у каждого свой вкус, сказал индус, натягивая ... обезьяну, не буду спорить спорить, ведь у каждого своё мнение, но мне так больше нравится... п.5 поскольку в данном случае навигация по числам нужна исключительно для просмотра событий за этот день, то на части страниц показывать календарь с дивом под сеткой, на других страницах этот див (с событиями) лишний, и показать только сетку... В посте выше я ведь определился что селект для выбора числа лишний, и нужен выбор числа из сетки, следовательно на одних страницах с навигацией с выбором из сетки, на других стр в сетке просто текст а не кнопки/иконки... Другими словами на страницах открытых для всех выводится просто сетка, а на закрытых(регистрацией) страницах выводим календарь с дивом под сеткой и навигацией по числам... А причём перевод? если вдруг скрипт ошибочно определил страну(впн и тд) , и русскоговорящий посетитель хочет видеть подсветку праздников своей страны, а не чужой, почему бы не дать ему возможность исправления вручную... |
https://www.phpjabbers.com/free-event-calendar-script/
Скачал отсюда календарь. Установил на сайте, только вот текущий день не показывает, и еще при переходе на следующий месяц, где тоже есть события, дни этих событий не высвечиваются у меня на сайте, Ответ нашел - в комментариях к скрипту |
Цитата:
|
Цитата:
|
Rise,
ok! |
Rise,
:thanks: |
| Часовой пояс GMT +3, время: 15:48. |