【Event Organiser】WordPressにイベントカレンダーを表示！ー応用編ー

土日を非表示にする場合

weekendsをfalseにすると、土日が非表示になります。

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。
※週次カレンダーなどでも可能です

[eo_fullcalendar titleformatmonth="Y年n月" columnformatmonth="D曜日" weekends="false]

土日の背景色を変更する場合

外観>カスタマイズ>追加CSSに下記のように記述をおこないます。

/*****土曜日*****/
/*見出しの背景色*/
.eo-fullcalendar .fc-day-header.fc-sat {
    background: #98E7FD;
}

/*枠の背景色*/
.eo-fullcalendar .fc-bg .fc-sat {
    background: #EBFAFD;
}

/*****日曜日*****/
/*見出しの背景色*/
.eo-fullcalendar .fc-day-header.fc-sun {
    background: #FDA4A7;
}

/*枠の背景色*/
.eo-fullcalendar .fc-bg .fc-sun {
    background: #FDEDEE;
}

※色はお好きな色に変更してください
※ショートコードへの記述ではないので、ご注意ください

時間の始まりと終わりを指定する場合

タイムスケジュールのカレンダーで、時間の始まりと終わりを指定します。
たとえば、週次＋タイムスケジュールカレンダーで、10：00から18 :00で表示させたい場合は下記のように記述します。

[eo_fullcalendar defaultView="agendaWeek" titleformatweek="Y年n月j日" columnformatweek="n/j（D）" mintime="10:00" maxtime="18:00"]

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。

※日次＋タイムスケジュールカレンダーにも適用可能です。

時間表記を24時間表記にする場合

タイムスケジュールのカレンダーで、時間の表記を24時間表記にします。
たとえば、日次＋タイムスケジュールカレンダーで実装する場合は、下記のように記述します。

[eo_fullcalendar defaultView="agendaDay" titleformatday="Y年n月j日（D）" columnformatday="n/j（D）" axisformat="H:i" ]

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。

※週次＋タイムスケジュールカレンダーにも適用可能です。

カテゴリで絞り込みしたカレンダーを表示

あらかじめ指定しておいたカテゴリのスケジュールのみが表示されます。今回は、ビギナークラスとプロフェッショナルクラスを指定しています。

[eo_fullcalendar titleformatmonth="Y年n月" columnformatmonth="D曜日" category="beginner,professional"]

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。

会場で絞り込みしたカレンダーを表示

あらかじめ指定しておいた会場のスケジュールのみが表示されます。今回は、ウェブロード ホールBとホールCを指定しています。

[eo_fullcalendar titleformatmonth="Y年n月" columnformatmonth="D曜日" venue="hall-b,hall-c"]

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。

カテゴリ指定のプルダウンを表示

カテゴリで絞り込み表示可能なプルダウンが出現します。
プルダウンで選んだカテゴリのスケジュールのみが表示されます。

[eo_fullcalendar titleformatmonth="Y年n月" columnformatmonth="D曜日" headerLeft="category" headerCenter="" headerRight=""]

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。

会場指定のプルダウンを表示

会場で絞り込み表示可能なプルダウンが出現します。
プルダウンで選んだ会場のスケジュールのみが表示されます。

[eo_fullcalendar titleformatmonth="Y年n月" columnformatmonth="D曜日" headerLeft="venue" headerCenter="" headerRight=""]

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。

ヘッダー部分に、様々なボタンを設置することができます。

今回は、左側に「日付を指定」のボタン、右側に「次月・前月への移動」ボタンと「今日に戻る」ボタンを設置しています。

[eo_fullcalendar titleformatmonth="Y年n月" columnformatmonth="D曜日" headerLeft="goto" headerCenter="" headerRight="prev,next","today"]

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。

ヘッダーに「month」「agendaWeek」「agendaDay」「basicWeek」「basicDay」を指定することで、表示切替ボタンを設置することができます。

[eo_fullcalendar titleformatmonth="Y年n月" columnformatmonth="D曜日" titleformatweek="Y年n月j日" columnformatweek="n/j（D）titleformatday="Y年n月j日（D）" columnformatday="n/j（D）" headerLeft="month,agendaWeek,agendaDay,basicWeek,basicDay" headerCenter="" headerRight=""]

※青字部分には、これまでに記述したカスタマイズの表記が入っていますので、状況に応じて削除してください。

デフォルトでは、表示されたイベントにカーソルを当てると、ポップアップが出現し、クリックで詳細ページにリンクします。
詳細ページが必要ない場合にはこちらのカスタマイズをおこないます。

外観>カスタマイズ>追加CSSに、このように記述をおこないます。

Event Organiserでは、用途に合った幅広い形のカレンダーを作成することが可能です！
お好みの形にカスタマイズすることも試してみてください。

基礎編の記事はこちら