Title: カレンダーに独自の休日や祝日を表示し、更に色分けできますか?

TeamPage にバンドルされている「フルカレンダー (FullCalendar)」プラグインには、特定のタグが付いた記事の本文を祝日データとして扱い、カレンダー上に祝日として表示する機能があります。

祝日の日付や名称の他に「クラス」と呼ばれるキーワードを設定でき、「◯◯クラスの祝日は▲▲色で表示する」と言った様々な装飾を適用できます。

ここでは、例として、日本と中国の祝日を、赤と青で表示する方法を紹介します。



休日・祝日データを記事として投稿する



関連記事: DocJp2433.0129: カレンダー機能 (フルカレンダー)

休日や祝日の記述方法



すべてのユーザーの読み取り権限のあるスペースに、次のような記事を投稿します。

記事本文に、1 行ごと(1 段落ごと)に、「年-月-日 祝日の名前」の書式で休日・祝日を記述します。月や日は必ず 2 桁で記述します。1 桁の場合は前に「0」を付けます。

例: 2025-01-09 成人の日

クラス名の追加方法



また、半角パイプ記号で区切ってクラス名を追加することができます。複数のクラスを名を指定するには半角コンマ記号で区切ります。

次の例は、カレンダー上に表示されるアイテムに「japan」と「autumn」のクラス名を追加します。

例: 2021-10-21 秋の記念日 | japan,autumn

記事にタグを付ける



記事には、「この記事は休日・祝日用のデータです」という意味のタグを付けてください。既定のタグの書式は「holidays:西暦」です。この「holidays」の部分は、「フルカレンダー (FullCalendar)」プラグインの設定で変更できます。



下図は、日本と中国の休日・祝日を記した記事の例です。

日本の休日・祝日には「japan」というクラス名、中国のそれには「china」というクラス名を追加しています。

また、記事に「holidays:2023」というタグが付けられていることにも注目してください。



記事として投稿された休日・祝日をカレンダーに表示する



表示の確認



記事として投稿された休日・祝日をカレンダーに表示するには、「フルカレンダー (FullCalendar)」プラグインの設定画面の、「休日・祝日」セクションの [休日・祝日表示機能を有効にする] で [はい] を選択します。



カレンダーに休日・祝日が表示されることを確認します。



色分け設定



日本の休日・祝日には「japan」、中国のそれには「china」のクラス名が付いています。これらのクラス名を利用し、色分け設定を行います。

関連記事
FAQ1784: スタイルシートでスキンのデザインを変更するには
Download2143: Proteus カスタム JavaScript & CSS プラグイン

スキンのカスタム欄や「Proteus カスタム JavaScript & CSS プラグイン」を使って、次の CSS を記述します。

/* 日本の休日や祝日のタイトルを赤くする */
.fc-event.holiday.japan .fc-event-title {
    color: red !important;
}

/* 中国の休日や祝日のタイトルを青くする */
.fc-event.holiday.china .fc-event-title {
    color: blue !important;
}




文字の色ではなく背景色を変更するには次のようにします。

/* 日本の休日や祝日の背景色を赤にする */
.fc-event.holiday.japan {
    border-color: red !important;
    background-color: red !important;
}

/* 中国の休日や祝日の背景色を赤にする */
.fc-event.holiday.china {
    border-color: blue !important;
    background-color: blue !important;
}






Attachments:
holidays1.png
holidays2.png
holidays3.png
holidays4.png
holidays5.png
関連記事
Article: FAQ2922 (permalink)
Categories: :FAQ:カレンダー, :FAQ:スキン:Proteus, :DocJp:FAQ
Date: 2023/07/26; 10時08分56秒 JST

Author Name: TeamPage サポート
Author ID: jpbo