Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Главная

Рассылка

Магазин

О нас

Видео Курсы

Секрет

Услуги
Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 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-ролик на страницы сайта.

Поддержание чистоты и порядка на Вашем компьютере.

Какими программами пользоваться для создания сайтов и для работы в Интернете?

Как найти человека в Интернете. Очередной Лохатрон? Или хороший сервис?

Анимированные картинки Цветы. Украсьте свой сайт, блог, форум.

 

Просмотров: 64927


Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): владимир
Дата: 2010-05-25

Полезный урок.

Комментарии добавил(а): Юрй
Дата: 2010-05-25

Скрипт работает, но не удалось настроить ширину таблицы календаря, она не подчиняется свойству ширины таблицы: пишу в скрипте - document.write("<table width = 200 border=1 bgcolor=#F6F6F6 bordercolor=#6699CC>"); ни чего не происходит.

Комментарии добавил(а): Ольга
Дата: 2010-05-26

При уменьшении шрифта, ширина таблицы умешьшается автоматически и следовательно уменьшпется ширина всего календаря

Комментарии добавил(а): Галина
Дата: 2010-06-14

Спасибо. Действительно, полезный урок.

Комментарии добавил(а): Юлия
Дата: 2010-07-22

Как переместить календарь в нижний правый угол сайта

Комментарии добавил(а): АндрейК
Дата: 2010-07-22

Разместите код календаря в правом нижнем углу сайта или любом другом, и календарь будет отображатьс там где надо

Комментарии добавил(а): Оксана
Дата: 2010-11-21

Спасибо большое. Всё работает замечательно.

Комментарии добавил(а): Tema57RUS
Дата: 2010-12-18

Скрипт работает, но не удалось настроить ширину таблицы календаря, она не подчиняется свойству ширины таблицы: пишу в скрипте - document.write("<table width = 200 border=1 bgcolor=#F6F6F6 bordercolor=#6699CC>"); ни чего не происходит. обязательно нужно указать не только длинну но и ширину, а вы указали только один параметр

Комментарии добавил(а): Миха
Дата: 2010-12-27

показывает дату компьютера реальную!

Комментарии добавил(а): Светлана
Дата: 2011-01-14

Все работает, без проблем! Спасибо за реальный скрипт, пробовала многие ваш лучший.

Комментарии добавил(а): Алексей
Дата: 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>"); То меняются только вторая строчка (дни недели, а в самом календаре воскресная строчка не переноситься. Т.е. получается вверху пишет что Пн, а внизу под ним воскресные дни, как исправить?

Комментарии добавил(а): Юля
Дата: 2011-02-04

Вот тут тоже прикольные календарики http://fretka

Комментарии добавил(а): Александр
Дата: 2011-03-20

Тоже хотелось бы что бы первым днём был понедельник!

Комментарии добавил(а): Irina
Дата: 2011-04-25

А нельзя ли с ПН неделю начать?? Подскажите как.

Комментарии добавил(а): Виктор
Дата: 2011-06-16

Глупый календарь, начало недели с понедельника, бред!

Комментарии добавил(а): Михаил
Дата: 2011-06-16

Что? Бред? Ааа.... Виктор, тоесть по вашему неделя начинается с четверга?! :)

Комментарии добавил(а): Михаил
Дата: 2011-06-16

Что? Бред? Ааа.... Виктор, тоесть по вашему неделя начинается с четверга?! :)

Комментарии добавил(а): аленка
Дата: 2011-07-20

его?????????????

Комментарии добавил(а): freak
Дата: 2011-08-20

Комментарии добавил(а): Алексей Дата: 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;

Комментарии добавил(а): Максим
Дата: 2011-08-21

теперь 1-ое число месяца не показывает

Комментарии добавил(а): Лис
Дата: 2011-08-30

Чтобы неделя начиналась с понедельника необходимо строчку startspaces = thisday - startspaces + 1; заменить на startspaces = thisday - startspaces; ну а далее переносите строчку с воскресеньем в конец недели и все

Комментарии добавил(а): Гость
Дата: 2011-08-30

Спасибо Автору за листинг календаря. Лис, огромное спасибо за подсказку,ты умничка!!!!!!

Комментарии добавил(а): Гостья
Дата: 2011-09-16

И от меня тоже спасибо!

Комментарии добавил(а): Наталья
Дата: 2011-12-06

Спасибо, календарь отличный, использую его на своей сайте!!!). Единственное, что хотелось бы спросить, вроде как в календаре текст числа месяца и месяц должен центрироваться, а у меня слевого края текст стоит, вроде по листингу тоже отформатировано по середине, может кто сталкивался с такой проблемкой, подскажет в чем причина может быть???)

Комментарии добавил(а): Юрий
Дата: 2011-11-22

