Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vuetify4 v-calendarをちゃんと理解する
Search
kouki.miura
April 27, 2026
Programming
13
0
Share
Vuetify4 v-calendarをちゃんと理解する
Vuetify4のv-calendarについて、概要とポイントを説明するLT登壇資料です。
kouki.miura
April 27, 2026
More Decks by kouki.miura
See All by kouki.miura
VueSapporo#2
koukimiura
0
15
認証統合から始めるフロントエンドの機能単位開発 — マイクロサービス思想の適用
koukimiura
0
88
Fiberとは何か?PHPが“非同期言語”になった瞬間
koukimiura
0
66
VueエンジニアがReactを触って感じた_設計の違い
koukimiura
0
180
Laravel入門:最小構成で理解するMVC
koukimiura
0
100
VueSapporo#1
koukimiura
0
47
Vue.jsを10分で再定義する
koukimiura
1
55
なぜVue開発は速いのか?-Vite入門
koukimiura
0
74
Vueでつくるシングルページアプリケーション(SPA)入門
koukimiura
0
48
Other Decks in Programming
See All in Programming
ハンズオンで学ぶクラウドネイティブ
tatsukiminami
0
130
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
hadashia
2
550
UIの境界線をデザインする | React Tokyo #15 メイントーク
sasagar
2
360
属人化しないコード品質の作り方_2026.04.07.pdf
muraaano
0
190
The Less-Told Story of Socket Timeouts
coe401_
3
390
Going Multiplatform with Your Android App (Android Makers 2026)
zsmb
2
430
Running Swift without an OS
kishikawakatsumi
0
840
YJITとZJITにはイカなる違いがあるのか?
nakiym
0
220
AI時代のエンジニアリングの原則 / Engineering Principles in the AI Era
haru860
0
420
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
renaudmathieu
0
220
〜バイブコーディングを超えて〜 チームで実験し続けたAI駆動開発
tigertora7571
0
110
2026_04_15_量子計算をパズルとして解く
hideakitakechi
0
110
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
410
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
200
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
490
Accessibility Awareness
sabderemane
1
100
Statistics for Hackers
jakevdp
799
230k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
110
Prompt Engineering for Job Search
mfonobong
0
270
Exploring anti-patterns in Rails
aemeredith
3
320
Transcript
2026.04.27 / VueSapporo #2 三浦 恒樹 (MIURA KOUKI) / 医療ITエンジニア Vuetify4
v-calendarをちゃんと理解する
自己紹介 - ドゥウェル株式会社 に所属(マネージャー) - 医療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
INDEX - カレンダー実装つらくないですか? - Vuetify4 v-calendar - DEMO - 何がすごいのか?
- 主要API - slotが本体 - 注意点 - まとめ
カレンダー実装つらくないですか? ・月、週、4日、日 表示 ・日跨ぎ、時間 イベント ・祝日、営業日 ・PC、タブレット、スマホ Googleカレンダー
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昇格
DEMO
DEMO
DEMO
DEMO
DEMO
何がすごいのか?
主要API - v-model - 選択されている日付 → 月、週、日、4日、カテゴリ(日)表示の基準日 - props (33) - type
= 表示形式(month、week、day、4day、category) - events = イベント配列 - categories = カテゴリ配列 - locale = “ja-JP” - slots (10) - #day-label = 月表示の日付ラベル描画 - #event = 各表示のイベント描画
slotが本体
slotが本体
注意点 ・Issueに3件Bugが残存 ・うち2件はCSS関連(左記) ・もう1件は「start/end propsが利かない」
まとめ
ご清聴ありがとうございました。 5/23(土) 17:30~