MoreN件機能を備えたマンスリーカレンダーの紹介

まえがき

マンスリーカレンダーを実装するにあたり、予定の表示には少し注意が必要です。

react-big-calendarにもみられるようなものになります。

react-big-calendarのMoreN件表示

そこで、今回はMoreN件表示に着目し、この部分を考慮しない場合と考慮した場合とでまずは見比べてみます。そこから、マンスリーカレンダーで考慮すべきデータシリーズに話を展開させていきます。

まずは考慮しない場合です。

日付の部分が隠れたりと、いろいろ使い勝手が良くありません。

MoreN件を考慮しないマンスリーカレンダー

次に考慮した場合です。

表示できる最大予定数などを検討しておくことで、すっきりと情報設計されました。

MoreN件を考慮したマンスリーカレンダー

MoreN件表示の部分はPopoverで表示できます。

MoreN件を考慮したマンスリーカレンダーのPopover部分その１

MoreN件を考慮したマンスリーカレンダーのPopover部分その２

マンスリーカレンダーで考慮するデータシリーズ

まえがきでは、MoreN件表示に着目しましたが、MoreN件表示以外にもマンスリーカレンダーには考慮するものがあります。

そこで、今回はざっとデータシリーズをいくつか用意しています。

データセットのバリエーション

隙間のあるオーバーラップイベント

隙間のあるオーバーラップイベント

オーバーラップイベント

オーバーラップイベント

通常イベント

通常イベント

月をまたぐイベント

月をまたぐイベントその１

月をまたぐイベントその２

多数の短期イベント

多数の短期イベント

長期イベントのみ

長期イベントのみ

単日イベントのみ

単日イベントのみ

イベントなし

イベントなし

あとがき

マンスリーカレンダーの実装の骨子ドラフトが欲しい方は以下から購入してくださいませ

購入された方は以下の手順で再現できます

$ mkdir -p wrksp
$ cd ~/wrksp

$ unzip calendar-monthly.zip -d .

$ cd ~/wrksp/calendar-monthly
$ npm ci
$ npm run dev

// ビルドする場合
$ npm run build
$ npm run preview