Vue.jsでシンプルなカレンダーコンポーネント作ってみた
Posted: 2021.06.27 / Category: javascript / Tag: Vue
Vueのリハビリをかねて簡単なカレンダーコンポーネントを作ってみました。
Sponsored Link
ソースファイルは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 | 曜日のラベル | [“日”, “月”, “火”, “水”, “木”, “金”, “土”] |
