![見出し画像](https://assets.st-note.com/production/uploads/images/54716214/rectangle_large_type_2_c50a887ec01bf5565809ffbe679ac716.png?width=800)
【Nuxt.js】開発ブログ:カレンダーを作成してみる①
🎈 WPでも公開中です
https://wp.me/pc9NHC-1hN
前置き
思い立ってやった系の記事です🐣💭
とりあえずチャレンジしてみよう!
シリーズ…😂笑
いつもの丁寧な解説ではなく、
こんなこと調べて
こういう手順で試してみた
という内容です💡
自分のメモ的なものですが、
初心者の方でも
開発する時のイメージとして
参考になるかもと思ったので残しておきます✍️
中級、上級者の方も
必要な部分だけピックアップして
参考にしていただければと思います🍀
##全体的なイメージ
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に使う値はこちらをご覧ください👀
<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>
##他の手段を考える
ということでこの辺が参考になりそうだなと。
【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>
dayjsの場合
formatを指定しないと
日本時間に適応されなかったので指定しました。
formatの指定方法はこちら
String + Format
⬇️localの設定方法は
こちらをご覧ください👀
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>
###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>
dayjsでもmonth()があるので
同じように4が返ってきます。
dayjsでもmonth()があるので
同じように4が返ってきます。
表示を「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>
###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>
Start of Time
このあたりを使えば
日付の表示なども
結構簡単にできそうです💡
まとめ
改めてdayjsが便利なんだなと
再確認しました。
遠回りしてしまいましたが、
次回はdayjsのdocumentだけを見ながら
やりたいことをポイント絞って
実装につなげていきます!
🎈 WPでも公開中です
https://wp.me/pc9NHC-1hN
この記事が気に入ったらサポートをしてみませんか?