shadcn.io is not affiliated with official shadcn/ui
Multi Calendar Block for Vue
A day view that layers four calendars as lanes or merged into one column, with chips that show or hide each calendar, an Overlap label where events collide and a Now line at the fixed time.
Installation
Overview
Layer several calendars in one view with this multi calendar for Vue with Ark UI. A framed window with a plus mark on each corner holds a top bar with the day, previous and next buttons that move across three typed days (Tuesday 13 to Thursday 15 October 2026) and a Segment Group for Lanes and Merged. Under it, a row of chips, one Toggle for each calendar (Work, Personal, Team and Holidays), shows or hides that calendar with its pattern, its name, how many events it has that day and an eye. In Lanes each calendar has its own column over 08:00 to 18:00; in Merged they fold into one column where events from different calendars that collide sit side by side and carry the word Overlap. Events are buttons that name their title, time, calendar and place, and a line drawn at 09:30 on the fixed "now" marks the time. Only the grid scrolls, with a sticky row of calendar names and a sticky column of hours, and on a phone the lanes scroll sideways. It's built from Segment Group, Toggle, Button, Badge, Empty and Guides, with a CSS entrance only. For calendar apps, scheduling tools and any view that overlays more than one calendar.
FAQ
How do I add my calendars and events?
Edit CALENDARS and EVENTS. Each calendar has an id, a name and a pattern (solid, outline, hatched or dotted); each event has an ISO date, an id, a title, 24-hour start and end times, a place and the calendar it belongs to. Times are wall-clock times in the place the calendar is for. DAYS lists the days the arrows move between.
How are overlapping events found?
layoutOf sorts a column's events by start time and gives each one the first side-by-side slot that is free, so events that share any time share a cluster and split its width. A cluster of two or more gets the word Overlap, a layers icon and a note in the event's accessible name. Nothing is colored: the calendars keep their patterns.
How do the calendar chips work?
Each chip is a toggle button, pressed when its calendar is shown. Hiding a calendar removes its lane, or its events in Merged, and the chip keeps its count so you know what is hidden. If every calendar is hidden the grid shows an empty state with a way back, and the window never changes height.
Where does the Now line come from?
Nothing in the block reads the clock. AS_OF is the one moment the block treats as now, and the line sits at its time on that day only. To follow the real time, set AS_OF from your own clock and keep the rest.