Создаем JavaScript календарь

Предлагаю вашему вниманию простой календарь Javascript, с автоматическим обновлением текущего месяца, и выделением текущей даты. Скрипт нужно помещать между тэгами <script type="text/javascript">...</script> в элемент body HTML-документа.

Создаем функцию и переменные для обработки дат:


function calendar() {
	var d = new Date(); // определяем текущую дату
	var year = d.getFullYear(); // вычисляем текущий год
	var month = d.getUTCMonth(); // вычисляем текущий месяц
	var today = d.getDate(); // вычисляем текущее число
	var first_day = new Date(year,month,1); // устанавливаем дату первого числа текущего месяца
	var first_wday = first_day.getDay(); // из нее вычисляем день недели первого числа текущего месяца
	var oneHour = 1000 * 60 * 60; // вычисляем количество миллисекунд в 1 часе
	var oneDay = oneHour * 24; // вычисляем количество миллисекунд в одних сутках
	var nextMonth = new Date(year, month + 1, 1); // устанавливаем дату первого числа следующего месяца 
	var last_date = Math.ceil((nextMonth.getTime() - first_day.getTime() - oneHour)/oneDay);// вычисляем крайний день текущего месяца
	var n = new Array ("Январь","Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь");

Создаем переменные для работы с "телом" календаря:

В данном случае под "телом" подразумевается таблица, для отображения календаря. Чтобы ее создать в HTML-документе находим элемент тэга body, создаем в нем новый элемент table и добавляем его в HTML-документ.

 
	var body = document.getElementsByTagName("body")[0];
	var day_table = document.createElement("table");
	day_table.id = "Calendar";
	body.appendChild(day_table);  

Оформляем внешний вид таблицы:


	day_table.style.borderStyle = "dotted"; // Стиль внешней рамки таблицы
	day_table.style.fontFamily = "sans-serif"; // стиль основного кода таблицы
	day_table.bgColor = "antiquewhite"; // фоновый цвет таблицы

К созданной таблице day_table добавляем ячейки и столбцы:

 
	day_table.innerHTML = "<tr><td colspan=7 rowspan=1 id='month'>"+n[month]+"</td></tr>"+
	"<tr id='weekday'><td>пн</td><td>вт</td><td>ср</td><td>чт</td><td>пт</td><td>сб</td><td>вс</td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";

Заполняем таблицу:

Находим заголовок таблицы (первую ячейку) и заносим туда название текущего месяца:

 
	for (i=1;i<last_date;i++) {
		var td_d = document.getElementsByTagName("td");
		if (i == first_wday) {
			td_d[0].innerHTML = n[month];
			td_d[0].bgColor = "ffcccc"; // цвет фона ячейки
			td_d[0].align = "center"; // расположение текста в ячейке
			td_d[0].style.fontFamily="arial black"; // используемый шрифт в ячейке
			td_d[7+i].innerHTML = 1;

Заполняем оставшиеся ячейки таблицы и выделяем цветом сегодняшний день:

 	    
			for (j=0;j<last_date;j++)
				td_d[7+i+j].innerHTML=1+j;
        
			for (c=8;c<43;c++)
				if (td_d[c].innerHTML==0) {
					td_d[c].visibility="hidden"; // не показывать ячейку, если она пустая
				} else td_d[c].bgColor="white"; // непустые ячейки окрасить белым цветом
                        
			for (z=0;z<last_date;z++)
				if (td_d[z].innerHTML==today) {
					td_d[z].bgColor="salmon";// сегодняшнюю дату выделить красным цветом
				}
		}
	}
}
calendar();

Внешний вид таблицы можно менять в скрипте, или с помощью CSS используя уникальный ID таблицы ("Calendar"). Но смена цвета непустых ячеек происходит только в скрипте, по мере их заполнения. Следовательно, смену цвета ячеек делаем только в скрипте.

Весь скрипт целиком:


function calendar() {
	var d = new Date();
	var year = d.getFullYear();
	var month = d.getUTCMonth();
	var today = d.getDate();
	var first_day = new Date(year,month,1);
	var first_wday = first_day.getDay();
	var oneHour = 1000 * 60 * 60; // милисекунды * минуты * часы
	var oneDay = oneHour * 24; // сутки
	var nextMonth = new Date(year, month + 1, 1);
	var last_date = Math.ceil((nextMonth.getTime() - first_day.getTime() - oneHour)/oneDay);
	var n = new Array ("Январь","Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь");
	var body = document.getElementsByTagName("body")[0];
	var day_table = document.createElement("table");
	day_table.id = "Calendar";
	day_table.style.borderStyle = "dotted";
	day_table.style.fontFamily = "sans-serif";
	day_table.bgColor = "antiquewhite";
	body.appendChild(day_table);
  
	day_table.innerHTML = "<tr><td colspan=7 rowspan=1 id='month'>"+n[month]+"</td></tr>"+
	"<tr id='weekday'><td>пн</td><td>вт</td><td>ср</td><td>чт</td><td>пт</td><td>сб</td><td>вс</td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"+
	"<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
  
	for (i=1;i < last_date;i++) {
		var td_d = document.getElementsByTagName("td");
		if (i == first_wday) {
			td_d[0].innerHTML = n[month];
			td_d[0].bgColor = "ffcccc";
			td_d[0].align = "center";
			td_d[0].style.fontFamily = "arial black";
			td_d[7+i].innerHTML=1;
          			  
			for (j=0;j<last_date;j++)
				td_d[7+i+j].innerHTML = 1+j;
        
			for (c=8;c<43;c++)
				if (td_d[c].innerHTML==0) {
					td_d[c].visibility = "hidden";
				} else td_d[c].bgColor = "white";
                        
			for (z=0;z<last_date;z++)
				if (td_d[z].innerHTML == today) {
					td_d[z].bgColor = "salmon";
				}
		}
	}
}
calendar();