подскажите пожалуйста как сделать так, чтобы можно было отмечать дни в календаре? ну например график работы с плавающим графиком, отметить те числа которые нужно.

Комментарии добавил(а): Наталья
Дата: 2011-12-05

Календарь отличный, спасибо!!! Единственное у меня почему-то не центрируется содержимое, т.е. месяц и все числа выравниваются по левому краю, если кто сталкивался с этим, подскажите как данную проблемку решить!!!

Комментарии добавил(а): Марина
Дата: 2011-11-30

Подскажите, как сделать что бы каждый месяц был на отдельной странице

Комментарии добавил(а): АндрейК
Дата: 2011-11-30

Марина, этот скрипт такой возможности не предоставляет

Комментарии добавил(а): Kavrasky
Дата: 2011-12-13

Вот нашол метод как сместить ось чисел влево чтоб был первым понедельник найдите строчку startspaces = thisday - startspaces + 1; и исправьте значение +1 на +0 после чего переименуйте дни недель =)

Комментарии добавил(а): Kavrasky
Дата: 2011-12-13

Ой комментарии не до конца прочел... ну ничего думаю все равно кому то помогу...

Комментарии добавил(а): Андрей
Дата: 2011-12-27

СПАСИБО ! очень помогло...!!!

Комментарии добавил(а): Серж
Дата: 2012-02-18

От себя добавлю что если в строке document.write("<td><font size=2>"); Поменять значение цифры, то мы научимся управлять размером размером календаря на сайте.

Комментарии добавил(а): артем
Дата: 2012-02-27

спасибо

Комментарии добавил(а): Стас
Дата: 2012-07-11

так и есть, что IE8 не отображает календарь или как то можно исправить?

Комментарии добавил(а): дима
Дата: 2012-10-09

а как указать ему место? например в углу

Комментарии добавил(а): MDA327
Дата: 2012-10-09

Спасибо!))

Комментарии добавил(а): Виктория
Дата: 2013-08-13

Во-первых, огромное спасибо) а во-вторых, а можно цвет месяца поменять?

Комментарии добавил(а): Виктор
Дата: 2015-06-22

Спасибо!

Комментарии добавил(а): Евгений
Дата: 2017-04-30

Спасибо! Отличный календарь!Никаких бессмысленных наворотов - чётко, ясно, функционально!

Комментарии добавил(а): Harutyun
Дата: 2017-12-19

Ваша страница вошла в каталог

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Сопровождение организаций по Охране труда
(очное или дистанционное).

Новости сайта

12.05.2015
Новая услуга! Изготовление графических элементов. Заказать: иллюстрации для книг, коллажи, подарочные и поздравительные открытки, 3D обложки, фантастические и сюрреалистические работы, зарисовки, баннеры и еще много, многое другое, быстро и дешево.

05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"

Реклама в Почтовых Рассылках.



Домены

Сервис мгновенной регистрации Доменов

Google Adsense

Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Заработай в Интернете
и осуществи свою МЕЧТУ
"Как?"
Узнать сейчас >>>

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Последние заметки

Статистический отчет Форма № 7-травматизм "Сведения о травматизме на производстве и профессиональных заболеваниях"

Какие отчеты необходимо сдать Специалисту по охране труда за год

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

Март

Февраль

2015 год:

Декабрь

Август

Июль

Июнь

Май

Февраль

Январь

2014 год:

Октябрь

Сентябрь

Август

2013 год:

Июль

Май

Апрель

Февраль

2012 год:

Октябрь

Сентябрь

Август

Июль

Июнь

Май

Апрель

Март

Февраль

Январь

2011 год:

Декабрь

Ноябрь

Октябрь

Сентябрь

Август

Июль

Июнь

Май

Апрель

Март

Февраль

Январь

2010 год:

Декабрь

Ноябрь

Октябрь

Сентябрь

Август

Июль

Июнь

Май

Апрель

Март

Февраль

Январь

2009 год:

Декабрь

Ноябрь

Октябрь

Сентябрь

Август

Июль

Июнь

Май

Апрель

Март

Февраль

Январь

2008 год:

Декабрь

Ноябрь

Сайты друзей

Регистрация доменов

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT

 
Принимаем Z-PAYMENT
Rambler's Top100 www.megastock.ru Яндекс цитирования

HTML | CSS | Статьи | Инструменты | Шаблоны | Книги | Украшения | Сайт | Заработок | Обман
PHP | Услуги | Скрипты | Рассылка | SEO | jQuery | СОУТ | Online | Секрет| Написать Автору

Разрешается полное или частичное копирование материалов сайта с обязательным
указанием ссылки на автора материала и источник - www.LuksWeb.ru

Copyright Андрей Краснокутский © 2008 - 2019