Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB