PHP製オリジナルカレンダーの作成方法

Wordpress等に貼って使えるカレンダー

いきなりですがコードです。

style（CSS）に関しては適宜オリジナルのデザインでお任せします。

<?php
// 年月選択・前月・次月のボタンが押された時に反応
if(isset($_POST['yyyy']) && $_POST['yyyy'] != '' && isset($_POST['mm']) && $_POST['mm'] != ''){
$today_y = $_POST['yyyy'];
$today_m = $_POST['mm'];
$today_quantity = date('t', mktime(0, 0, 0, date($today_m) + 1, 0, date($today_y)));
$today_month_first = date('Y.m.1', mktime(0, 0, 0, date($today_m) + 1, 0, date($today_y)));
$today_month_last = date('Y.m.d', mktime(0, 0, 0, date($today_m) + 1, 0, date($today_y)));
// 初めてページを開いた場合
} else {
$today_y = date('Y'); //今日の年を4桁で取得、例2019
$today_m = date('m'); //今日の月をゼロ詰めで取得、例01～12
$today_quantity = date('t'); //今月の月の日数、例28～31
$today_month_first = date('Y.m.1'); //今月の初日を設定、例2019.01.1
$today_month_last = date('Y.m.d', mktime(0, 0, 0, date($today_m) + 1, 0, date($today_y))); //今月の末尾を設定、例2019.01.31
}
?>
 
<!-- 年月選択＆ボタン -->
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
 
<h1 style="margin-top: 120px;">
<span class="year-display"><?php echo $today_y;?></span>年
<span class="month-display"><?php echo $today_m;?></span>月
</h1>
 
<select name="yyyy">
<?php
for($i = $today_y - 2; $i <= $today_y + 2; $i++) {
echo '<option value="'.$i.'"'; if($i == $today_y) echo ' selected'; echo '>'.$i.'</option>'."\n";
}
?>
</select>年
 
<select name="mm">
<?php
for($i = 1; $i <= 12; $i++) {
echo '<option value="'.$i.'"'; if($i == $today_m) echo ' selected'; echo '>'.$i.'</option>'."\n";
}
?>
</select>月
 
<input type="submit" value="送信">
</form>
 
<!-- カレンダー本体 -->
<div>
<!-- 1週間分の7列に対応するようにwidthを上書きで14％に変更してる -->
<div style="max-width: 11%; height: 50px; background-color: #eee;"><h3>SUN</h3></div>
<div style="max-width: 11%; height: 50px; background-color: #eee;"><h3>MON</h3></div>
<div style="max-width: 11%; height: 50px; background-color: #eee;"><h3>TUE</h3></div>
<div style="max-width: 11%; height: 50px; background-color: #eee;"><h3>WED</h3></div>
<div style="max-width: 11%; height: 50px; background-color: #eee;"><h3>THU</h3></div>
<div style="max-width: 11%; height: 50px; background-color: #eee;"><h3>FRI</h3></div>
<div style="max-width: 11%; height: 50px; background-color: #eee;"><h3>SAT</h3></div>
</div>
 
<div>
 
<?php
//1日の曜日取得
$datetime = date_create();
date_date_set($datetime, $today_y, $today_m, 1);
$w = (int)date_format($datetime, 'w');
for ($i = 1; $i <= $w; $i++) {
// ループして空のBOXで1日までの過去の日数を埋める
echo '<div style="width: 14%; height: 170px; background-color: #ddd;"></div>';
}
?>
 
<?php $today_d = 0; //01 ?>
<?php for ($i= 0; $i < $today_quantity; $i++): //末日までの回数分ループさせる ?>
<?php $today_d++; //日付としてカウント ?>
 
<?php
//曜日取得
$datetime = date_create();
date_date_set($datetime, $today_y, $today_m, $today_d);
$week = [
'SUN', //0
'MON', //1
'TUE', //2
'WED', //3
'THU', //4
'FRI', //5
'SAT', //6
];
$w = (int)date_format($datetime, 'w');
$week_name = $week[$w]; //曜日を出力
?>
 
<div style="max-width: 11%; background-color: #eee;">
<h3>
<?php if($today_d < 10): //日付が10以下の場合は頭に「0」を付ける?>
<?php echo date($today_y.$today_m.'0'.$today_d);?>
<?php else:?>
<?php echo date($today_y.$today_m.$today_d);?>
<?php endif;?>
</h3>
 
<!-- 投稿を引っ張る場合の記述例 -->
<?php
$args = array(
'post_type' => 'post',
'meta_query' => array(
'relation' => 'AND',
array(
'key' => the_time('Y.m.d'), //dateの値が
'value' => date($today_y.$today_m.$today_d), //カレンダーの日付とイコールになるもの
'type' => 'DATE',
'compare' => '=',
),
),
'showposts' => 1
);
?>
<?php $posts = new WP_Query($args); ?>
<?php if ($posts -> have_posts()) : ?>
<?php while($posts -> have_posts()) : $posts -> the_post(); ?>
<div style="background-image: url('<?php echo get_field('event_info_image_single');?>'); padding-top: 56.25%; background-position: center center; background-size: cover; background-repeat: no-repeat;"></div>
<?php endwhile; ?>
<?php else: //上記に当たるものがない場合 ?>
<p>投稿ナシ</p>
<?php endif; wp_reset_postdata(); ?>
</div>
<?php endfor;?>
</div>
 
