【Nuxt.js】開発ブログ：カレンダーを作成してみる②
🎈 WPでも公開中です
https://wp.me/pc9NHC-1o5
前置き
前回の続きです。
カレンダーの作成をしたい📆
前回は必要な情報が何か、
探すのでいっぱいでした😵💦
ということで、
情報の整理からしていきます❗️🧹
続きをやる前に
今一度やり方を見直し、
実装できそうなものから
手をつける方向にしています🌟
前回同様、
思い立ってやってみる系の
日記みたいなものです✍️
dayjsの使い方とよく使うTips
とりあえずdayjsを使う際には
ここを見ながらやる予定です🌱👀
パターンの見直し
まずは前回の情報の見直し💫
どれかで実装したい🎈🧸
自分のやりやすそうな順番で整理📦
①【JS】dayjsライブラリを用いて、指定した期間の日付を全て取得したいが
dayjsでやるなら
カレンダーにしたい期間の差分を出して
それを配列にしてforすればいけそう、
ということらしい。
ただ回答だとDateでやっているので
やるべきことを見ながらチャレンジ🔥
<div class="c-calendar-container"></div>
このclassを見て
別のpluginを使用しているのかと
勘違いしていました、、、
他のpluginは使用したくないな〜
とか思っていた💥
単純にdocument.querySelectorで
指定できるようにしていただけですね💡
③dayjs/plugin/calendarを使用する
これはググったけど
使っている記事を全然みかけなかったので、
今回は使用しない方向でいきたい…
やるとしても入れ方が不明、
Plugin
@nuxtjs/dayjsを使用することになりそう。
パターン①
##質問者のコードをチェック
【JS】dayjsライブラリを用いて、指定した期間の日付を全て取得したいが
###現在日時の前後1ヶ月を出す
私は前後1ヶ月にしたかったので
質問者とは違う日時になります💡
2021-05-12_11:03
2021-07-12_11:03
前回は差分を出さずに
日時のオブジェクトなので
単純に日付だけを出せない❗️
ということで終了してしまいましたが、
よくよく見るとできそう👀笑
(ただのせっかち🏃♀️💥)
<template>
<div class="calendar">
<p>{{ beforeMonth }}</p>
<p>{{ afterMonth }}</p>
</div>
</template>
<script>
export default {
data() {
return {
now: this.$dayjs().locale('ja'),
}
},
computed: {
beforeMonth() {
return this.now.subtract(1, 'month').format('YYYY-MM-DD_HH:mm')
},
afterMonth() {
return this.now.add(1, 'month').format('YYYY-MM-DD_HH:mm')
},
},
}
</script>###差分を出す
diffではformatが使用できない、
する必要もないので
ここでは外します。
Difference
当然ですが、
5/12, 5/13のように期間ではなく
単純な差分なので61と出ます。
<template>
<div class="calendar">
<p>{{ totalNumber }}</p>
</div>
</template>
<script>
export default {
data() {
return {
now: this.$dayjs().locale('ja'),
}
},
computed: {
totalNumber() {
const beforeMonth = this.now.subtract(1, 'month')
const afterMonth = this.now.add(1, 'month')
return afterMonth.diff(beforeMonth, 'day')
},
},
}
</script>###繰り返す
ではその61日分を
1つずつ繰り返しながら
beforeMonthに
足していけば良いということですね💡
{ "0": "2021/05/12", "1": "2021/05/13", … }
となりました。
<template>
<div class="calendar">
<p>{{ totalNumber }}</p>
</div>
</template>
<script>
export default {
data() {
return {
now: this.$dayjs().locale('ja'),
}
},
computed: {
totalNumber() {
const beforeMonth = this.now.subtract(1, 'month')
const afterMonth = this.now.add(1, 'month')
const totalNumber = afterMonth.diff(beforeMonth, 'day')
const totalObject = new Object()
for (let i = 0; i < totalNumber; i++) {
totalObject[i] = beforeMonth.add(i, 'day')
totalObject[i] = totalObject[i].format('YYYY/MM/DD')
console.log(totalObject[i])
}
return totalObject
},
},
}
</script>オブジェクトにすると
プロパティの配列番号が邪魔で
扱いにくそうなので、
ひとまず形を変えてみます。
[ "2021/05/12_14:00", "2021/05/13_14:00", … ]
<template>
<div class="calendar">
<p>{{ totalNumber }}</p>
</div>
</template>
<script>
export default {
data() {
return {
now: this.$dayjs().locale('ja'),
}
},
computed: {
totalNumber() {
const beforeMonth = this.now.subtract(1, 'month')
const afterMonth = this.now.add(1, 'month').format('YYYY/MM/DD_HH:mm')
const totalNumber = afterMonth.diff(beforeMonth, 'day')
const array = []
for (let i = 0; i < totalNumber; i++) {
const num = beforeMonth.add(i, 'day')
array.push(num)
}
return array
},
},
}
</script>これで指定期間分の日時は表示できたものの、
カレンダーにするとなると
月日をformatで
管理しないといけないですね🤔💭
何か良い方法はないのか。。。
##ベストアンサーのコードをチェック
ということで、
ベストアンサーのコードも見て
きちんと意味を理解しておきます🎓
dayjsに置き換えてできるのであれば
そちらを進めますが、
NGなら素直にパターン②に移ります。
var d=new Date();
var start=d.setMonth(d.getMonth()-1);
var end=d.setMonth(d.getMonth()+2);
var count=(end-start)/1000/60/60/24+1;
var dd=Array(count).fill(null).map((x,y)=>(
z=new Date(start+y*60*60*24*1000),
Object.fromEntries(
[
["date",z.toLocaleString().split(" ").splice(0)[0]],
["week","日月火水木金土".split("")[z.getDay()]],
])
));
console.log(dd);⬇️このあたりは
前回の記事にあるため
そちらをご覧ください👀
new Date()
getMonth()
setMonth()
###読み解く
開始と終わりの差分を出すために
setMonthでミリ秒にする必要があり、
ミリ秒なので1000/60/60/24します。
こちらをみた方が早いですね🍀
1日86400000ミリ秒で割れば
日数が分かります💫
どうしてミリ秒を1000×60×60×24で割ったら日にちがでてくるのですか？
時間を秒にした一覧表
現在は6月なので、
const d = new Date()
これでSat Jun 12 2021
d.getMonth()で5が出て-1して4月
d.getMonth()で5が出て+2して7月
その差分を出して日付に変換すると61
+1すると62ですが理由が不明なので
一旦とばします✈️
あれ…❓
そもそも🔼で
質問者のコードを真似しながら
私は前後1ヶ月の
5月〜7月の差分を出して61でした。
ベストアンサーでは
4月〜7月の差分なのに
なぜ同じ61日分と出るのか…❓❓❓
この後のmap()などで
調整するのかもしれません。
そしてcountをArray()し、
fill()してmap()にします。
fill()
構文はarr.fill(value[, start[, end]])
この場合は
valueが0でstartが2, endが4なので
開始する2の後ろの
3, 4が0になるということですね👇
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));
⇨[1, 2, 0, 0]
引数が1つの場合は全てに反映されます。
const array1 = [1, 2, 3, 4];
console.log(array1.fill(6));
⇨[6, 6, 6, 6]
今回の場合はnullなので、
中身全部nullになりますね。
map()
構文はこちら
let new_array = arr.map(function callback( currentValue[, index[, array]]) {
// 新しい配列の要素を返す
}[, thisArg])
この例だと配列の中身をxとし
xに2を掛けて出すということですね
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
⇨Array [2, 8, 18, 32]
ここまでは良いのですが、
zが見当たらないとなってしまいました。
ReferenceError: z is not defined
ということで、
そこは置いておき、
わかるとこだけ抜き出して
dayjsに置き換えを試みる予定です🍀
まとめ
日時の操作は複雑で、
理解に時間がかかりそうです⏰笑
1度全体像を把握すれば
そのあとはスムーズにいけそうですが❗️
🎈 WPでも公開中です
https://wp.me/pc9NHC-1o5
この記事が気に入ったらサポートをしてみませんか？