月、週、日と段階的に簡単に設定できるような設計にしたかった。 そのため、月はドラッグ&ドロップで入れ替えが簡単にできて、週の予定も 1 日づつではなく、その週分表示し予定の設定ができるようにした。 また、1 日の予定をバーで並列で見ることができて直感的に調節できるようになればわかりやすくいいのではないかと考え、スライダーを使い時間の設定ができるようにした。
- カレンダーの作成について調べそれを参考にしてカレンダーを作成した。この時は Table 要素で作成したが、レイアウトのしやすさを考え、のちに CSS の Flex で書き換えを行う。
- スライダーを作成しようと考えたが、html のスライダーでは自分の考えていた両側スライダーが実装できないためライブラリー(コンポーネント)を使用することにした。
- 週の予定の変更を行う部分を作成する。冗長性をなくすためになるべく一つのメソッドで複数のフォームを管理できるようにコードを書いた
- 全体のコードが読みずらいため、複数ファイルに分けることにする。
- CSS での飾り付けを行う。
- カレンダーの下に表示しようと考えていた予定の設定をする部分をその週の下に配置するように変更する。(そっちの方が使いやすいと考えたため)
- CSS での飾り付けを行う。
- 予定変更部分の表示非表示ができるように改良を行う。
- CSS での飾り付けを行う。
- "《"と"》"をクリックで月を変えることが可能
- 日をクリックするとその週の下にその日の予定と週の予定を追加する欄が表示される。
- 週の予定は予定のタイトルと予定を設定する時間を設定できる。また、日の予定は時間をスライドで変更可能
- 月の予定はドラッグ&ドロップで移動可能
- 予定の記述 - 一週間分の予定を追加できる欄を表示し、設定したい日への設定を簡単にした
- 日をクリックするのではなく、週の全体を一つの画面で連続して設定できるようにしたかった。
- 月と週の予定の変更 - 月の予定は、ドラックアンドドロップで移動可能にした
- カレンダーの日にちを入力で設定するのではなく、ドラッグアンドドロップで直感的に操作できるようにしたかった。
- 日の予定の変更 - 下のスライドバーで 24 時間の予定を変更可能にした。また、スライドバーにすることで一日の日程を間隔的にわかるようにした。
- 日の時間はバーの感覚で一目見てわかるようにしたかった。また、時間の調整もバーで瞬時に調節できるようにしたかった。
- 今日の日付に関しては色を変化させた。また、予定を設定している日付に関しても色を変更した。
- 複数日にまたがる予定の設定
- 月を跨いだドラッグ&ドロップ
- CSS での綺麗な飾り付け
- もっとインタラクティブな月の変更(スワイプで変更など)
- メモなどの機能
- タスク管理の作成
- PC とスマホに対応
- 可能な限り全てのブラウザへの対応
- index.html - 表示用の html ファイル
- index.jsx - 最上位のコンポーネント
- ChangeMonth.jsx - 月を変更するためのコンポーネントのファイル(月と年を表示する)
- DragDropTable.jsx - カレンダーの親コンポーネントのファイル
- Tr.jsx - 行を担当するコンポーネントのファイル
- DropTh.jsx - カレンダーのマスのコンポーネントのファイル
- DnDContent.jsx - カレンダー内に表示する予定のコンポーネントのファイル
- DropTh.jsx - カレンダーのマスのコンポーネントのファイル
- SetWeekPlan.jsx - 週の予定を設定する部分のコンポーネントのファイル
- PlanSlider - 1 日の予定の時間をスライダーで調整するコンポーネントのファイル
- Tr.jsx - 行を担当するコンポーネントのファイル
- Calendar.css - 全体の CSS
- nonslider.css - スライダーとして用いたライブラリの CSS