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

前置き

前回のパターン1を諦めて
パターン2をやっていきます。

②JavaScriptでdayjsを使ってカレンダーを作成

このclassを見て
別のpluginを使用しているのかと
勘違いしていました、、、
他のpluginは使用したくないな〜
とか思っていた💥
単純にdocument.querySelectorで
指定できるようにしていただけですね💡
【Nuxt.js】開発ブログ：カレンダーを作成してみる②

参考コードをチェック

ということでこちらを参考に進めていきます。
JavaScriptでdayjsを使ってカレンダーを作成

とりあえずtableタグ内の
見出しやらtrやらに
表示させたいものをチェック👀
thには曜日を入れていますね。
weekdaysShortというdayjsのプラグインで
日本語の曜日を配列で取得できるみたいです。

dayjsのプラグインを使ってみる

まずは曜日の表示を行ってみます。

@nuxtjs/dayjsを使用

まず最初に
@nuxtjs/dayjsでやってみましたが、
weekdaysShort…というか
プラグインの使い方が分からない。
$dayjs().updateLocaleとか
$weekdaysShortとか
色々やってみたのですがダメでした。

nuxt.config.jsはこんな感じ。

export default {
  modules: [
    '@nuxtjs/dayjs',
  ],
  dayjs: {
    locales: ['en', 'ja'],
    defaultLocale: 'ja',
    defaultTimeZone: 'Asia/Tokyo',
    plugins: [
      'utc', // import 'dayjs/plugin/utc'
      'timezone', // import 'dayjs/plugin/timezone'
      'updateLocale',
    ], // Your Day.js plugin
    updateLocale: ('ja', {
      weekdaysShort: ['Su', 'Mo', 'Tu', 'WAHH', 'Th', 'Fr', 'Sa']
    })
  },
}

export default {

modules: [

'@nuxtjs/dayjs',

dayjs: {

locales: ['en', 'ja'],

defaultLocale: 'ja',

defaultTimeZone: 'Asia/Tokyo',

plugins: [

'utc', // import 'dayjs/plugin/utc'

'timezone', // import 'dayjs/plugin/timezone'

'updateLocale',

], // Your Day.js plugin

updateLocale: ('ja', {

weekdaysShort: ['Su', 'Mo', 'Tu', 'WAHH', 'Th', 'Fr', 'Sa']

})

}

@nuxtjs/dayjsを使用しない

ということで
@nuxtjs/dayjsは使わずやってみます。
こんな感じでやった方が良さそう。
軽量の日付操作JavaScriptライブラリ「Day.js」> プラグインの追加

日本語版のdayjsは初心者に優しい
iamkun/dayjs

公式はこちらが該当します。
Loading plugin in NodeJS
こちらのサンプルコードでは
AdvancedFormatという
プラグインを使用していますね。

ということでコピペしたら
プラグインが使用できました🙌✨

plugins/day.js
前半のimportとexport部分はNuxt.jsで
プラグインを使用するための記述です。
【Nuxt.js】dayjs導入編：リアルタイムな日時を表示してみよう

import dayjs from 'dayjs'

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

var AdvancedFormat = require('dayjs/plugin/advancedFormat')
// import AdvancedFormat from 'dayjs/plugin/advancedFormat' // ES 2015

dayjs.extend(AdvancedFormat)

import dayjs from 'dayjs'

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

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

}

var AdvancedFormat = require('dayjs/plugin/advancedFormat')

// import AdvancedFormat from 'dayjs/plugin/advancedFormat' // ES 2015

dayjs.extend(AdvancedFormat)

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

<script>
export default {
  data() {
    return {
      now: this.$dayjs().locale('ja').format('Q Do k kk X x'),
    }
  },
}
</script>

</div>

</template>

export default {

data() {

return {

now: this.$dayjs().locale('ja').format('Q Do k kk X x'),

}

</script>

export default {
  plugins: [
    '~/plugins/day.js',
  ],
}

export default {

plugins: [

'~/plugins/day.js',

}

ではweekをコピペします。

import dayjs from 'dayjs'

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

var AdvancedFormat = require('dayjs/plugin/advancedFormat')
dayjs.extend(AdvancedFormat)

var updateLocale = require('dayjs/plugin/updateLocale')
dayjs.extend(updateLocale)

dayjs.updateLocale('en', {
  weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
})

import dayjs from 'dayjs'

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

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

}

var AdvancedFormat = require('dayjs/plugin/advancedFormat')

dayjs.extend(AdvancedFormat)

var updateLocale = require('dayjs/plugin/updateLocale')

dayjs.extend(updateLocale)

dayjs.updateLocale('en', {

weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

})

使い方が分からないので
とりあえず
this.$dayjs().updateLocal.weekdaysShort
にしてみましたがまぁエラーです笑

TypeError
Cannot read property ‘weekdaysShort’ of undefined

よくよく公式を見ると
Pluginsには
Weekdayとあり、
Customizeには
Weekday Names…
おっと…❓

ということはWeekdayも読み込む必要があり、
表示形式をカスタムしないといけない…❓
Plugin > Customize

とりあえずweekdayを読み込んで
使用してみます。

import dayjs from 'dayjs'

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

import 'dayjs/locale/ja'
dayjs.locale('ja')

let weekday = require('dayjs/plugin/weekday')
dayjs.extend(weekday)

// let updateLocale = require('dayjs/plugin/updateLocale')
// dayjs.extend(updateLocale)

// dayjs.updateLocale('ja', {
//   weekdaysShort: ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"]
// })

import dayjs from 'dayjs'

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

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

}

import 'dayjs/locale/ja'

dayjs.locale('ja')

let weekday = require('dayjs/plugin/weekday')

dayjs.extend(weekday)

// let updateLocale = require('dayjs/plugin/updateLocale')

// dayjs.extend(updateLocale)

// dayjs.updateLocale('ja', {

// weekdaysShort: ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"]

// })

weekdayの0〜7の数字で
曜日が割り当てられています。
記事を書いている本日は
7/1(木)です。
この週の0=日曜日は6/28(日)
Sun, 27 Jun 2021 08:09:52 GMT

<template>
  <div class="page">
    <p>{{ now }}曜日</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$dayjs().locale('ja').weekday(0),
    }
  },
}
</script>

