イベント用のモジュールの仕様を妄想してみた

これは a-blog cms Advent Calendar 2020 の6日目のエントリーです。今回は、こんなモジュールがあったらいいなって妄想を書いてみようと思います。


標準提供の範囲内での実装を考えてみる

a-blog cms には、スケジュールをサイト上に掲載するためのモジュールとして

と、2種類のモジュールが用意されています。

スケジュール ( Schedule ) モジュール

こちらは、管理画面の「スケジュール」より1ヶ月分をまとめて管理するような UI で簡単な休日カレンダーなど作ることができるようになっています。


このモジュールでは、縦に1ヶ月分を表示させるリスト表示と 七曜表表示ができ、さらに指定ヶ月分や年間表示など機能が満載です。

お店の休日カレンダーや月間イベント情報など、手軽に休日など日のステータスや、イベントのタイトルくらいをお伝えするのに向いています。アップルップルでは、毎年この時期には「年休日カレンダー」をスケジュールモジュールで作って社内で共有 しています。

エントリーカレンダー ( Entry_Calendar ) モジュール

a-blog cms はエントリーのカタチで情報を持たせておくと、いろいろな方法で情報が表示可能です。 その中でも、エントリーカレンダー は面白い使い方ができるモジュールになっています。

スケジュールモジュールのようなカタチでカレンダーを表示させる事ができ、その日付の中にエントリー情報を表示ができるようにしたものです。スケジュールと大きく違うところはカレンダーに表示されるエントリーリンクから詳細ページを用意できる事です。

妄想で仕様を考えてみる

ここからは「こんなのがあったらいいな」を書いていきます。

エントリーカレンダー ( Entry_Calendar ) モジュール の弱点 を共有しておきます。 例えば、今日から3日間は「臨時休業」とするとします。その際には、3日分のエントリーを作ってタイトルに「臨時休業」というエントリーを作る必要があります。 繰り返し同じ情報を表示する際には複製が必要になります。

日付の管理の仕方を変える

これを解決しようと思うと、日付を複数設定できるようにする必要があります。 システム自体の管理を変更するには大事ですが、a-blog cms では管理画面を自由にカスタマイズが可能ですから、まずはカスタムフィールドグループで複数の日付を設定できるようにしてみてはどうでしょうか?

都度、日付を登録するフォームの場合


この場合、1週間とか1ヶ月毎日になったりすると設定が大変そうです。

また、入力欄には class="js-datepicker" を設定する事で日付の選択画面が出るようになります。

FROM - TO で日付を設定する場合


FROM - TO を設定できるようにする事で長いスケジュールも設定手軽に登録ができるようにできますね。

カスタムフィールドの日付に対応するモジュール

エントリー日付ではなく、上記のようなカスタムフィールド {event_date_from}{event_date_to} を利用して情報を表示するモジュールを作ります。

  • イベントカレンダーモジュール ( Event_Calendar )
  • イベントサマリーモジュール ( Event_Summary )
  • イベント七曜カレンダーモジュール ( Event_Calendar7 )

イベントカレンダーモジュール ( Event_Calendar )

Entry_Calendar 互換で、カスタムフィールド日付で情報が表示できるモジュールになります。複数の日付の場所に同様のエントリーにリンクがはられるイメージです。

イベントサマリーモジュール ( Event_Summary )

表示設定としては Entry_Summary 互換っぽいが、Entry_Calendar のような

  • 週の始まり
  • 表示モード 月表示 / 週表示(その日から) / 週表示(週の始まりから)
  • ページ送り数

が、必要だと思う。 そして、エントリー自身は同じエントリーは表示させずに、Summaryっぽい日付の場所には日付をFROM - TO で表示させる。

イベント七曜カレンダーモジュール ( Event_Calendar7 )

七曜表示で画像のような表示ができるようにする。


こんなの作りました。ではなく、こんなのあったらいいね。って事を書いてみました。

明日は、ウェビングスタジオ 口田さん が「 コンテキスト(URLコンテキスト、ctx属性)について解説記事 」を書いてくれるそうです。なんとか、今年も毎日続けたいですね。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ

Chat GPT が書く a-blog cms の紹介ブログ記事

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

2023年の a-blog cms を振り返って

エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ

a-blog cms Training Camp 2023

最新記事

カテゴリー

アーカイブ

ハッシュタグ