【WordPress】プラグイン「Event Organiser」でシンプルなイベントカレンダーを設置

2025年2月22日2025年2月24日

今回はWordPressのカレンダープラグイン「Event Organiser」を使用して、デザインはシンプルに、カレンダーにはイベント名のみで詳細ページへはリンクしない、簡易的なカレンダー設置となります。

プラグイン「Event Organiser」を追加

プラグイン＞新規プラグインを追加＞プラグインの検索「Event Organiser」＞今すぐインストール＞有効化

カテゴリを追加

カレンダーでイベントの色分けのために、必要なイベントの種類だけカテゴリーを追加して下さい。
※カテゴリーを設定しないイベントは青背景の白文字で表示されます。

イベント＞カテゴリー＞名前・スラッグ・色を設定＞新規カテゴリーを追加

イベントを追加

イベント＞新しいイベントを追加＞必要欄に入力＞公開

タイトルを追加イベント名を入力
開始日時・終了日時今回は終日イベントとして時間は指定せずにすぐ下の終日にチェック
日付を表示するからカレンダーを表示して該当する日をクリック
カテゴリ一覧から該当するカテゴリにチェック

ショートコードを追加

[eo_fullcalendar titleformatmonth="Y年n月"]

※左に「＜」・右に「＞」・真ん中に「年月」・「今日」を非表示する場合

[eo_fullcalendar titleformatmonth="Y年n月" headerLeft="prev" headerCenter="title" headerRight="next"]

※カテゴリや会場を設定すれば複数店舗それぞれのイベントや定休日を設定して表示することもできます。

最初から指定したカテゴリのみ表示する場合

[eo_fullcalendar titleformatmonth="Y年n月" category="カテゴリのスラッグ"]

最初から指定した会場のみ表示する場合

[eo_fullcalendar titleformatmonth="Y年n月" venue="会場のスラッグ"]

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加

CSSで変更した内容

イベント内容の文字を小さくセンター合わせに。
日付の位置が端に詰まっているので少し余白を空ける。
土曜日の日付を青色に、日曜日の日付を赤色に変更。
イベント詳細ページへのリンクを無効に。

.eo-fullcalendar table:not(.has-border-color) th, table:not(.has-border-color) td {
border-color: #ccc; /*枠線色*/
}
.eo-fullcalendar h2 {
	font-size: 20px !important; /*タイトル年月文字サイズ*/
}

/*イベント内容*/
.eo-fullcalendar .fc-event {
	font-size: 12px !important; /*文字サイズ*/
	font-weight:bold; /*文字太さ*/
	padding: 5px 5px; /*上下左右余白*/
	text-align: center !important; /*文字位置*/
}

/*日付*/
.eo-fullcalendar .fc-day-number.fc-past, .eo-fullcalendar .fc-day-number.fc-future {
	padding: 5px 5px !important; /*上下左右余白*/
}

/*土曜日*/
.eo-fullcalendar .fc-day-header.fc-sat {
	color: #3e39b2; /*文字色*/
    background: #f2f2f2; /*背景色*/
}
.eo-fullcalendar .fc-bg .fc-sat {
    background: #fff; /*カレンダー内背景色*/
}
.eo-fullcalendar .fc-day-number.fc-sat {
	color: #3e39b2; /*日付文字色*/
}

/*日曜日*/
.eo-fullcalendar .fc-day-header.fc-sun {
	color: #ed5053; /*文字色*/
    background: #f2f2f2; /*背景色*/
}
.eo-fullcalendar .fc-bg .fc-sun {
    background: #fff; /*カレンダー内背景色*/
}
.eo-fullcalendar .fc-day-number.fc-sun {
	color: #ed5053; /*日付文字色*/
}

/*リンク設定無効*/
.eo-fullcalendar .fc-event {
    pointer-events: none;
}

以上でWordPressのカレンダープラグイン「Event Organiser」の簡易的カレンダー設置の方法となります。

動作確認： Mac mini M2 – Safari iPad Air 4 – Safari iPhone 12 – Safari