【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

<template>
  <div class="page">
    <p v-for="d in days" :key="d.id">{{ d }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    days() {
      let d = this.$dayjs().add(3, 'year')
      console.log(d)
      return d
    },
  },
}
</script>

</div>

</template>

export default {

computed: {

days() {

let d = this.$dayjs().add(3, 'year')

console.log(d)

return d

}

</script>

他の手段を考える

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

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

new Date()

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

<template>
  <div class="page">
    <p>{{ date }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    date() {
      return new Date()
    },
  },
}
</script>

</div>

</template>

export default {

computed: {

date() {

return new Date()

}

</script>

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

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

import dayjs from 'dayjs'

// 日本語表示にするためlocaleを追加
import 'dayjs/locale/ja'
dayjs.locale('ja')

export default ({ app }, inject) => {
   inject('dayjs', ((string) => dayjs(string)))
}

import dayjs from 'dayjs'

// 日本語表示にするためlocaleを追加

import 'dayjs/locale/ja'

dayjs.locale('ja')

export default ({ app }, inject) => {

inject('dayjs', ((string) => dayjs(string)))

}

<template>
  <div class="page">
    <p>{{ date }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    date() {
      return this.$dayjs().locale('ja').format('YYYY-MM-DD HH:mm:ss')
    },
  },
}
</script>

</div>

</template>

export default {

computed: {

date() {

return this.$dayjs().locale('ja').format('YYYY-MM-DD HH:mm:ss')

}

</script>

getMonth()

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

<template>
  <div class="page">
    <p>{{ date }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    date() {
      let d = new Date()
      let month= d.getMonth()
      return month
    },
  },
}
</script>

</div>

</template>

export default {

computed: {

date() {

let d = new Date()

let month= d.getMonth()

return month

}

</script>

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

<template>
  <div class="page">
    <p>{{ date }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    date() {
     return this.$dayjs().month()
    },
  },
}
</script>

</div>

</template>

export default {

computed: {

date() {

return this.$dayjs().month()

}

</script>

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

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

setMonth()

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

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

<template>
  <div class="page">
    <p>{{ date }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    date() {
     let d = new Date()
      let month = d.setMonth(d.getMonth() + 1)
      return month
    },
  },
}
</script>

</div>

</template>

export default {

computed: {

date() {

let d = new Date()

let month = d.setMonth(d.getMonth() + 1)

return month

}

</script>

Date()から離れたい

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

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

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

<template>
  <div class="c-calendar">
    <p class="c-calendar_title">
      {{ `${now.format('M')}月` }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$dayjs(),
    }
  },
}
</script>

{{ `${now.format('M')}月` }}

</p>

</div>

</template>

export default {

data() {

return {

now: this.$dayjs(),

}

</script>

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

まとめ

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