開発ブログ

【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はこんな感じ。


@nuxtjs/dayjsを使用しない

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

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

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

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

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

ではweekをコピペします。

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

TypeError
Cannot read property ‘weekdaysShort’ of undefined

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

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

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

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

フォーマットで整えます。
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_日曜

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

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

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


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

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

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


まとめ

何をすれば良いのか、
dayjsを理解できていないこともあり
かなり時間を費やしてしまいました…
デモマダヨクワカラナイ

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

-開発ブログ
-,

© 2021 aLiz Nuxt