Vuetify4 v-calendarをちゃんと理解する

Vuetify4のv-calendarについて、概要とポイントを説明するLT登壇資料です。

Transcript

1. 2026.04.27 / VueSapporo #2 三浦　恒樹 (MIURA KOUKI) / 医療ITエンジニア Vuetify4 v-calendarをちゃんと理解する
2. 自己紹介 - ドゥウェル株式会社 に所属（マネージャー） - 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 - TypeScript / Vue.js / Node.js / Java / C# / PHP - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 JBUG札幌 JavaDO ゆるWeb勉強会 えびてく クラメソ札幌IT勉強会（仮） AWS初心者LT会in札幌 札幌すごいAI会 札幌IT石狩鍋 hokkaido.js 函館本線沿線勉強会 VueSapporo さっぽろ医療IT勉強会 - コーディングBGM ラックライフ - Naru, 名前を呼ぶよ BLUE ENCOUNT - Survivor, ポラリス SHANK Dizzy Sun Fist
3. INDEX - カレンダー実装つらくないですか？ - Vuetify4 v-calendar - DEMO - 何がすごいのか？ - 主要API - slotが本体 - 注意点 - まとめ
4. カレンダー実装つらくないですか？ ・月、週、4日、日　表示 ・日跨ぎ、時間　イベント ・祝日、営業日 ・PC、タブレット、スマホ Googleカレンダー
5. Vuetify4 v-calendar Vuetify=Vue.js向けのUIコンポーネント集 2026.02.24 v4.0.0 https://vuetifyjs.com/ja/wireframes/inbox/ https://vuetifyjs.com/ja/components/calendars/ v-calendar=FullCalendarライクなコンポーネント 2025.11.25 v3.11.0　でLabsからPromotion昇格
6. DEMO
7. DEMO
8. DEMO
9. DEMO
10. DEMO
11. 何がすごいのか？
12. 主要API - v-model - 選択されている日付　→　月、週、日、4日、カテゴリ(日)表示の基準日 - props (33) - type = 表示形式（month、week、day、4day、category） - events = イベント配列 - categories = カテゴリ配列 - locale = “ja-JP” - slots (10) - #day-label = 月表示の日付ラベル描画 - #event = 各表示のイベント描画
13. slotが本体
14. slotが本体
15. 注意点 ・Issueに3件Bugが残存 ・うち2件はCSS関連（左記） ・もう1件は「start/end propsが利かない」
16. まとめ
17. ご清聴ありがとうございました。 5/23(土) 17:30～