V-Calendar カレンダー

CDN
公式サイトに,書いてあるとおりだと、勝手にバージョンアップ後動かなくなった。
やはり、CDNをバージョン指定無しでつかうのは怖い！！
　動作確認バージョンは↓

<script src='https://unpkg.com/v-calendar@1.0.8/lib/v-calendar.umd.min.js'></script>

カレンダーを横に並べたい時
:columns="2"

ナビゲーションを非表示にする
nav-visibility="hidden"

カレンダーを横に並べたい時
参考 「V-Calendar」の日付の入力制限する方法

available-dates="{months:[9,10] }" 

カレンダー機能の時は<v-calendar>
datepickerの時は<v-date-picker>

カレンダーヘッダーを変更

<v-date-picker 
	mode="multiple" 
	is-required
	is-inline
	nav-visibility="hidden"
	:available-dates="{months:[<?php 
		echo $call_month;
			?>] }" 
	v-model="repeat_day"
		>
	<template slot='header-title' slot-scope='page'>
      {{page.yearLabel}}年{{page.monthLabel}}
    </template>
		</v-date-picker>

https://vcalendar.io/

「V-Calendar」の使い方

イベントカレンダーとして利用　通常のスケジュール

カレンダーの表示年月をWatchして、データを読み込めばいいのだが、うまく取得できず、断念。(T_T)

    <v-calendar ref="calendar" is-expanded>
    <template slot='header-title' slot-scope='props'>
      {{props.yearLabel}}年{{props.monthLabel}}<!--　{{props.key}}-->
			
    </template>
    <template slot='day-content' slot-scope='props'>
      <div class="cell-header">
        {{props.day.day}}
      </div>
      <div class="cell-content">
      <template 
      v-if="dateList.some(date => date.ymd === dateToYYYYMMDD(props.day.date))">
        <div 
        class="cell-content-line" 
        v-for="content in getContentFromKey(dateToYYYYMMDD(props.day.date))" 
        v-bind:key="content">
          {{content}}
        </div>
        </template>
      </div>
    </template>

    </v-calendar>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src='https://unpkg.com/v-calendar'></script>
<script>

var app = new Vue({
	 el: '#content',
	 data() {
    return {
      dateList: [
        {ymd: '20200923', contents: ['髪を切る','面談','靴を買う']},
        {ymd: '20200914', contents: ['結婚式']},
        {ymd: '20200901', contents: ['妹の誕生日']},
        {ymd: '20200817', contents: ['海に行く！', '野球の練習']}
      ]
    }
	 },
	mounted() {
		const calendar = this.$refs.calendar;
		console.log(calendar.data.pages[0].key);
},
	methods: {
     dateToYYYYMMDD: function(date) {
      let y = date.getFullYear();
      let m = ('00' + (date.getMonth()+1)).slice(-2);
      let d = ('00' + date.getDate()).slice(-2);
      let result = y + '' + m + '' + d;
      return result;
    },
    getContentFromKey: function(key) {
      const target = this.dateList.find((date) => {
        return (date.ymd === key);
      })
      return target.contents;
    }
  }
	
 })	
	</script>