晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

シンプルなHTMLカレンダー。Google Calendar API v3で祝日表示。PHPコードサンプル。

先日作成したスマホ&PC用検索ポータル「2nd Sch」にカレンダー表示のため、シンプルなHTMLカレンダーを作成。

祝日表示に「Google Calendar API v3」を使用。ただ、祝日は当年の前後合わせて3年分しか取得できないようだ。

ミニカレンダーでは、祝日の日付の上をマウスオーバー(hover)すると祝日名が表示される。

≪ミニカレンダー:今月から1年分≫

https://ok2nd.sakura.ne.jp/index/sch/calendar/

≪ミニカレンダー:今年1月から1年分≫

https://ok2nd.sakura.ne.jp/index/sch/calendar/?m=1

≪ミニカレンダー:2019年1月から1年分≫

https://ok2nd.sakura.ne.jp/index/sch/calendar/?y=2019

≪カレンダー:今月≫

https://ok2nd.sakura.ne.jp/index/sch/calendar/month.php

f:id:art2nd:20180713143522j:plain

f:id:art2nd:20180713143928j:plain

// PHPコードサンプル

<?php
function my_calendar($year, $month, $num) {	// $num: 月数
	$holidays = get_holidays($year);
	for ($i = 1; $i <= $num; $i++) {
		calendar($year, $month, $holidays);
		if ($month++ >= 12) {
			$year++;
			$month = 1;
		}
	}
}
function calendar($year, $month, $holidays) {
	$last_day = date('j', mktime(0, 0, 0, $month + 1, 0, $year));
	$calendar = array();
	$j = 0;
	for ($i = 1; $i < $last_day + 1; $i++) {
		$week = date('w', mktime(0, 0, 0, $month, $i, $year));
		if ($i == 1) {
			for ($s = 1; $s <= $week; $s++) {
				$calendar[$j]['day'] = '';
				$j++;
			}
		}
		$calendar[$j]['day'] = $i;
		$j++;
		if ($i == $last_day) {
			for ($e = 1; $e <= 6 - $week; $e++) {
				$calendar[$j]['day'] = '';
				$j++;
			}
		}
	}
	if ($month == 12) {
		$next_year = $year + 1;
		$next_month = 1;
	} else {
		$next_year = $year;
		$next_month = $month + 1;
	}
	if ($month == 1) {
		$prev_year = $year - 1;
		$prev_month = 12;
	} else {
		$prev_year = $year;
		$prev_month = $month - 1;
	}
?>
<table class="calendar">
<caption><a class="prevnext" href="?y=<?= $prev_year ?>&m=<?= $prev_month ?>"><<</a><span class="title"><?= $year ?>年 <?= $month ?>月</span><a class="prevnext" href="?y=<?= $next_year ?>&m=<?= $next_month ?>">>></a></caption>
	<tr>
		<th class="sunday">日</th>
		<th class="weekday">月</th>
		<th class="weekday">火</th>
		<th class="weekday">水</th>
		<th class="weekday">木</th>
		<th class="weekday">金</th>
		<th class="saturday">土</th>
	</tr>
	<tr>
<?php
	$cnt = 0;
	foreach ($calendar as $key => $value) {
		$ymd = $year.'-'.$month.'-'.$value['day'];
		if (isset($holidays[$ymd])) {
			$holiday_class = ' holiday';
			$holidays_name = '<p class="holidays_name">'.$holidays[$ymd].'</p>';
		} else {
			$holiday_class = '';
			$holidays_name = '';
		}
?>
		<td class="<?= ($cnt == 0) ? 'sunday' : '' ?><?= ($cnt == 6) ? 'saturday' : '' ?><?= $holiday_class ?><?= ((date('Y') == $year) && (date('m') == $month) && (date('d') == $value['day'])) ? ' today' : '' ?>"><?php $cnt++; ?><span><?= $value['day'] ?></span><?= $holidays_name ?></td>
<?php
		if ($cnt == 7) {
			$cnt = 0;
?>
	</tr>
	<tr>
<?php
		}
	}
?>
	</tr>
</table>
<?php
}
function get_holidays($year) {	// 祝日2年分取得 ($year ~ $year+1)
	$holidays = array();
	$google_api_key = '(Google API KEY)';
	$holidays_id = 'japanese__ja@holiday.calendar.google.com';
	$url = 'https://www.googleapis.com/calendar/v3/calendars/'.$holidays_id.'/events'
		.'?key='.$google_api_key
		.'&timeMin='.$year.'-01-01T00:00:00Z'
		.'&timeMax='.($year+1).'-12-31T00:00:00Z'
		.'&maxResults=100'
		.'&orderBy=startTime'
		.'&singleEvents=true';
	if ($results = file_get_contents($url, true)) {
		$results = json_decode($results);
		foreach ($results->items as $item ) {
			$date = strtotime((string) $item->start->date);
			$name = (string) $item->summary;
			$holidays[date('Y-n-j', $date)] = $name;
		}
	}
	return $holidays;
}
?>

 

// ミニカレンダーで、祝日の日付の上をマウスオーバー(hover)で祝日名を表示するCSSサンプル

f:id:art2nd:20180714111709j:plain

<td class="holiday"><span>24</span><p class="holidays_name">秋分の日 振替休日</p></td>
<style>
.holidays_name {
	display: none;
	position: absolute;
	margin: -1px 0 0 8px;
	padding: 5px;
	color: #f00;
	background: #fff;
	border: solid 1px #f00;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
td.holiday span:hover + p.holidays_name {
	display: block;
}
</style>

// 高さの異なるボックスを横に並べるならfloatよりinline-block

<style>
table.calendar {
	margin: 5px;
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
}
</style>
<table class="calendar">.....</table>
<table class="calendar">.....</table>
<table class="calendar">.....</table>
<table class="calendar">.....</table>