Posted on

カレンダーの表示サンプル

ページいっぱいにカレンダーを表示するサンプルを作成しました。
参考になればご活用ください。
わたしの環境では、bootstrap.cssや社内で整備したcssを使っているのですが、
本サンプルでは、それらcssをこのサンプル内に記述しているため、すこし長くなっていますがお許しください。
サンプルの内容
初回表示は、今日の日付を元に今月のカレンダーを表示します。前月、次月は背景をグレーに、今日は背景を黄色にしています。
年、月を選択して、確認を押下すると、その月のカレンダーを表示します。
表示している内容は、スケジュールの件数とスケジュール内容(これはサンプルなので、使用される場合は、ここに表示したい
内容を設定してください)になります。
下記サンプル「index.html」ソースです。

2015,2016=>2016,2017=>2017);
$monthArr = array(1=>1,2=>2,3=>3,4=>4,5=>5,6=>6,7=>7,8=>8,9=>9,10=>10,11=>11,12=>12);
?>

  
    
    calender
    
  
  

カレンダー表示画面 

$val) { if ($key == 0) { echo ''; } if ($key != 0 && ($key % 7) == 0) { echo ''; } $classTd = ''; if ($val['gray']) { $classTd = 'class="bg-gray"'; } if ($val['today']) { $classTd = 'class="today"'; } ?> ' ?>
>
' . h("件数:{$cnt}") . ''; } ?>
$cadataVal) { echo '
' . h($cadataVal['schedule']) . '
'; $i++; // 4件まで if ($i >= 4) { break; } } ?>
データがありません。'; } ?>