Результат работы скрипта.
Результат работы скрипта.

Комментарии

captcha
 12 января Ответить

Объясните пожалуйста как работает эта строчка:

var last_date = Math.ceil((nextMonth.getTime() - first_day.getTime() - oneHour)/oneDay);
,  4 дек. 2012 Ответить

Тут вычисляется последний день месяца (текущего): от количества миллисекунд, оставшегося до начала след. месяца отнимаем количество миллисекунд первого дня текущего месяца минус один час (тоже в миллисекундах) затем все делится на количество на день (количество миллисекунд) и округляется до наименьшего целого. Вопросы также можете присылать на freeden_codomaza@mail.ru

 30 нояб. 2012 Ответить

А как сделать календарь с выбором месяца?

 2 дек. 2012 Ответить

У меня почему-то сегодняшняя дата не перекрашивается в другой цвет. Что может быть?

,  12 января Ответить

Новая версия календаря (цвета теже, но исправлены некоторые ошибки):

(function calendar() {
var d = new Date();
var year = d.getFullYear();
var month = d.getUTCMonth();
var today = d.getDate();
var first_day = new Date(year,month,1);
var first_wday = first_day.getDay();
var oneHour = 1000 * 60 * 60;//милисекунды*минуты*часы
var oneDay = oneHour * 24;//сутки
var nextMonth = new Date(year, month + 1, 1);
var last_day = Math.ceil((nextMonth.getTime() - first_day.getTime() - oneHour)/oneDay);
var month_array = new Array ("Январь","Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь","Ноябрь", "Декабрь");
var body = document.getElementsByTagName("body")[0];
var day_table = document.createElement("table");

day_table.style.borderStyle = "dotted";
day_table.style.fontFamily = "sans-serif";
day_table.bgColor = "antiquewhite";
body.appendChild(day_table);
  
  day_table.innerHTML = "<tr><td colspan=7 rowspan=1 id='month'>"+month_array[month]+"</td></tr>"+
  "<tr id='weekday' bgcolor='ccccff'><td>пн</td><td>вт</td><td>ср</td><td>чт</td><td>пт</td><td>сб</td><td>вс</td></tr>";
  	for (var k = 0; k < 6; k++) {
	  day_table.innerHTML+="<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
	  }
	  
for (i=1;i<last_day;i++) {
	var td_d = document.getElementsByTagName("td");
		  if (i == first_wday) {
		  td_d[0].innerHTML = month_array[month];
	      td_d[0].bgColor = "ffcccc";
		  td_d[0].align = "center";
		  td_d[0].style.fontFamily = "arial black";
	      td_d[7+i].innerHTML = 1;
		  
			  
	    for (j = 0;j<last_day;j++)
	    td_d[7+i+j].innerHTML = 1+j;
		
	  	for (c = 8; c<50;c++)
		if (td_d[c].innerHTML==0) {
		td_d[c].visibility="hidden";
		} else td_d[c].bgColor="white";
						
		for (z=0;z<last_day;z++)
		  if (td_d[z].innerHTML==today) {
		  td_d[z].bgColor="salmon";
		    }
	  }
	  }
	})();
 7 дек. 2012 Ответить

Подскажите, почему не выделяет красным текущий день и вместо месяца пишет undefined?

,  17 дек. 2012 Ответить

Попробуйте установить вторую версию скрипта, если проблема появиться снова, эл.адрес "техподдержки" freeden_codomaza@mail.ru

 1 окт. 2014 Ответить

Доброго времени суток. Спасибо автору, статья хороша. Но есть нюансы:
Метод getDay возвращает день недели (значение от 0 до 6) заданной даты по местному времени.
Обратите внимание: воскресенье - 0, суббота - 6 и так далее. Если месяц начинается с воскресенья, (как июнь 2014) скрипт не работает. И в конце месяца текщий день не "красится", в том цикле итераций маловато. Поправьте если можно. Благодарю.

 12 января Ответить
for (z=0;z<last_date;z++) if (td_d[z].innerHTML == today) { td_d[z].bgColor = "salmon"; }

Тут есть ошибка, нужно добавть 7 + z чтоб все заработало.