ソースファイルはGitHubに置いてあります。
Vue.MiniCalendar

html

Vue.jsの他にAxiosも使用しているので読み込んでください。

index.xml

<!DOCTYPE html>
<html lang="ja">
	<head>
		<link rel="stylesheet" href="mini-calendar.css">
	</head>
	<body>
		<div id="app">
			<div class="container">
				<mini-calendar />
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
		<script src="mini-calendar.js"></script>
		<script>
		var app = new Vue({
			el: '#app'
		});
		</script>
	</body>
</html>

イベントの表示

デフォルト設定ではhtmlと同階層に「data」というディレクトリを作成、その下に「年」のディレクトリを作り「月.json」というファイル名で作成します。
例えば2021年7月のデータなら「/data/2021/7.json」のようになります。

data/2021/7.json

{
	"events": [
		{
			"day": 2,
			"title": "イベント",
			"type": "blue"
			
		},{
			"day": 6,
			"title": "イベント2",
			"type": "red"
		},{
			"day": 23,
			"title": "イベント3",
			"type": "green"
		}
	],
	"holidays": [19]
}

Props

設定はPropsで変更することができます。

Props 説明 値
data-path イベントデータのパス ‘./data/’
current-date 表示するカレンダーの月 ‘2021/6’
week-type 曜日のラベル [“日”, “月”, “火”, “水”, “木”, “金”, “土”]