Forms and input/Calendar (AppCalendar)

Calendar (AppCalendar)

● Needs Review Web Nuxt 4 + Mobile React Native

Komponen kalender tanggal interaktif untuk memilih jadwal try out akbar, deadline pendaftaran, atau filter periode laporan skor.

<AppCalendar />

Pemilihan tanggal tunggal, tampilan penuh

Pakai AppCalendar ketika memilih tanggal adalah tugas utama layar itu — deadline pendaftaran, jadwal try out akbar, filter periode laporan skor — bukan sekadar satu field di tengah formulir panjang. Untuk jadwal try out yang aktif, tampilkan indikator titik pada tanggal yang memiliki sesi berjalan, dan jangan izinkan pemilihan tanggal lampau untuk jadwal yang akan datang: kedua hal itu mencegah siswa salah pilih tanggal yang sudah lewat atau melewatkan sesi yang sedang dibuka.

Calendar Playground

MinSenSelRabKamJumSab
------
Terpilih:2026-08-19

Rentang tahun jauh ke belakang (mis. tanggal lahir)

Tahun awal tidak lagi hardcode — secara default komponen membuka rentang 100 tahun ke belakang dari tahun berjalan sampai 10 tahun ke depan, dan bisa diperluas lagi lewat prop min-year/max-year. Klik label tahun di header, lalu pakai tombol ‹ Lebih lama / Lebih baru › untuk berpindah per 12 tahun — cocok untuk field tanggal lahir yang perlu menjangkau puluhan tahun ke belakang.

Contoh: Tanggal Lahir (min-year=1900)

MinSenSelRabKamJumSab
--
Terpilih:1990-05-12
Butuh detail props, events, dan slot?