Календарь на JavaScript
Описание: Достаточно простой календарь на JavaScript, однако, сама реализация календаря не является достаточно простой, поэтому код получился достаточно большим. А вообще, вещь достаточно полезная на сайте, поэтому копировать код и размещать его на своём сайте.
Результат:
Код javascript (вставлять между тегами <head> и </head>):
<script language = "javascript">
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) {
this[0] = m0;
this[1] = m1;
this[2] = m2;
this[3] = m3;
this[4] = m4;
this[5] = m5;
this[6] = m6;
this[7] = m7;
this[8] = m8;
this[9] = m9;
this[10] = m10;
this[11] = m11;
}
function calendar() {
var monthNames = " ЯнвФевMaрАпрMaйИюнИюлАвгСенОктНояДек";
var today = new Date();
var thisDay;
var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30,31, 30, 31);
year = today.getYear();
if (year < 2000)
year = year + 1900;
thisDay = today.getDate();
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
monthDays[1] = 29;
nDays = monthDays[today.getMonth()];
firstDay = today;
firstDay.setDate(1);
testMe = firstDay.getDate();
if (testMe == 2)
firstDay.setDate(0);
startDay = firstDay.getDay();
document.writeln("<div align = 'center'>");
document.write("<table border = '1'>");
document.write("<tr><th colspan='7'>");
document.write(monthNames.substring(today.getMonth() * 3 + 3, (today.getMonth() + 1) * 3 + 3));
document.write(". ");
document.write(year);
document.write("<tr><th>Вск <th>Пон <th>Вт <th>Ср <th>Чт <th>Пт <th>Сб" );
document.write("<tr>");
column = 0;
for (i = 0; i < startDay; i++) {
document.write("<td width='30'>");
column++;
}
for (i = 1; i <= nDays; i++) {
document.write("<td width=30>");
if (i == thisDay)
document.write("<span style = 'color: red;'>")
document.write(i);
if (i == thisDay)
document.write("</span>")
column++;
if (column == 7) {
document.write("<tr>");
column = 0;
}
}
document.write("</table>");
document.writeln("</div>");
}
</script>Код HTML (вставлять между тегами <body> и </body>):
<script language = 'javascript'>
calendar();
</script> -
Создано 04.12.2010 16:16:39
-
Михаил Русаков
Комментарии (26):
Спасибо надеюсь понадобится =).
Ответить
Спосибо большое Очень помогло для написание своего скрипта Но почему начинается с воскресения?
Ответить
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) { this[0] = m0; this[1] = m1; this[2] = m2; this[3] = m3; this[4] = m4; this[5] = m5; this[6] = m6; this[7] = m7; this[8] = m8; this[9] = m9; this[10] = m10; this[11] = m11; } Можно ещё просто Array написать
Ответить
Спасибо за скрипт. А как переставить воскресенье в конец? И как редактировать размер таблицы?
Ответить
document.write("<table border = '1'>"); - вот здесь добавьте атрибут width с нужным значением. Чтобы переставить воскресенье в конец, придётся достаточно много подправить в коде.
Ответить
ещё хотел узнать: цвет таблицы и букв цифр как изменить? заранее благодарен!
Ответить
Вместо <table border = '1'> написать <table border = '1' style = 'background-color: red; color: green;'>
Ответить
Почему календарь выходит поверх шапки? Мне бы его в табличку,под меню,а?
Ответить
Так и разместите его в нужном месте, вставьте код под меню, а не в самом верху (потому и поверх шапки).
Ответить
Вставила,всё о'кей! Большое спасибо!
Ответить
Почему-то нет рамок,месяц и год прижимаются к левому краю календаря.
Ответить
А кто мешает это добавить? Добавляйте, здесь же не курсы дизайна, а просто скрипт календаря.
Ответить
Да но наверху стоит нормальный календарь. А я в js полный дуб.
Ответить
Эта обводка зависит от браузера. JS для дизайна в данном случае знать не нужно. Достаточно знать HTML и, желательно, CSS.
Ответить
Сейчас проверил в опере,сафари,мазиле,хроме,эксплоере.Везде одинаково.
Ответить
Вы про какую обводку говорите? Если про обводку border у table, то она везде разная.
Ответить
Да у меня она вообще не встала.Где здесь можно вставить скрин что-бы показать что у меня вышло.
Ответить
Я код скопировал, поставил его, но чего то не работает, может быть там где кончается javascript не надо было скобку закрывать? У вас там было "</script"
Ответить
Скобку надо закрывать, статью подправил. Копируйте код внимательно, и тогда всё будет работать.
Ответить
ПРивет, Миша
Ответить
Привет, а как сделать календарь с выбором месяца, а не считать с сегодняшнего дня?
Ответить
Здравствуйте Михаил скажите пожалуйста, как спрятать скрипт от индексации поисковиками?
Ответить
Чтобы календарик выводился так, как принято в России надо поправить так: ... document.write("<tr> <th>Пон <th>Вт <th>Ср <th>Чт <th>Пт <th>Сб <th>Вск" ); ... потом еще добавить после startDay = firstDay.getDay(); вот это: startDay --; if (startDay < 0) startDay = 6;
Ответить
спасибо помогло :)
Ответить
я добавил скриптовый текст в отдельный файл, а функцию вызвал в документе, она ее почему-то не воспринимает
Ответить
Не много доработал скрипт. перенес воскресение в конец и добавил раскраску выходным дням. PS.не знаю на сколько работать будет корректно. До нового года не знал что такое html. function calendar() { var monthNames = "ЯнвФевMaрАпрMaйИюнИюлАвгСенОктНояДек"; var today = new Date(); var thisDay; var monthDays=[31, 28, 31, 30, 31, 30, 31, 31, 30,31, 30, 31]; year = today.getFullYear(); thisDay = today.getDate(); if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; nDays = monthDays[today.getMonth()]; firstDay = today; firstDay.setDate(1); testMe = firstDay.getDate(); if (testMe == 2) firstDay.setDate(0); startDay = (function(){ if(firstDay.getDay()==0)firstDay.getDay(7); return firstDay.getDay(); })(); // alert(startDay); document.writeln("<div align = 'center'>"); document.write("<table border = '1'>"); document.write("<tr><th colspan='7'>"); document.write(monthNames.substring(today.getMonth() * 3, (today.getMonth() + 1) * 3)); document.write(". "); document.write(year); document.write("<tr><th>Пон <th>Вт <th>Ср <th>Чт <th>Пт <th>Сб <th>Вс" ); document.write("<tr>"); column = 0; for (i = 0; i < startDay-1; i++) { document.write("<td width='30'>"); column++; } for (i = 1; i <= nDays; i++) { if ((column==5)||(column==6))document.write("<td style='background-color:#00FFFF; width:30;'>") else document.write("<td width=30 >"); if (i == thisDay) document.write("<span style = 'color: red;'>") document.write(i); if (i == thisDay) document.write("</span>"); column++; if (column == 7) { document.write("<tr>"); column = 0; } } document.write("</table>"); document.writeln("</div>"); }
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.