Простой календарь для сайта
Предлагаем Вашему вниманию JavaScript код, который позволит Вам реализовать на своем сайте календарь. Данный календарь будет способен рассчитать, сколько дней в месяце, и какими днями недели будут числа в указанных месяцах и годах.
Предлагаемый нами календарь содержит множество настроек, которые позволяют настраивать его отображение.
Чуть ниже Вы можете наблюдать пример работы предлагаемого Вам скрипта календаря:
Для получения у себя точно такого же календаря, как и в примере, показанном чуть выше, добавьте в шапку сайта CSS код:
<style type="text/css">
.calendar { margin: 0 auto; font-weight: bold; }
.calendar td { width: 30px; height: 16px; }
.calendar tr { background-color: gray; }
.day_off { background-color: red; color: white; }
#today_cell, #cal_cell { cursor: pointer; }
#today_cell:hover, #cal_cell:hover { color: green; }
</style>Далее скопируйте JavaScript код, который позволяет создать календарь на сайте:
<script type="text/javascript">
var dDate = new Date();
var cur_month = dDate.getMonth();
var day_of_month = dDate.getDate();
var cur_year = dDate.getFullYear();
var bgcolor, tbgcolor, ntbgcolor;
function DaysInMonth(iMonth, iYear) {
var prev_date = new Date(iYear, iMonth, 0);
return prev_date.getDate();
}
function build_cal(iYear, iMonth) {
var the_month = new Array();
the_month[0] = new Array("Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс");
the_month[1] = new Array(7);
the_month[2] = new Array(7);
the_month[3] = new Array(7);
the_month[4] = new Array(7);
the_month[5] = new Array(7);
the_month[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth-1, 1);
var day_first = dCalDate.getDay();
var iDaysInMonth = DaysInMonth(iMonth, iYear);
var iVarDate = 1;
var i, d, w;
if (day_first==0) day_first = 6;
else day_first = day_first - 1;
for (d=day_first; d < 7; d++) {
the_month[1][d] = iVarDate;
iVarDate++;
}
for (w=2; w < 7; w++) {
for (d=0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
the_month[w][d] = iVarDate;
iVarDate++;
}
}
}
return the_month;
}
function draw_cal(iYear, iMonth, inwe_col, itbg_col, intbg_col) {
tbgcolor = itbg_col;
ntbgcolor = intbg_col;
var my_month=build_cal(iYear, iMonth);
document.write("<table class='calendar'>");
document.write("<tr align='center' style='color:" + inwe_col + "'>");
document.write("<td>" + my_month[0][0] + "</td>");
document.write("<td>" + my_month[0][1] + "</td>");
document.write("<td>" + my_month[0][2] + "</td>");
document.write("<td>" + my_month[0][3] + "</td>");
document.write("<td>" + my_month[0][4] + "</td>");
document.write("<td class='day_off'>" + my_month[0][5] + "</td>");
document.write("<td class='day_off'>" + my_month[0][6] + "</td></tr>");
for (w=1; w < 7; w++) {
document.write("<tr align='center' valign='center'>")
for (d=0; d < 7; d++) {
if (my_month[w][d]==day_of_month)
document.write("<td id=today_cell bgcolor='" + tbgcolor + "'>");
else document.write("<td id=cal_cell bgcolor='" + ntbgcolor + "'>");
if (!isNaN(my_month[w][d])) document.write("<font id=cal_text>" + my_month[w][d]);
else document.write("<font id=cal_text> ");
document.write("</td>")
}
document.write("</tr>");
}
document.write("</table>")
}
function update(iYear, iMonth) {
my_month = build_cal(iYear, iMonth);
if (((iMonth-1)==cur_month) && (iYear==cur_year)) today_cell.bgColor = tbgcolor;
else today_cell.bgColor = ntbgcolor;
for (w=1; w < 7; w++) {
for (d=0; d < 7; d++) {
if (!isNaN(my_month[w][d])) cal_text[((7*w)+d)-7].innerText = my_month[w][d];
else cal_text[((7*w)+d)-7].innerText = " ";
}
}
}
</script>Обращаем Ваше внимание на то, что текст скрипта приведен с переносами длинных строк, которые после копирования необходимо вновь написать в одну строку!
В том месте Вашей странички, где Вы планируете показывать данный календарь, добавьте следующие два кода:
<form name="c_fоrm" action="#" style="text-align: center;">
<select name="sel_month"
onchange='update(c_fоrm.sel_year.value, c_fоrm.sel_month.value)'>
<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>
<option value="12">Декабрь</option>
</select>
<select name="sel_year"
onchange='update(c_fоrm.sel_year.value, c_fоrm.sel_month.value)'>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</form><script type="text/javascript">
var cur_date=new Date();
draw_cal(cur_date.getFullYear(), cur_date.getMonth()+1, "white", "red", "silver");
c_fоrm.sel_month.options[cur_date.getMonth()].selected=true;
for (i=0; i < c_fоrm.sel_year.length; i++)
if (c_fоrm.sel_year.options[i].value==cur_date.getFullYear())
c_fоrm.sel_year.options[i].selected=true;
</script>Еще раз обращаем Ваше внимание на то, что текст скрипта в некоторых местах приведен с переносами длинных строк, которые после копирования к себе на сайт необходимо вновь написать в одну строку!
И пусть большой размер приведенного кода Вас не пугает, он нисколько не будет тормозить работу Вашего сайта.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
А еще проще откройте исходный код данной странички и скопируйте JavaScript код оттуда.
За цвет текущего числа отвечает третье с конца значение.
P.S. Тему чуть-чуть обновил.
<input type="button" onclick='update(new Date().getFullYear(),new Date().getMonth()+1)' value="Вернуться">
А вот со стрелками сложнее, т.к. надо где-то хранить текущие значения месяца и года и придется менять функции.