</div>

</template>

export default {

data() {

return {

now: this.$dayjs().locale('ja').weekday(0),

}

</script>

フォーマットで整えます。
now: this.$dayjs().locale('ja').weekday(0).format('YYYY/MM/DD_HH:mm_d')
そうすると、曜日(d)がSunではなく0になってしまいます。
2021/06/27_17:16_0

成功コード(とりあえず現在の曜日を好きな表示に変更)

dddにすればOKですね⭕️
now: this.$dayjs().locale('ja').weekday(0).format('YYYY/MM/DD_HH:mm_ddd')
2021/06/27_10:08_日

で、これを「日曜」に変えたい場合に
Weekday Namesを使用ですね💫☝️
これで表示を変更できました🙌💕
2021/06/27_10:13_日曜

あれ❓
でも今回やりたいのは
その配列自体の取得…
結局ふりだしに戻っている感。。。

// nuxtでプラグインを使用
import dayjs from 'dayjs'
export default ({ app }, inject) => {
   inject('dayjs', ((string) => dayjs(string)))
}

// dayjsを日本語に
import 'dayjs/locale/ja'
dayjs.locale('ja')

// dayjsのプラグインweekdayを使う
let weekday = require('dayjs/plugin/weekday')
dayjs.extend(weekday)

// dayjsのプラグインでカスタマイズを行う
let updateLocale = require('dayjs/plugin/updateLocale')
dayjs.extend(updateLocale)
dayjs.updateLocale('ja', {
  weekdaysShort: ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"]
})

// nuxtでプラグインを使用

import dayjs from 'dayjs'

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

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

}

// dayjsを日本語に

import 'dayjs/locale/ja'

dayjs.locale('ja')

// dayjsのプラグインweekdayを使う

let weekday = require('dayjs/plugin/weekday')

dayjs.extend(weekday)

// dayjsのプラグインでカスタマイズを行う

let updateLocale = require('dayjs/plugin/updateLocale')

dayjs.extend(updateLocale)

dayjs.updateLocale('ja', {

weekdaysShort: ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"]

})

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

<script>
export default {
  data() {
    return {
      now: this.$dayjs().format('YYYY/MM/DD_HH:mm_ddd'),
    }
  },
}
</script>

</div>

</template>

export default {

data() {

return {

now: this.$dayjs().format('YYYY/MM/DD_HH:mm_ddd'),

}

</script>

というか、
テンプレートでわざわざ
locale('ja')指定する必要ないんですね💡
そしてweekdayを使用しなくても
表示形式自体は変えられるので
@nuxtjs/dayjsでも検証したい。
そもそも曜日の配列をテンプレートに
持ってくるにはどうすれば…🤔💭
ぐっちゃぐちゃです😂笑

ここまでは
formatの表示形式を変えるだけなのに
随分と遠回りをしてしまいましたw
色々難しく考えすぎ…🥺

参考コードをNuxt.jsに置き換える

配列の取得はさておき、
Nuxt.jsに置き換えて要素を置いてみます。
tableタグは
table row(tr)で列を作って
table head(th)や
table data(td)を入れていきます。

これでとりあえず今日の曜日
「金曜」は表示されましたが…
結局配列を取得してv-forしたり、
という部分が解決しませんでした💥

<template>
  <div class="page">
    <table class="c-calendar-container">
      <caption class="c-calendar_title">
        {{
          dayjs.month
        }}
        {{
          dayjs.year
        }}
      </caption>
      <tr>
        <th class="c-calendar_weekday">{{ dayjs.day }}</th>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dayjs: {
        year: this.$dayjs().format('YYYY'),
        month: this.$dayjs().format('MM'),
        day: this.$dayjs().format('ddd'),
      },
    }
  },
}
</script>

{{

dayjs.month

}}

{{

dayjs.year

}}

</caption>

<tr>

<th class="c-calendar_weekday">{{ dayjs.day }}</th>

</tr>

</table>

</div>

</template>

export default {

data() {

return {

dayjs: {

year: this.$dayjs().format('YYYY'),

month: this.$dayjs().format('MM'),

day: this.$dayjs().format('ddd'),

}

</script>

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

import 'dayjs/locale/ja'
dayjs.locale('ja')

let updateLocale = require('dayjs/plugin/updateLocale')
dayjs.extend(updateLocale)
dayjs.updateLocale('ja', {
  weekdaysShort: ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"]
})

import dayjs from 'dayjs'

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

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

}

import 'dayjs/locale/ja'

dayjs.locale('ja')

let updateLocale = require('dayjs/plugin/updateLocale')

dayjs.extend(updateLocale)

dayjs.updateLocale('ja', {

weekdaysShort: ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"]

})

まとめ

何をすれば良いのか、
dayjsを理解できていないこともあり
かなり時間を費やしてしまいました…
ﾃﾞﾓﾏﾀﾞﾖｸﾜｶﾗﾅｲ

とりあえず現在の月の初めと終わりを取得し、
並べるのは分かったのですが、
曜日とリンクさせるにはどうすれば…
などなど疑問が絶えません。
少し別のことをやって
切り替えて徐々に進めます。