サイト

【Nuxt.js】開発ブログ:カレンダーを作成してみる①

前置き

思い立ってやった系の記事です🐣💭
とりあえずチャレンジしてみよう!
シリーズ…😂笑

いつもの丁寧な解説ではなく、
こんなこと調べて
こういう手順で試してみた
という内容です💡

自分のメモ的なものですが、
初心者の方でも
開発する時のイメージとして
参考になるかもと思ったので残しておきます✍️

中級、上級者の方も
必要な部分だけピックアップして
参考にしていただければと思います🍀

全体的なイメージ

dayjsを使用していく予定です。
月、曜日、日付の一般的カレンダーで
完成したら後から@click
モーダル開閉して
該当の日付に予定を表示…
みたいな流れで考えています。

デザインとか
コンポーネント分けとか
細かいところは考えてません。
分けてもカレンダーと
モーダル部分になりそう。

参考:
dayjsの使い方とよく使うTips
JavaScriptでdayjsを使ってカレンダーを作成
Vue.jsでカレンダーをプラグインなしで作ってみた・コンポーネントにも応用可能!
本当にこれだけ?JavaScript+vue.jsでカレンダー作成
Day.jsで簡単に日付処理!
Day.jsで日付操作(比較, 差分, フォーマット)


日付を並べる

全体の構成がイメージできなかったので
とにかく日付の取得を
どうするのかをチェック✅

Addを使ってみる

Add
単純に現在の日時に
3年分を足してv-forで出力してみました。

日時を計算するためのオブジェクトになっているため、
単純に日付だけを出すことはできません。

dayjsオブジェクトは
Dateオブジェクトをラッピングしたもの。

:key="d.id"
中身がオブジェクトなので
非プリミティブ値です。
プリミティブ値にするため
idとしました。
このオブジェクトに
idプロパティがないので
迷いましたが
良い感じのが思いつかず
とりあえず困った時のid
って感じでつけてます💡

⬇️:keyに使う値はこちらをご覧ください👀
【Nuxt.js】Nuxt文法編:v-for


他の手段を考える

ということでこの辺が参考になりそうだなと。
【JS】dayjsライブラリを用いて、指定した期間の日付を全て取得したいが

1つ1つ見ていきます。
が、結論でいうと
dayjsの記事を参考にした方が早いし、
理解は深まったものの、
実装には遠回り感があります。

new Date()

new Date()
これはdayjsなら$dayjs()とほとんど同じです。

dayjsの場合
formatを指定しないと
日本時間に適応されなかったので指定しました。
formatの指定方法はこちら
String + Format

⬇️localの設定方法は
 こちらをご覧ください👀
【Nuxt.js】dayjs導入編:リアルタイムな日時を表示してみよう

getMonth()

getMonth()
現在2021/5/4なので5月
配列と同じで年の始まりが
0からスタートするので
5月の場合は4が返ってきます。
なので実際の月にしたい場合は + 1🌛

dayjsでもmonth()があるので
同じように4が返ってきます。

表示を「5月」などに
変えたい場合は
プラグインを使用する必要があるようです。
Month Names
Plugin
UpdateLocale

ただ入れ方がよくわからず
@nuxtjs/dayjsを発見🔍👀
これならplugins/day.js不要ですね💡
今回は表示を変える必要がまだなさそうなので
一旦とばします。

setMonth()

setMonth()
月の値を変更する時に使います。

getMonthを実際の月に合わせるため + 1
それをsetMonthで出すと
1622789384239
といったミリ秒で出力されました。

Date()から離れたい

調べているうちに
new Date()を使用していて
dayjsをあまり使ってない!
と気づき始めました(遅)

ということで
こちらを参考にしながら実装していきます。
JavaScriptでdayjsを使ってカレンダーを作成

とりあえず日付を並べるのは置いといて
こんな感じで簡単に使えるのが
dayjsの魅力ですものね。

Start of Time
このあたりを使えば
日付の表示なども
結構簡単にできそうです💡


まとめ

改めてdayjsが便利なんだなと
再確認しました。
遠回りしてしまいましたが、
次回はdayjsのdocumentだけを見ながら
やりたいことをポイント絞って
実装につなげていきます!

-サイト
-,

© 2021 aLiz Nuxt