<!-- 前月・次月の月送りボタン -->
<div>
<!-- 1月だった場合前月が1年前の12月になる処理 -->
<?php if($today_m == 1):?>
<div>
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="yyyy" value="<?php echo $today_y - 1;?>">
<button type="submit" name="mm" value="<?php echo 12;?>">前月</button>
</form>
</div>
<div>
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="yyyy" value="<?php echo $today_y;?>">
<button type="submit" name="mm" value="<?php echo $today_m + 1;?>">次月</button>
</form>
</div>
 
<!-- 12月だった場合次月が1年後の1月になる処理 -->
<?php elseif($today_m == 12):?>
<div>
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="yyyy" value="<?php echo $today_y;?>">
<button type="submit" name="mm" value="<?php echo $today_m - 1;?>">前月</button>
</form>
</div>
<div>
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="yyyy" value="<?php echo $today_y + 1;?>">
<button type="submit" name="mm" value="1">次月</button>
</form>
</div>
<!-- それ以外は普通にマイナス1とプラス1の月 -->
<?php else:?>
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
<div>
<input type="hidden" name="yyyy" value="<?php echo $today_y;?>">
<button type="submit" name="mm" value="<?php echo $today_m - 1;?>">前月</button>
</div>
<div>
<button type="submit" name="mm" value="<?php echo $today_m + 1;?>">次月</button>
</div>
</form>
 
<?php endif;?>
</div>

カレンダー記述解説編

【まずはやりたい事】

・開いた時点でのその月のカレンダーを一覧で表示

・前月、次月への月送り機能

・セレクトボックスで自由に年月を選択

・その日の投稿があれば表示、それ以外は別のものを表示

【上記を踏まえた上での作り方解説】

全てPHPを使って作成します。

PHPだと年月や曜日の取得が簡単だからです。

あと、WP（Wordpress）での投稿と紐づけたりするならば、PHP同士の方がコードも見やすくなるかと思って。

ただ、WPを使う場合は「date」の書き方等に気をつけてください。

「date_i18n()」を使え、とか「wp_date()」を使え、とかいろんな記事がありますので、現状のWPで何が推奨されてるかを調べてみてください。

【まず最初のコレ】

if(isset($_POST['yyyy'])

「isset」ときたら、指定された値がそのページへ送られて来たかどうかを判別するものとなります。

つまりif文なので、「yyyy」の変数の値が「フォームによってPOST」された状態で「このページにアクセスされた」のか？

って事です。

それが「isset」の使い方になります。

ボタン等のformでPOSTされた値の取得があればtrueになるので

この場合は「yyyy」や「mm」等のフォームボタンが押された時のnameのvalue値をここで使って、年月を指定させてます。

年月選択してボタンを押す

↓

issetで判別して変数やらに代入

↓

選択した値で表示

【それ以外の場合】

issetのelseになっている部分の説明

もしPOSTされたとかじゃなく、「初めてこのページを訪れた時」の処理となります。

初めてのカレンダーのページへの訪問の場合は

「今日の年」

「今日の月」

「今月の全部の日数」

…というふうに今日の日付を元に取得していきます。

【年月選択＆ボタン】

次に最初のフォーム内箇所です。

これはセレクトボックスを使って、年と月を選べるような項目にしてあります。

年の部分は現在からプラマイ2年、月の部分は12ヵ月分です。

送信ボタンでsubmitすると、それぞれのvalue値を送って上記のissetに該当します。

【カレンダー本体部分】

まず「SUN」～「SAT」の曜日を横並びに表示させてます。

max-widthを14％とかにしてあります。100％を7で割った数字ですね。

曜日の次の行には取得済みの月を1日から末尾まで表示していくわけですが

「1日」が何曜日スタートになるのかが分からないので取得します。

取得というか、for文のループを使って、過去日数を埋めるというやり方になってます。

スタートする基準が分かったら後はそのまま末尾までを表示させていくだけです。

同時に曜日の記載もあるので取得が必要です。

日付が最初の1～9までは頭に「0」をつけて01～09というふうに表示させる為の記述も入れてます。

後は枠内に投稿を紐づける記述を入れてます。

date（投稿日）をカレンダーの当日の日付と同じになる場合に表示させるというやり方になります。

elseをつけてそれ以外は他のものを表示させる、という事にすれば

「当日の投稿を表示、なければ別の何かを表示」とする事ができます。

【前月、次月の月送りボタン】

最後に月送りボタンの説明です。

これは「今表示されている月」がいつなのかによって3種類の分岐をさせてます。

①1月だった場合

表示中のカレンダーが「1月」だった場合、前月に表示されるものが「前年度の12月」にならなければいけません。

その為の処理を書いてます。

②12月だった場合

表示中のカレンダーが「12月」だった場合、前月に表示されるものが「翌年度の1月」にならなければいけません。

その為の処理を書いてます。

③それ以外

それ以外の場合に関しては普通に前月はマイナス1ヵ月、翌月はプラス1か月、となるのでその記述となります。

上記、それぞれ送信してsubmitすると年月をPOSTして最初のissetに反応してくれるという仕様です。

では現場から以上です！