Atlassian製のpragmatic-drag-and-dropライブラリを使用したGoogleカレンダーデモの紹介

pragmatic-drag-and-dropの応用として、週単位のGoogleカレンダーUIを作成してみました。実際のDrop後の更新は省いていますが、あとはDB疎通するぐらいの粒度まで、実装しています。

おそらく、実装できる人は限定されているので、有料で公開してます。興味があれば、ご購入くださいませ。

実装している機能になります。

• オートスクロール対応

• 日マタギの移動

• 時間のレンジスケーリング処理

• デモ用の週移動

以下が制約になります。

• 時間のレンジ定義は１５分刻みのみ

  • 00, 15, 30, 45のいずれかになります

デモのスクショ

デモのGifになります

demo.gif

323 KB

ファイルダウンロードについて

ダウンロード

以下にZipファイルを添付しております。購入された方は以下の手順で再現できます。

$ mkdir -p wrksp
$ cd ~/wrksp

$ unzip calendar-dnd-timeline-with-pragmatic.zip -d .

$ cd ~/wrksp/calendar-dnd-timeline-with-pragmatic
$ npm ci
$ npm run dev

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