Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Javascript » Календарь для сайта с помощью JavaScript

Календарь для сайта с помощью JavaScript

В преддверии очередного празднования Нового года, как не вспомнить о календарях. Вот и я решил поделиться с вами, простеньким методом вывода календаря на страницы ваших сайтов с помощью .
Этот небольшой скрипт, показывает на текущий месяц и выделяет цветом актуальную дату. Внешний вид календаря (все элементы таблицы) настраивается непосредственно в js.
 
Javascript - Календарь для сайта
 

Обновление от 17.10.2014г! С какого то перепуга, решил вернуться к этой теме и забабахал обновленную версию календаря, так что по ссылке на демо-страницу, вы увидите именно новый вариант 🙂

Можно не особо себя утруждая и не вдаваясь в тонкости работы скрипта, просто скопировать код из архива и вставить в 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>

Как видим, код не слишком заковыристый и минимальные настройки будут под силу каждому.
 

Обновление от 17.10.2014г! Выложил обновленную версию календаря, так что по ссылке на скачивание, доступен именно новый вариант 🙂
Скачать

На этом пожалуй пока всё, как все нормальные люди спешу встретить Новый год.
Всех жителей планеты «Интернет» с праздником и до встречи в новом году.

С Уважением, Андрей .

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

5 комментариев
  1. Ирина:

    Здравствуйте, скажите, а как можно добавить в этот календарь события на определенные дни с переходом по ссылке?

    Например, 5 июня — добавлено событие — пользователь кликает и идет по ссылке.

    Спасибо.

    Ответить
  2. Илья:

    Как сделать так что бы я мог подставлять свою дату, или промежуток дат?

    Ответить
    • driver:

      Извините, но в данном случае никак, это простейший календарь с обозначением текущей даты, ничего более)))

      Ответить
  3. Дмитрий:

    Возможно ли под данный календарь написать свой css стиль? Подогнать его под общий дизайн сайта?

    Ответить
    • driver:

      Конечно возможно, можете вынести в свой css, а можете непосредственно в скрипте изменить толщину бордюра, цвет текста, фон, общие размеры таблицы, в примере кода в статье показано и подписано где что меняется, например хотите сделать календарь шире и выше, добавляете width=300 и height=350 для table и т.д.

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru