Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Календарь на страницах сайта.

Viktor | 24.02.2014 | нет комментариев

Как добавить календарь на web-страницу.

Сегодня мы разберемся с вопросом: как сделать на сайте календарь. Зачем это надо? На мой взгляд абсолютно некчему, но многим web-мастерам хочется иметь такую фенечку у себя на сайте. Идя навстречу пожеланиям читателей рассылки и посетителям моего сайта мы сегодня разберемся с этим вопросом.

Ниже Вы видите один из примеров реализации календаря, на самом деле вариантов может быть много, но в основном все подобные календари используют JavaScript.

Февраль 2014
Вс Пн Вт Ср Чт Пт Сб
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28

JavaScript – это язык для составления сценариев, позволяющих выполнять разные действия непосредственно на машине пользователя. Располагаются данные сценарии внутри HTML документов (в html-коде).

Для простоты и ускорения процесса давайте воспользуемся уже готовым кодом JavaScript. Смотрите Листинг 1 ниже, мы просто разберемся в тех параметрах, которые Вы можете подкорректировать, чтобы “подогнать” скрипт под дизайн своего сайта.

Листинг 1

<script language=”JavaScript”>
<!–
<!– Begin
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=1 bgcolor=#F6F6F6 bordercolor=#6699CC>“);
document.write(“
<tr><td colspan=7 align=center><b><font size=2>” + monthnames[thismonth] + ” ” + thisyear + “</font></b></td></tr>“);
document.write(“
<tr>”);
document.write(“<td align=center><font size=2>Вс</font></td>“);
document.write(“
<td align=center><font size=2>Пн</font></td>“);
document.write(“
<td align=center><font size=2>Вт</font></td>“);
document.write(“
<td align=center><font size=2>Ср</font></td>“);
document.write(“
<td align=center><font size=2>Чт</font></td>“);
document.write(“
<td align=center><font size=2>Пт</font></td>“);
document.write(“
<td align=center><font size=2>Сб</font></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><font size=2>“);
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′><b>“);
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(” “);
}
if (count==thisdate) {
document.write(“
</b></font>“);
}
if (linktrue)
document.write(“
</a>“);
document.write(“
</font></td>“);
count++;
}
document.write(“
</tr>“);
startspaces=0;
}
document.write(“
</table>“);
// End
// –>
</script>

Т.е. если Вы скопируете весь код Листнга 1 (как есть) и вставите в нужное место своего сайта, то отобразится календарь который Вы видите выше.

А теперь давайте разберёмся с параметрами в этом скрипте, отвечающими за внешний вид календаря. В Листинге 2 (ниже) Вы видите фрагмент кода (то что Вам можно редактировать без ущерба работоспособности) JavaScript (а):

Листинг 2


document.write(“
<table border=1 bgcolor=#F6F6F6 bordercolor=#6699CC>“);
document.write(“
<tr><td colspan=7 align=center><b><font size=2>” + monthnames[thismonth] + ” ” + thisyear + “</font></b></td></tr>“);
document.write(“
<tr>”);
document.write(“<td align=center><font size=2>Вс</font></td>“);
document.write(“
<td align=center><font size=2>Пн</font></td>“);
document.write(“
<td align=center><font size=2>Вт</font></td>“);
document.write(“
<td align=center><font size=2>Ср</font></td>“);
document.write(“
<td align=center><font size=2>Чт</font></td>“);
document.write(“
<td align=center><font size=2>Пт</font></td>“);
document.write(“
<td align=center><font size=2>Сб</font></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><font size=2>“);
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′><b>“);

Как Вы уже поняли, для визуального отображения календаря используется обычная таблица и все параметры которые нужно изменить для изменения внешнего вида – это обычный html-код. Если Вы знакомы с HTML – то проблем у Вас не возникнет.

table border=1 bgcolor=#F6F6F6 bordercolor=#6699CC – соответственно: толщина линий таблицы, фоновый цвет внутри таблицы и цвет линий границ.

font size=2 – размер шрифта.

font color=’FF0000′ – цвет текущей (сегодняшней) даты, в данном случае красный.

Цвет месяца и остальных цифр в календаре соответствует общему цвету на Вашей web-странице.

Вот в общем то и все, если Вам нужен календарь на сайте, копируйте код Листинга 1, редактируйте под дизайн своего сайта и вставляйте в нужное место кода своего сайта.

Удачи.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB