Главная JavaScript Календарь-2 для сайта

Календарь-2 для сайта на JavaScript

Еще одиин простой календарь для сайта на CSS и JavaScript.
Этот Пример 2 отличается от календаря Пример 1 тем, что в нем прорисованы ячейки таблицы. Цвет ячеек можно менять, под цвета своего сайта.

2

Вид календаря на странеце сайта

Ниже приведен готовый код календаря, который можно скопировать и вставить в свой документ на HTML.

Весь код разбит на 3 части, поэтому его можно разместить на сайте тремя вариантами:

  1. Разместить все три части на одной странице.
  2. Разместить часть 1 (стиль календаря) в отдельном файле.css.
  3. Разместить часть 3 (скрипт календаря) в отдельном файле.js и подключить к странице сайта.

1. Стиль календаря

<style>
/* Таблица календаря  */
.calendar {
  border: 1px solid #909090;
  border-collapse: collapse;
  font-family: Arial;
  font-size: 11px;
}
/* Заголовок */
.calendar th {
  text-align: center;
  width: 26px;
  height: 20px;
  background: #e2f2fc;
  color: #000000;
  border: 1px solid #909090;   
}
/* Заголовок праздника */
.calendar th.holiday {
  color: #FF0000;
}
/* Ячейка дня */
.calendar td {
  text-align: right;
  width: 20px;
  height: 20px;
  padding-right: 4px;
  border: 1px solid #909090;
  text-align: right;
  cursor: pointer;  font-size: 12px;
}
/* Затемненный день */
.calendar td.grayed {
  background: #F0F0F0;
  cursor: auto;
}
/* Выбранный день */
.calendar td.selected {
  background: #038fcf;
  color: #FFFFFF;
  box-shadow: 1px 1px rgba(255, 255, 255, 0.5) inset;
}
/* Праздничный день */
.calendar td.holiday {
  color: #FF0000;
}
/* Кнопки навигации */
.calendar td.navigation {
  text-align: center;
  border: 0px none;
  font-size: 16px;
  background: #ecebeb;
  cursor: pointer;
  white-space: nowrap;        
}
</style>

2. Код календаря на страние сайта.html

<div align=center>
  <div style="height:170px;"><div id="calendar_table"></div></div>
  Вид календаря
</div>

3. Скрипт календаря

<script>
calendar = {};

// Названия месяцев
calendar.monthName=[
  'Январь', 'Февраль', 'Март', 'Апрель',
  'Май', 'Июнь', 'Июль', 'Август',
  'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
];

// Названия дней недели
calendar.dayName=[
  'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'
];

// Выбранная дата
calendar.selectedDate = {
  'Day' : null,
  'Month' : null,
  'Year' : null
};

// ID элемента для размещения календарика
calendar.element_id=null;

// Выбор даты
calendar.selectDate = function(day,month,year) {
  calendar.selectedDate={
    'Day' : day,
    'Month' : month,
    'Year' : year
  };
  calendar.drawCalendar(month,year);
}

// Отрисовка календарика на выбранный месяц и год
calendar.drawCalendar = function(month,year) {
  var tmp='';
  tmp+='<table class="calendar" cellspacing="0" cellpadding="0">';

  // Месяц и навигация
  tmp+='<tr>';
  tmp+='<td class="navigation" '+
       'onclick="calendar.drawCalendar('+(month>1?(month-1):12)+
       ','+(month>1?year:(year-1))+');">&#9668;<\/td>';
  tmp+='<td colspan="5" class="navigation" '+
       'onclick="calendar.drawCalendar('+
       calendar.selectedDate.Month+','+
       calendar.selectedDate.Year+');">'+
       calendar.monthName[(month-1)]+' - '+year+'<\/td>';
  tmp+='<td class="navigation" '+
       'onclick="calendar.drawCalendar('+(month<12?(month+1):1)+
       ','+(month<12?year:(year+1))+');">&#9658;<\/td>';
  tmp+='<\/tr>';

  // Шапка таблицы с днями недели
  tmp+='<tr>';
  tmp+='<th>'+calendar.dayName[0]+'<\/th>';
  tmp+='<th>'+calendar.dayName[1]+'<\/th>';
  tmp+='<th>'+calendar.dayName[2]+'<\/th>';
  tmp+='<th>'+calendar.dayName[3]+'<\/th>';
  tmp+='<th>'+calendar.dayName[4]+'<\/th>';
  tmp+='<th class="holiday">'+calendar.dayName[5]+'<\/th>';
  tmp+='<th class="holiday">'+calendar.dayName[6]+'<\/th>';
  tmp+='<\/tr>';

  // Количество дней в месяце
  var total_days = 32 - new Date(year, (month-1), 32).getDate();
  // Начальный день месяца
  var start_day = new Date(year, (month-1), 1).getDay();
  if (start_day==0) { start_day=7; }
  start_day--;
  // Количество ячеек в таблице
  var final_index=Math.ceil((total_days+start_day)/7)*7;

  var day=1;
  var index=0;
  do {
    // Начало строки таблицы
    if (index%7==0) {
      tmp+='<tr>';
    }
    // Пустые ячейки до начала месяца или после окончания
    if ((index<start_day) || (index>=(total_days+start_day))) {
      tmp+='<td class="grayed"> <\/td>';
    }
    else {
      var class_name='';
      // Выбранный день
      if (calendar.selectedDate.Day==day &&
          calendar.selectedDate.Month==month &&
          calendar.selectedDate.Year==year) {
        class_name='selected';
      }
      // Праздничный день
      else if (index%7==6 || index%7==5) {
        class_name='holiday';
      }
      // Ячейка с датой
      tmp+='<td class="'+class_name+'" '+
           'onclick="calendar.selectDate('+
           day+','+month+','+year+');">'+day+'<\/td>';
      day++;
    }
    // Конец строки таблицы
    if (index%7==6) {
      tmp+='<\/tr>';
    }
    index++;
  }
  while (index<final_index);

  tmp+='<\/table>';

  // Вставить таблицу календарика на страницу
  var el=document.getElementById(calendar.element_id);
  if (el) {
    el.innerHTML=tmp;
  }
}

// ID элемента для размещения календарика
calendar.element_id = 'calendar_table';

// По умолчанию используется текущая дата
calendar.selectedDate={
  'Day' : new Date().getDate(),
  'Month' : parseInt(new Date().getMonth())+1,
  'Year' : new Date().getFullYear()
};

// Нарисовать календарик
calendar.drawCalendar(
  calendar.selectedDate.Month,
  calendar.selectedDate.Year
);
</script>