12.01.2019, 13:52
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Просто я смотрю базу Производственный календарь Правительства РФ, там они дают данные в таком виде, как я описал нерабочими днями, разделить ее конечно можно на две базы праздничные и выходные дни (или рабочие субботы). Просто там она уже в готовом виде, качнул, обновил, а так придется что-то сочинять еще, чтобы на две разделить или вручную 27 лет проштудировать.
Последний раз редактировалось Rise, 12.01.2019 в 13:56.
|
|
12.01.2019, 14:55
|
 |
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Rise,
Ну я как бы живу в Белоруссии, и это должны быть моими проблемами, что именно отмечать в отдельных файлах, просто я продумываю календарь универсальный, который можно будет использовать на любом сайте любой тематики, и что бы можно было изменить его функционал изменяя только стили
|
|
12.01.2019, 15:39
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Сообщение от m~r.Nemo
|
|
что именно отмечать в отдельных файлах
|
Но государственные праздники не вы определяете или вы? Конечно вы можете свои придумать) Без разницы страна какая, если есть возможность данные надо брать с первоисточника, у нас праздники определяет Правительство, у него есть API на эту тему, вот я вам про него и пишу, а что у вас там я не знаю, вы же сразу белорусом не представились)) Тем более у вас в календаре День России написано, это как понимать, вы его тоже празднуете у себя?)
|
Сообщение от m~r.Nemo
|
|
изменить его функционал изменяя только стили
|
Стили внешний вид меняют, функционал-то здесь причем.
Последний раз редактировалось Rise, 12.01.2019 в 15:52.
|
|
12.01.2019, 16:12
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Rise,
Всегда бывают исключения, надо разместить скрипт на сайте предприятия где из-за непрерывного цикла смещены рабочие субботы, на сайте религиозной тематики другие праздники, и тд
Ну к примеру календарь отображает дни предыдущего и будущего месяца, зачем копаться в коде и убирать их? если можно просто изменить цвет текста, на транспорент, ргба, хсла и просто поставить цвет как фона,
на одном сайте нужно добавить селект с выбором числа, на другом сайте не нужно, есть свойство дисплей ноге, в одном случае надо чтобы скрипт выводил праздники-события, в другом случае не надо, убираем опять через дисплей ноне... с этим справиться любой новичок только познающий хтмл
|
|
15.01.2019, 19:52
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Тут появился вопросик, хочу под календарем чтобы вывалилась информация о празднике/событии, и навигацией по дням, с эстетической так сказать точки зрения, как лучше эту навигацию? или добавить селект с выбором числа, или же лучше чтобы числа были ссылками, для перехода к конкретному числу?
|
|
16.01.2019, 14:03
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
m~r.Nemo,
То что у вас это еще называется "date picker", погуглите по картинкам, посмотрите какие бывают навигации.
|
|
15.02.2019, 02:15
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Не могу найти образец, где названия дней недели меняется при клике, со строки в столбик...
|
|
15.02.2019, 21:36
|
|
Аспирант
|
|
Регистрация: 27.10.2012
Сообщений: 80
|
|
|
Rise,
Я тут подумал, ведь в принципе возможно определить страну посетителя, так почему бы не создать отдельные файлы с праздниками разных стран (России, Украины, Белоруссии, Казахстана, и др стран СНГ) и исходя из содержимого этих файлов менять класс ячеек(подсвечивать праздники)
|
|
16.02.2019, 14:56
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Сообщение от m~r.Nemo
|
|
образец, где названия дней недели меняется при клике, со строки в столбик
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calendar</title>
</head>
<body>
<style>
.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; }
</style>
<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 = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
calendar.element = document.querySelector('.month');
calendar.element.addEventListener('click', function () { calendar.toggle() });
calendar.update(thisYear, thisMonth);
calendar.render();
</script>
</body>
</html>
|
Сообщение от m~r.Nemo
|
|
так почему бы не создать отдельные файлы с праздниками разных стран
|
Значит структура данных файла должна быть универсальной для этих стран.
|
|
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.
|
|
|
|
