Calendar

Opening your calendar…

Choose a date → create or edit an event → organize the schedule → export

Inside the interface

Move between the month, a timed week, a single day and an agenda. Create or edit events, organize calendars, and repeat a schedule. Search finds events across the calendar, while import and export let you move supported iCalendar records between tools. Desktop events can be dragged to a new time; a focused day agenda keeps the phone layout readable.

Events and calendar settings stay in this browser. Import and export use .ics files; no account, invitations or calendar sync service is connected.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Install the package

npm install @noorddev/vlak-react

import "@noorddev/vlak-react/css";

Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

Button and Icon navigate dates, switch views and open events. Checkbox controls calendar visibility, while Input searches the actual event records.
Calendar popover edits dates and times with a keyboard-accessible month grid. Input, Native select and Textarea edit calendars, recurrence, location and notes. Dialog keeps event editing and recurring-event decisions within the working calendar.
The custom month grid, timed week and day views, and agenda share the same local records. Desktop dragging changes an event’s schedule; validated browser storage and iCalendar files preserve actual event data.
On mobile, a focused day agenda replaces the wide time grid. Date navigation, calendar filters, search and event creation remain reachable. The event editor uses the available screen width, preserving the selected day and saved records when returning to the agenda or opening fullscreen preview.