今回はPHPの勉強がてらにカレンダーを作成してみました。以下のURLから動作結果を確認してみてください。いたってシンプルなカレンダーとなっています。全体のソースはひとまず記述しますが、数回に分けて解説していきます。
https://nakagawach.tokyo/calendar/
index.php
<?php
function h($s){
return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}
try{
if (!isset($_GET['t'])|| !preg_match('/\A\d{4}-\d{2}\z/',$_GET['t'])){
throw new Exception();
}
$thisMonth = new DateTime($_GET['t']);
} catch (Exception $e){
$thisMonth = new DateTime('first day of this month');
}
$dt = clone $thisMonth;
$prev = $dt->modify('-1 month')->format('Y-m');
$dt = clone $thisMonth;
$next = $dt->modify('+1 month')->format('Y-m');
$yearMonth = $thisMonth->format('Y-m');
$tail = '';
$lastDayOfPrevMonth = new DateTime('last day of ' . $yearMonth . ' -1 month');
while ($lastDayOfPrevMonth->format('w')<6){
$tail = sprintf('<td class="gray">%d</td>', $lastDayOfPrevMonth->format('d')) . $tail;
$lastDayOfPrevMonth->sub(new DateInterval('P1D'));
}
$body = '';
$period = new DatePeriod(
new DateTime('first day of ' . $yearMonth),
new DateInterval('P1D'),
new DateTime('first day of ' . $yearMonth . ' +1 month')
);
$today = new DateTime('today');
foreach($period as $day){
if ($day->format('w') % 7 === 0){ $body .= '</tr><tr>';}
$todayClass = ($day->format('Y-m-d') === $today->format('Y-m-d')) ? 'today' : '';
$body .= sprintf('<td class="youbi_%d %s">%d</td>', $day->format('w'), $todayClass, $day->format('d'));
}
$head='';
$firstDayOfNextMonth = new DateTime('first day of ' . $yearMonth . ' +1 month');
while ($firstDayOfNextMonth->format('w')>0){
$head .= sprintf('<td class="gray">%d</td>', $firstDayOfNextMonth->format('d'));
$firstDayOfNextMonth->add(new DateInterval('P1D'));
}
$html = '<tr>' . $tail . $body . $head . '</tr>';
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Calenar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th><a href="/calendar/?t=<?php echo h($prev); ?>">«</a></th>
<th colspan="5"><?php echo $yearMonth;?></th>
<th><a href="/calendar/?t=<?php echo h($next); ?>">»</a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="youbi_0">日</td>
<td class="youbi_1">月</td>
<td class="youbi_2">火</td>
<td class="youbi_3">水</td>
<td class="youbi_4">木</td>
<td class="youbi_5">金</td>
<td class="youbi_6">土</td>
</tr>
<?php echo $html; ?>
</tbody>
<tfoot>
<th colspan="7"><a href="/calendar/">今日</a></th>
</tfoot>
</table>
</body>
</html>
styles.css
body{
font-family: Arial, sans-serif;
font-size: 36px;
}
a{
text-decoration: none;
}
table{
margin: 15px auto;
border : 1px solid #ddd;
border-collapse: collapse;
}
th{
background: #eee;
}
th,td{
padding: 7px;
text-align: center;
}
.youbi_0{
color: red;
}
.youbi_6{
color: blue;
}
.today{
font-weight: bold;
}
.gray{
color: #dedede;
}
コメント