Pro block
Calendar
A complete calendar: month, week and day views, several calendars you can show or hide, and events you draw, drag and resize.
Examples
A term's timetable
Drag across an empty stretch of the week to add an event, drag one to move it, or pull its bottom edge to change its length. Changes are kept in this browser.
Sep 27 – Oct 3, 2026
All day
Get it
Part of Sina UI Pro. Built from the free Button, Calendar, Checkbox,
Date picker, Dialog, Input, Segmented, Switch and Time field, with @internationalized/date for the dates.
Props
| Prop | Type | Default |
|---|---|---|
events | CalendarEvent[] (bindable) | required |
calendars | { id, name, color }[] | required |
view | 'month' | 'week' | 'day' (bindable) | 'week' |
date | CalendarDate (bindable) | today |
locale | string | 'en' |
An event is { id, title, calendar, start, end, allDay? }, with start and end as CalendarDateTime.
Keyboard
- New event opens the event form; every event is a button that opens it for editing.
- Date and time are set in the form, so nothing needs a pointer.
- Each day's heading, or its number in the month, opens that day.
Accessibility
- Events are read with their title, time and calendar.
- Adding, saving, moving and deleting are announced.
- The heading announces the range as you page through it.
- With reduced motion, views change without sliding.