Vue.jsでカレンダーコンポーネント作ってみた - Qiita

前置き カレンダーと一言で言っても、機能も様々なので、 ひとまず機能もシンプルで、あまりごちゃごちゃさせてないものを紹介します。 vueとmomentのみで作っています。 下記が主な機能： 1.<>ボタンで月単位での移動ができる 2.選択状態の概念があること（表示時は現在日付） 3.日付ごとにその日のTodoを表示できる 結構スタイルに依存するので、簡単なcssも記述します。 完成品 んで、todoがある日付を選択すると、 todoリストが出る仕組み。 まずはじめに todoリストを別ファイルで作ってみます。 実際こういうコンポーネントを使うアプリを作る場合は、 だいたいDBから取得するパターンが多いと思います。 今回は簡易的に定数ファイル的なノリで作成。 const TODO_LIST = [ { id: 1, title: "起床", description: "きっとねむい", da