Календарь событий PHP + Javascript / Хабр

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

Задача вроде бы не сложная, но среди немногочисленных решений в интернете я не нашел подходящего по следующим причинам: слишком сложный и непонятный код, медленные запросы к БД (это особенно ощущается, если в базе много записей), использование библиотеки jQuery, к которой я отношусь не очень хорошо.

Итак, к плюсам моего календаря можно отнесли следующее:

Весь код помещается в 200 строчек и состоит из одного файла, который подключается через include
Скрипт состоит из чистого php + javascript без использования библиотеки jQuery
Используются простые и оптимизированные запросы к БД
Подгрузка следующего (предыдущего) месяца происходит через AJAX

Теперь обо всем по-порядку.

Логика

Календарь генерируется средствами php для текущего месяца. Для каждого дня проверяем нет ли записей в БД, если есть, — формируем ссылку на событие. Дописываем javascript код для перелистывание месяцев, который обращается к скрипту через ajax. Задача усложняется тем, что события растянуты во времени, то есть, начинаются в один день, а заканчиваются через несколько дней или даже месяцев. На всем временном промежутке существование события нужно его подсветить ссылкой для каждого дня.

Генерируем календарь на PHP

<?php
//Проверяем, пришел ли запрос на конкретную дату. Если нет, берем текущую дату.
if (isset($_REQUEST['date']))
{	
	//Проверяем, не пришло ли чего лишнего...
	$pattern = "/^([0-9]{4})-([0-9]{2})-([0-9]{2})$/";
	if (preg_match($pattern, $_REQUEST['date'])) {
		$date = $_REQUEST['date'];
	} else {
		die('Неправильный параметр');
	}
}
else
{
	$date=date("Y-m-d");
}
$sd = explode("-", $date);
	$year 	= $sd[0];
	$month = $sd[1];
	$day 	= $sd[2];

// Вычисляем число дней в текущем месяце
$dayofmonth = date('t',
                      mktime(0, 0, 0, $month, 1, $year));
//Готовим запрос к БД
$todate = "$year-$month-$dayofmonth";
$fromdate = "$year-$month-01";
$query = "SELECT date,enddate from sobytia WHERE startdate<='$todate' AND enddate>=$fromdate";
$res_db = $db->sql($query);

Таким образом, мы выбрали все записи, которые есть в текущем месяце.

Дальше самое интересное: заполняем обходочный массив. Для того, чтобы не крутить лишний раз все заново, если находится соответствие, элемент массива удаляется и следующий цикл имеет меньше итераций.

$d = array();$k=array();
for($i = 1; $i<=$dayofmonth; $i++){
	$k[$i] = $i;
}
$i=0;
while ($a = mysqli_fetch_row($res_db))
{
	//for($i = 1; $i<=$dayofmonth; $i++){
	foreach ($k	as $i)
	{	//Добавление 0 к дате
		if($i<10) $cd = "$year-$month-0".$i; else $cd = "$year-$month-$i";
		if ($cd >= $a[0] && $cd <= $a[1])
		{
			$d[$i] = $cd;
			unset($k[$i]);
		}
	}
}

Собственно, сам календарь:

// Счётчик для дней месяца
  $day_count = 1;

  // 1. Первая неделя
  $num = 0;
  for($i = 0; $i < 7; $i++)
  {
    // Вычисляем номер дня недели для числа
    $dayofweek = date('w',
                      mktime(0, 0, 0, $month, $day_count, $year));
    // Приводим к числа к формату 1 - понедельник, ..., 6 - суббота
    $dayofweek = $dayofweek - 1;
    if($dayofweek == -1) $dayofweek = 6;

    if($dayofweek == $i)
    {
      // Если дни недели совпадают,
      // заполняем массив $week
      // числами месяца
      $week[$num][$i] = $day_count;
      $day_count++;
    }
    else
    {
      $week[$num][$i] = "";
    }
  }

  // 2. Последующие недели месяца
  while(true)
  {
    $num++;
    for($i = 0; $i < 7; $i++)
    {
      $week[$num][$i] = $day_count;
      $day_count++;
      // Если достигли конца месяца - выходим
      // из цикла
      if($day_count > $dayofmonth) break;
    }
    // Если достигли конца месяца - выходим
    // из цикла
    if($day_count > $dayofmonth) break;
  }

  // 3. Выводим содержимое массива $week
  // в виде календаря
  // Выводим таблицу
  echo '<table id="calendar">';
  //заголовок
  $rusdays = array('ПН','ВТ','СР','ЧТ','ПТ','СБ','ВС');
  $rusmonth = array('Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь');
  echo '<thead>
			<tr>
				<td onclick="monthf(\'prev\');"><</td>
				<td colspan="5">'.$rusmonth[$month-1].', '.$year.'</td>
				<td onclick="monthf(\'next\');">></td>
			</tr>';
  echo '<tr>';
  foreach ($rusdays as $rusday){
	echo '<td>'.$rusday.'</td>';
  }
  echo '</tr>';
  echo '</thead>';
  //тело календаря
  for($i = 0; $i < count($week); $i++)
  {
    echo "<tr>";
    for($j = 0; $j < 7; $j++)
    {
      if(!empty($week[$i][$j]))
      {
		
		// Если имеем дело с выбраной датой подсвечиваем ee
		if($week[$i][$j]==$day)
		{
			echo '<td class="today">';
		}
		else
		{
			echo '<td>';
		}
		
		// Если запись в базе за текущую дату есть, делаем ссылку
        if($d[$week[$i][$j]])
		{
			echo '<a href="/afisha/'.$d[$week[$i][$j]].'/">'.$week[$i][$j].'</a>';
		}
		else
		{
			echo $week[$i][$j];
		}
		
        echo '</td>';
      }
      else echo "<td> </td>";
    }
    echo "</tr>";
  }
?>

Javascript код для перематывание месяцев

Он немного упрощен для наглядности (отсутствуют эффекты скольжения):

<script>
	var mon = parseInt("<?php echo $month; ?>");
	var year = parseInt(<?php echo $year; ?>);
	function monthf(pn){
		if (pn == 'next'){
			mon++;
		}else if (pn == 'prev'){
			mon--;
		}else{
			alert('Неправильный параметр');
			return false;
		}
		if (mon > 12){
			year ++;
			mon = 1;
		}
		if (mon < 1){
			year --;
			mon = 12;
		}
		if ((mon < 10) && (mon >= 1)){
			mon = '0'+mon;
		}
		var nextDate = year+'-'+mon+'-00';
		
		var ajaxaddr = "путь_к_текущему_скрипту?date='+nextDate;
		var http = new XMLHttpRequest();
		if (http) {
			http.open('get', ajaxaddr);  
			http.onreadystatechange = function () {
				if(http.readyState == 4){
					if (http.status == 200) {
						document.getElementById('calendar').innerHTML = http.responseText;
					}
				}
			}  
			http.send(null);
		}
	}
</script>

Закрываем тег таблицы:

<?php
echo "</table>";
?>

Выводы

Таким образом получился простой и легко встраиваемый календарь событий, который быстро работает и легко настраивается, работающий на чистом PHP+javascript без дополнительных библиотек.

Календарь событий PHP + Javascript

Логика

Генерируем календарь на PHP

Javascript код для перематывание месяцев

Выводы

Литература

Публикации