Календарь на страницах сайта.
Автор: Андрей Краснокутский
Дата: 2010-05-25 Как добавить календарь на web-страницу.
Сегодня мы разберемся с вопросом: как сделать на сайте календарь. Зачем это надо? На мой взгляд абсолютно некчему, но многим web-мастерам хочется иметь такую фенечку у себя на сайте. Идя навстречу пожеланиям читателей рассылки и посетителям моего сайта мы сегодня разберемся с этим вопросом.
Ниже Вы видите один из примеров реализации календаря, на самом деле вариантов может быть много, но в основном все подобные календари используют JavaScript.
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, редактируйте под дизайн своего сайта и вставляйте в нужное место кода своего сайта.
Удачи.
Читайте так же:
Сайт своими руками от А до Я. Пошаговый Обучающий курс.
Как вставить Flash-ролик на страницы сайта.
Поддержание чистоты и порядка на Вашем компьютере.
Какими программами пользоваться для создания сайтов и для работы в Интернете?
Как найти человека в Интернете. Очередной Лохатрон? Или хороший сервис?
Анимированные картинки Цветы. Украсьте свой сайт, блог, форум.
Просмотров: 67372
Скрипт работает, но не удалось настроить ширину таблицы календаря, она не подчиняется свойству ширины таблицы: пишу в скрипте - document.write("<table width = 200 border=1 bgcolor=#F6F6F6 bordercolor=#6699CC>"); ни чего не происходит.
При уменьшении шрифта, ширина таблицы умешьшается автоматически и следовательно уменьшпется ширина всего календаря
Спасибо. Действительно, полезный урок.
Как переместить календарь в нижний правый угол сайта
Разместите код календаря в правом нижнем углу сайта или любом другом, и календарь будет отображатьс там где надо
Спасибо большое. Всё работает замечательно.
Скрипт работает, но не удалось настроить ширину таблицы календаря, она не подчиняется свойству ширины таблицы: пишу в скрипте - document.write("<table width = 200 border=1 bgcolor=#F6F6F6 bordercolor=#6699CC>"); ни чего не происходит.
обязательно нужно указать не только длинну но и ширину, а вы указали только один параметр
показывает дату компьютера реальную!
Все работает, без проблем! Спасибо за реальный скрипт, пробовала многие ваш лучший.
Как сделать чтоб первый день был понедельник
Если сделать так:
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>");
То меняются только вторая строчка (дни недели, а в самом календаре воскресная строчка не переноситься. Т.е. получается вверху пишет что Пн, а внизу под ним воскресные дни, как исправить?
Вот тут тоже прикольные календарики
http://fretka
Тоже хотелось бы что бы первым днём был понедельник!
А нельзя ли с ПН неделю начать?? Подскажите как.
Глупый календарь, начало недели с понедельника, бред!
Что? Бред? Ааа.... Виктор, тоесть по вашему неделя начинается с четверга?! :)
Что? Бред? Ааа.... Виктор, тоесть по вашему неделя начинается с четверга?! :)
Комментарии добавил(а): Алексей
Дата: 2011-01-24
Как сделать чтоб первый день был понедельник Если сделать так: 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>"); То меняются только вторая строчка (дни недели, а в самом календаре воскресная строчка не переноситься. Т.е. получается вверху пишет что Пн, а внизу под ним воскресные дни, как исправить?
путем логических размышлений. у меня это получилось за 10 минут.
было:
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;
стало:
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=2;
теперь 1-ое число месяца не показывает
Чтобы неделя начиналась с понедельника необходимо строчку
startspaces = thisday - startspaces + 1;
заменить на
startspaces = thisday - startspaces;
ну а далее переносите строчку с воскресеньем в конец недели и все
Спасибо Автору за листинг календаря.
Лис, огромное спасибо за подсказку,ты умничка!!!!!!
Спасибо, календарь отличный, использую его на своей сайте!!!). Единственное, что хотелось бы спросить, вроде как в календаре текст числа месяца и месяц должен центрироваться, а у меня слевого края текст стоит, вроде по листингу тоже отформатировано по середине, может кто сталкивался с такой проблемкой, подскажет в чем причина может быть???)
подскажите пожалуйста как сделать так, чтобы можно было отмечать дни в календаре? ну например график работы с плавающим графиком, отметить те числа которые нужно.
Календарь отличный, спасибо!!!
Единственное у меня почему-то не центрируется содержимое, т.е. месяц и все числа выравниваются по левому краю, если кто сталкивался с этим, подскажите как данную проблемку решить!!!
Подскажите, как сделать что бы каждый месяц был на отдельной странице
Марина, этот скрипт такой возможности не предоставляет
Вот нашол метод как сместить ось чисел влево чтоб был первым понедельник найдите строчку
startspaces = thisday - startspaces + 1;
и исправьте значение +1 на +0
после чего переименуйте дни недель =)
Ой комментарии не до конца прочел...
ну ничего думаю все равно кому то помогу...
СПАСИБО ! очень помогло...!!!
От себя добавлю что если в строке document.write("<td><font size=2>");
Поменять значение цифры, то мы научимся управлять размером размером календаря на сайте.
так и есть, что IE8 не отображает календарь или как то можно исправить?
а как указать ему место? например в углу
Во-первых, огромное спасибо)
а во-вторых, а можно цвет месяца поменять?
Спасибо! Отличный календарь!Никаких бессмысленных наворотов - чётко, ясно, функционально!
Ваша страница вошла в каталог
|