ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

ウェブサイト上にカレンダーを簡単に生成できる便利な WordPress プラグインがありました。
営業日カレンダーとして休日を設定することはもちろん、イベントなどの開催スケジュールも設定できます。
スタートミーアップが運営する別サイトで実際に使用しており、使いやすかったので使い方をご紹介します。

まず、完成形からどうぞ。

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」
https://noborisenka.com/

わたしは使っていませんが、月送りの機能もついています。
どんなウェブサイトにも馴染むシンプルなデザインもいいですね。

目次

インストール方法

WordPress のダッシュボードにて、「プラグイン」>「新規追加」をクリック、検索窓に「XO Event Calendar」と入力するとすぐに見つかります。
「今すぐインストール」をクリック・有効化します。

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

目次へ

設定方法「休日設定」

WordPress のダッシュボード内、「設定」>「イベント」>「休日設定」をクリック。
「休日を設定」をクリックして新しい休日を作成します。
休日の名前は “英小文字、数字およびハイフンのみ” なので、ここでは “holiday” として「作成」。

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

元の画面に戻ったら「編集する休日を選択」で “holiday” が選択されていることを確認します。

目次へ

休日項目

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

タイトル カレンダー左下に表示されます。デフォルトの表示は “定休日” 。
週定期 毎週決まった曜日が休日になる場合には曜日にチェックを入れます。
臨時日 臨時休業、夏季休業など日付を指定します。指定の仕方は “2021-07-01” 。
取消日 週定期で指定した休日に臨時営業する場合に指定します。指定の仕方は “2021-07-01” 。
休日の色を指定します。
1つのカレンダーに複数の休日設定をまとめて表示させるような場合、色分けも可能。
※後述します。

目次へ

カレンダーをウェブページに表示する

休日項目の設定ができたら、ウェブページにカレンダーを表示します。

基本となるショートコード

[xo_event_calendar]

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

休日設定 “holiday” を指定して表示

[xo_event_calendar holidays="holiday"]

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

複数の休日設定を 1つのカレンダーにまとめて表示

[xo_event_calendar holidays="holiday,am,pm"]

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

月送り非表示

[xo_event_calendar holidays="holiday" navigation="false"]

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

カレンダー2ヶ月分表示 & 月送り前後 1ヶ月まで

[xo_event_calendar holidays="holiday" previous="1" next="1" months="2"]

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

holidays=”〇” 休日設定を指定する
navigation=”false” 月送り機能を使用しない(非表示にする)
表示設定 navigation=”true” は省略可能
previous=”〇” 何ヶ月前のカレンダーまで表示させるか
next=”〇” 何ヶ月先のカレンダーまで表示させるか
months=”〇” 何ヶ月分のカレンダーを表示させるか

目次へ

カレンダーを 2ヶ月分表示して、さらに横並びにする

PC ではカレンダーを 2ヶ月分を横並び、599px以下では縦並びにします。
style.css に追加して下さい。

/* XO Event Calendar ------------------------- */

.xo-event-calendar {
    margin: 0 auto;
}
.xo-months {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: space-between;
}
.xo-month-wrap {
    width: 47%; //カレンダーの横幅の最大を47%とする
}
@media screen and (max-width: 599px) {
    .xo-event-calendar {
        width: 70%; //カレンダー全体の表示幅の最大を70%とする
    }
    .xo-months {
        display: block; //カレンダーを縦に並べる
    }
    .xo-month-wrap {
        width: 100%; //カレンダーの横幅の最大を100%とする
    }
}

スマホではカレンダーの表示は 1ヶ月分だけとする場合には、以下のコードも追加します。

@media screen and (max-width: 599px) {
    .xo-month-wrap:last-child {
        display: none;
    }
}

目次へ

設定方法「イベント設定」

WordPress のダッシュボード内、「設定」>「イベント」>「カレンダー」をクリック。
投稿のカテゴリー設定と同じ画面が表示されるので、「名前」「スラッグ」を入力します。
「色」の項目で選択された色がカレンダー上に表示されるので、必要に応じて変更して「新しいカテゴリー」を追加。

イベントを表示

「イベント」>「新規追加」をクリック。
こちらも投稿と同じ画面が表示されるので、見出しと本文を入力。
同じページの中に表示されている「イベント詳細」でイベント開催期間を設定します。

「ショートタイトル」に表示されたものがカレンダー上に表示されます。

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

目次へ

カレンダーをウェブページに表示する

基本は休日設定のときと同じなので省略します。
カレンダーをウェブページに表示する方法はこちら。

ウェブページに営業日カレンダー・イベントカレンダーを簡単生成できる WordPress 無料プラグイン「XO Event Calendar」

目次へ

実際にカレンダーを確認するにはこちら