15.02.2019, 02:15
|
 |
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Не могу найти образец, где названия дней недели меняется при клике, со строки в столбик...
|
|
15.02.2019, 21:36
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Rise,
Я тут подумал, ведь в принципе возможно определить страну посетителя, так почему бы не создать отдельные файлы с праздниками разных стран (России, Украины, Белоруссии, Казахстана, и др стран СНГ) и исходя из содержимого этих файлов менять класс ячеек(подсвечивать праздники)
|
|
17.02.2019, 08:33
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
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>
селект с выбором числа и по умолчанию скрыты, если нужно выводить в отдельном диве события/праздники тогда вывести на экран этот селект, как то так...
Последний раз редактировалось m~r.Nemo, 17.02.2019 в 08:36.
|
|
17.02.2019, 09:05
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Праздники и события я думаю можно вынести в отдельные файлы "html", для праздников один файл, для рабочих суббот второй, для особых событий третий, и четвертый для простых событий которые в календаре не подсвечиваются а только выводятся текстом в диве внизу,
даты в файлах заносить в виде
хх.хх.хххх-хххх г. чтобы можно было указать начало события, или конец события, ну или промежуток годов когда это событие показывается, например новый год начали отмечать в 193х или 194х году, точно не помню, надо в вики посмотреть, значит указыаем 01.01.19хх-хххх, а до этого года нг выводится как будний день,
Рождество отмечалась до революции, при союзе не отмечалось, а после распада союза опять начали отмечать, значит в файл заносим две записи, 07.01.хххх-1917 и 07.01.1991-хххх, что значит что Рождество подсвечиваться до 1917 и после 1991 года...
как то так мне представляется реализация календаря...
|
|
20.02.2019, 00:37
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Вопрос такой, может правильнее заносить даты событий в формате число месяц ≤/≥год?
С знаками ≤ и ≥?
И в случае необходимости указывать года через запятую?
Например 01.07.≤1917,≥1991 Рождество
Как правильнее и универсальнее заносить даты событий/праздников в отдельные файлы?
|
|
21.02.2019, 04:37
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
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 лет вперед, так что крещение Руси и более ранние периоды это уже слишком...
Для начала под словом универсальность я подразумевал максимально удобную навигацию, как два выпадающих списка для выбора числа и месяца и поля ввода для года, с добавлеными кнопками < и > плюс скрытая/появляющаяся кнопка сегодня, и кнопка для изменения ориентации календаря(с меняющимся текстом, стрелка вправо при вертикальном расположении дней и вниз при горизонтальном),
Сначала хотелось бы получить календарь см выше, с первым днем недели пн, подсвеченными днями пред/будущ мес, подсвеченными выходными, и подсвеченными сегодняшним днем недели и числом, а подсветка праздников пока только в планах...
просто я интересуюсь как лучше и правильнее это реализовать...
|
|
22.02.2019, 00:33
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Поскольку календарь предназначен для вывода на страницах сайта, он по умолчанию не может быть универсальным в широком смысле этого слова, а должен быть универсальным для просмотра и навигации именно на сайте, Rise согласись, не очень удобно когда месяц и год выводятся текстом и только две кнопки вперед/назад, удобнее когда подобные кнопки есть и у месяца и у года, неудобно кнопками листать 20-30-50 месяцев или лет, гораздо удобнее когда есть выпадающий список, а ещё удобнее когда возле выпадающего списка есть кнопки вперёд/назад, так придётся делать гораздо меньше телодвижений для просмотра определённого месяца, также выпадающий список не удобен для навигации по годам если надо посмотреть календарь за +-50лет, тут гораздо удобнее поле ввода, но поле ввода не очень удобно для просмотра +-1 год, в этом случае гораздо удобнее кнопки, а когда есть и поле ввода и кнопки это намного удобнее, в одном случае можно воспользоваться кнопками, в другом полем ввода или выпадающим списком, так придётся делать на порядок меньше телодвижений, кнопка "сегодня" как бы мешает и раздражает если она есть всегда, но она намного удобнее для возврата к текущему месяцу, значит (я считаю) её нужно спрятать и показывать только тогда, когда на экране отображается нетекущий месяц, как так я пытаюсь рассуждать...
По поводу подсветки праздников, я хочу вывести всю информацию о празднике(как бы скопировать нужную часть с вики и тд) и пытаюсь разобраться как лучше заносить даты чтобы потом было удобнее, скопировать только часть текста из этих файлов для вставки в Нижний див под сеткой календаря...
как то так...
|
|
23.02.2019, 05:22
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
Rise,
Позволь с тобой не согласиться по некоторым пунктам, и так
пункт первый: кнопка поворот, видимо ты не внимательно читал мои посты...
Сообщение от m~r.Nemo
|
|
и кнопка для изменения ориентации календаря(с меняющимся текстом, стрелка вправо при вертикальном расположении дней и вниз при горизонтальном),
|
тут я согласен что нужна только одна единственная кнопка работающая как переключатель, я разместил две только для того чтобы показать как она должна меняться, другими словами я просто отобразил как должны меняться свойства border-radius и transform rotate(90deg),а названия дней недели там лишнее, уберу, достаточно одной стрелки...
Пункт второй: кнопка "сегодня" по моему мнению неважно о чём разговор о сегодняшнем числе или месяце, мне представляется что она нужна только для того, чтобы, подчёркиваю в один клик, вернуться к сегодняшнему числу или месяцу, поэтому мне не совсем понятно зачем она нужна при отображении текущего месяца или числа, поэтому я и думаю что её надо скрыть и показывать при любом отклонении от текущего момента...
Пункт третий: навигация по годам,
я пытался искать календари в сети, посмотрел не один десяток вариантов, и пришёл к выводу что навигация на 30-50 лет очень нудна при использовании кнопок, также достаточно муторно с выпадающий списком, сначала на 10 лет, потом второй третий пятый раз? также муторно пользоваться селектом если там будут указаны все года, одним словом я пришёл к выводу что навигация по годам наиболее удобна именно с полем ввода, начал искать, найдя в сети календарь который выложен в первом посте, попробовал поюзать, выяснилось что он оптимален для юзанья на большие периоды (30-50 и более лет), но неудобен при отклонении на год 2-3, из предыдущего опыта юзанья других календарей я пришёл к выводу наиболее оптимальным вариантом будет поле ввода плюс кнопки, на этом варианте и остановился...
|
|
23.02.2019, 07:43
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Пункт четвёртый: навигация по месяцам, из предыдущего опыты юзанья разных календарей пришёл к выводу, что выпадающий список практически одинаков по удобству юзанья с вариантом где месяц выведен текстом с кнопками, просто раньше мне хотелось скорее из соображений эстетических чтобы был элемент формы, что то типа поля ввода или выпадающий список, но впринципе вывести месяц текстом и сьимитировать внешний вид выпадающего списка через стили элементарно, просто добавлю треугольник-стрелку... "∇"
Пункт пятый: навигация по числам - поскольку это не органайзер, не ежедневник, а именно календарь, мне тоже кажется что выбор дат из сетки будет лучше, плюс уменьшиться ширина календаря что органично повлияет на внешний вид, маленький размер текста с большими отступами смотрится не очень... тут возник вопрос, возможно ли как нибудь реализовать чтобы на разных страницах одного и того же сайта отображался календарь на одних стр с выбором числа, а на других без выбора числа?
рано или поздно прийду к подсветке праздников для разных стран, как лучше поступить если вдруг у кого-то не определило страну, и опредилило ошибочно? Может стоит добавить заранее выпадающий список с выбором страны, чтобы посетитель мог вручную выбрать страну?
|
|
23.02.2019, 19:36
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Rise,
п2. поскольку это календарь для сайта, то его предназначение просто показать сетку календаря за текущий месяц, плюс возможность навигации месяцам и годам, по умолчанию стоит текущие месяц и число, если кому-то надо что-то другое(не текущее число), пусть тот и заморачивается, мне же надо просто календарь с текущим числом/месяцем, как названа кнопка "сегодня", "назад", "вернуться" мне кажется не столь важным..
предназначение этой кнопки - в один клик вернуться к исходному отображении..
п.3 для листания календаря есть кнопки возле поля ввода...
п.4 у каждого свой вкус, сказал индус, натягивая ... обезьяну, не буду спорить спорить, ведь у каждого своё мнение, но мне так больше нравится...
п.5 поскольку в данном случае навигация по числам нужна исключительно для просмотра событий за этот день, то на части страниц показывать календарь с дивом под сеткой, на других страницах этот див (с событиями) лишний, и показать только сетку... В посте выше я ведь определился что селект для выбора числа лишний, и нужен выбор числа из сетки, следовательно на одних страницах с навигацией с выбором из сетки, на других стр в сетке просто текст а не кнопки/иконки... Другими словами на страницах открытых для всех выводится просто сетка, а на закрытых(регистрацией) страницах выводим календарь с дивом под сеткой и навигацией по числам...
А причём перевод? если вдруг скрипт ошибочно определил страну(впн и тд) , и русскоговорящий посетитель хочет видеть подсветку праздников своей страны, а не чужой, почему бы не дать ему возможность исправления вручную...
|
|
|
|
