Календарь для сайта с помощью JavaScript
В преддверии очередного празднования Нового года, как не вспомнить о календарях. Вот и я решил поделиться с вами, простеньким методом вывода календаря на страницы ваших сайтов с помощью JavaScript.
Этот небольшой скрипт, показывает календарь на текущий месяц и выделяет цветом актуальную дату. Внешний вид календаря (все элементы таблицы) настраивается непосредственно в js.
Можно не особо себя утруждая и не вдаваясь в тонкости работы скрипта, просто скопировать код из архива и вставить в html-страницу вашего сайта, там где отведете место под календарь.
Для особо интересующихся приведу код скрипта, с некоторыми комментариями к настройкам формирования внешнего вида календарика:
<script type="text/javascript"> monthnames = new Array( "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"); var linkcount=0; function addlink(month, day, href) { var entry = new Array(3); entry[0] = month; entry[1] = day; entry[2] = href; this[linkcount++] = entry; } Array.prototype.addlink = addlink; linkdays = new Array(); monthdays = new Array(12); monthdays[0]=31; monthdays[1]=28; monthdays[2]=31; monthdays[3]=30; monthdays[4]=31; monthdays[5]=30; monthdays[6]=31; monthdays[7]=31; monthdays[8]=30; monthdays[9]=31; monthdays[10]=30; monthdays[11]=31; todayDate=new Date(); thisday=todayDate.getDay(); thismonth=todayDate.getMonth(); thisdate=todayDate.getDate(); thisyear=todayDate.getYear(); thisyear = thisyear % 100; thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear)); if (((thisyear % 4 == 0) && !(thisyear % 100 == 0)) ||(thisyear % 400 == 0)) monthdays[1]++; startspaces=thisdate; while (startspaces > 7) startspaces-=7; startspaces = thisday - startspaces + 1; if (startspaces < 0) startspaces+=7; document.write("<table border=2 bgcolor=white "); document.write("bordercolor=black><font color=black>"); document.write("<tr><td colspan=7><center><strong>" + monthnames[thismonth] + " " + thisyear + "</strong></center></font></td></tr>"); document.write("<tr>"); document.write("<td align=center>Вс</td>"); document.write("<td align=center>Пн</td>"); document.write("<td align=center>Вт</td>"); document.write("<td align=center>Ср</td>"); document.write("<td align=center>Чт</td>"); document.write("<td align=center>Пт</td>"); document.write("<td align=center>Сб</td>"); document.write("</tr>"); document.write("<tr>"); for (s=0;s<startspaces;s++) { document.write("<td> </td>"); } count=1; while (count <= monthdays[thismonth]) { for (b = startspaces;b<7;b++) { linktrue=false; document.write("<td>"); for (c=0;c<linkdays.length;c++) { if (linkdays[c] != null) { if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) { document.write("<a href=\"" + linkdays[c][2] + "\">"); linktrue=true; } } } if (count==thisdate) { document.write("<font color='FF0000'><strong>"); } if (count <= monthdays[thismonth]) { document.write(count); } else { document.write(" "); } if (count==thisdate) { document.write("</strong></font>"); } if (linktrue) document.write("</a>"); document.write("</td>"); count++; } document.write("</tr>"); document.write("<tr>"); startspaces=0; } document.write("</table></p>"); </script> |
Как видим, код не слишком заковыристый и минимальные настройки будут под силу каждому.
На этом пожалуй пока всё, как все нормальные люди спешу встретить Новый год.
Всех жителей планеты «Интернет» с праздником и до встречи в новом году.
Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:
Здравствуйте, скажите, а как можно добавить в этот календарь события на определенные дни с переходом по ссылке?
Например, 5 июня — добавлено событие — пользователь кликает и идет по ссылке.
Спасибо.
Как сделать так что бы я мог подставлять свою дату, или промежуток дат?
Извините, но в данном случае никак, это простейший календарь с обозначением текущей даты, ничего более)))
Возможно ли под данный календарь написать свой css стиль? Подогнать его под общий дизайн сайта?
Конечно возможно, можете вынести в свой css, а можете непосредственно в скрипте изменить толщину бордюра, цвет текста, фон, общие размеры таблицы, в примере кода в статье показано и подписано где что меняется, например хотите сделать календарь шире и выше, добавляете
width=300
иheight=350
для table и т.д.