ワードプレスプラグイン「Event Organiser」カレンダのカスタマイズ

「Event Organiser」はWordPressのプラグインで、複数のイベント管理やイベント詳細ページの作成に適しています。
デザインの拡張が高い点、そしてワードプレス内ですべて完結できる点が魅力的です。また、カテゴリごとに色分けすることができ、複数のイベントの作成が可能になっています。

プラグインのインストール

「Event Organiser」で検索し、プラグインをダウンロードしてインストールします。

ショートコードを固定ページ等に張り付けて使用します。下記は現在使用しているショートコードです。

eo_fullcalendar titleformatmonth="Y年 n月" responsivebreakpoint="0"

カレンダーのデザインを変更する

既存の表示方法の日付表示は、文字が右端に寄っていますが、見ずらいと感じたので中央に位置してみました。
また、土曜日と日曜日の文字色を、それぞれ青と赤に変更してみました。
具体的にはCSSの調整するだけでOKです。カスタマイズ例のCSSを以下に示しました。

変更前

変更後

CSSの記述例

記述場所はどこでもOKですが、テーマアップグレードの影響を受けない子テーマに記述するのが良いと思います。

/*日曜日の色を変える*/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead 
.fc-sun {
color: #ff0000;text-align: center;
}
/*土曜日の色を変える*/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead 
.fc-sat{color: #0000ff;text-align: center;}
/*月曜日の文字を中央に*/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead 
.fc-mon{text-align: center;}
/***火***/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead 
.fc-tue{text-align: center;}
/***水***/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead 
.fc-wed{text-align: center;}
/***木***/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead 
.fc-thu{text-align: center;}
/***金***/
.eo-fullcalendar .fc-view-container .fc-view table tbody .fc-widget-content .fc-day-grid-container .fc-day-grid .fc-row .fc-content-skeleton table thead 
.fc-fri{text-align: center;}

 

スポンサーリンク

↑記事が良かったら「いいね」をお願いします。お読みいただきありがとうございました。

ゆう

ウエブ制作会社でワードプレスによるサイト作りに携わった経験を生かしてこのサイトを始めました。皆様のお役に立てれば幸いです。

ゆうをフォローする
ワードプレス
スポンサーリンク

コメント

タイトルとURLをコピーしました