Calendar
A calendar places events against time itself: the position of a block says when it happens, and its size says how long it lasts. Orvain's Calendar family ships three views of one component, a day behind a thirteen-hour axis with a line that tracks the current time, a week of seven day-of-week columns where overlapping events stack in a ranked order, and a month grid with out-of-month days hatched, today badged, and event chips that truncate to fit their cell. Five headers sit on top of any of them: one with notifications and an overflow menu, one with a filter, one with search and a month picker, one with a tear-off today tile and quick add, and one with a scrolling strip of days.
Overlap is the problem the whole component is arranged around. Two events at ten o'clock have to share a column without either one disappearing, and once five of them start at ten the view must choose between shrinking every card past reading and hiding some behind a count. A month cell cannot express duration at all, which makes the month view a density map rather than a schedule: it answers which days are busy, and anyone hunting for a clash has to be sent to the week or the day.
Daily
Best for
Day schedules, dispatch boards, appointment logs
Anatomy
Search and Add Event header · date nav and view switcher · a 13-hour time axis · a live current-time line
Team calendar
Search the day, add an event, or click an empty slot to book it.
Weekly
Best for
Team rosters, booking grids, multi-day planning
Anatomy
Seven day-of-week columns · a today marker · overlapping event cards ranked by a z-index ladder
Team calendar
Search the week, add an event, or click an empty slot to book it.
Monthly
Best for
Availability overviews, editorial calendars, billing cycles
Anatomy
A five-to-six row month grid · out-of-month hatch fill · a today badge · truncating event chips
Team calendar
Search the month, add an event, or open a day to see its hours.
Header with actions
Best for
Team calendars, shared schedules, workspaces with notifications
Anatomy
Prev/next pair · range with a Today link back · sliding Daily/Weekly/Monthly switch · Manage calendars, notifications and an overflow menu
Header with filter
Best for
Filtered schedules, event-type views, booking calendars
Anatomy
Range framed by its own arrows · Today link · sliding view switch · Filter with a count badge and event-type panel
Header with search
Best for
Archives, long-range planning, calendars people search more than browse
Anatomy
Range with a month-and-year picker · sliding view switch · Filter · a search field whose funnel turns into a clear button
Header with date tile
Best for
Personal planners, booking apps, dashboards that open on today
Anatomy
A tear-off today tile · range over a Today caption · search that opens in place · Today button group · view menu · Add Event quick-add
Header with day strip
Best for
Mobile agendas, class timetables, picking a day without a month grid
Anatomy
Range over a rule · flush Daily/Weekly/Monthly group · a scrolling strip of days whose week lights up around the pick
Using Calendar
Reach for it when
- Schedules where a clash is the thing to spot: rooms, staff, equipment.
- Dispatch and appointment work driven by the current hour, where a now line says where you are in the day.
- A month-at-a-glance read of how loaded the coming weeks are.
- A team's week, where each day or resource holds its own column.
Reach for something else when
- Choosing a date for a form field. A date picker is smaller, and the events would only be noise around the answer.
- Work carrying no real time, such as a backlog. A board orders by stage and a list by priority.
- Long spans with dependencies between them. A Gantt chart shows a six-week task and what it blocks; a month grid cannot.
Where it shows up
Clinic day
Appointments down an hour axis, with the current-time line telling the front desk how far behind the morning has slipped. The day view is the only one where a fifteen-minute gap is visible as a gap.
Team roster
A week of shifts, a column per day, so the hole on Thursday afternoon is obvious before anyone adds up hours. Overlapping shifts stack in order instead of hiding one another.
Publishing month
Scheduled posts across a month, where the question is whether next week is overloaded rather than what time anything goes out. Chips truncate, because the title is a label here, not the content.
Room availability
Bookable space shown as the hours already taken. Whoever is booking reads the empty space, so free time has to be as legible as busy time, not just the absence of a card.
Questions
What is the difference between a calendar and a date picker?
A date picker is an input. It exists to return a date to a form and closes as soon as it has one. A calendar is a view: it shows what already occupies the time, stays open while you work, and usually supports creating and moving events. They share a month grid, which is why they get confused, but only one of them carries a value.
How should a calendar handle overlapping events?
In day and week views, split the column into side-by-side lanes and keep the earliest event leftmost, so the layout stays stable as events are added. Cap the lanes and collapse the remainder behind a count, since four cards in one hour are already too narrow to read. In a month cell, show the chips that fit and put the rest behind a link that opens the day.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPCalendar
A calendar places events against time itself: the position of a block says when it happens, and its size says how long it lasts. Orvain's Calendar family ships three views of one component, a day behind a thirteen-hour axis with a line that tracks the current time, a week of seven day-of-week columns where overlapping events stack in a ranked order, and a month grid with out-of-month days hatched, today badged, and event chips that truncate to fit their cell. Five headers sit on top of any of them: one with notifications and an overflow menu, one with a filter, one with search and a month picker, one with a tear-off today tile and quick add, and one with a scrolling strip of days.
Overlap is the problem the whole component is arranged around. Two events at ten o'clock have to share a column without either one disappearing, and once five of them start at ten the view must choose between shrinking every card past reading and hiding some behind a count. A month cell cannot express duration at all, which makes the month view a density map rather than a schedule: it answers which days are busy, and anyone hunting for a clash has to be sent to the week or the day.
Daily
Best for
Day schedules, dispatch boards, appointment logs
Anatomy
Search and Add Event header · date nav and view switcher · a 13-hour time axis · a live current-time line
Team calendar
Search the day, add an event, or click an empty slot to book it.
Weekly
Best for
Team rosters, booking grids, multi-day planning
Anatomy
Seven day-of-week columns · a today marker · overlapping event cards ranked by a z-index ladder
Team calendar
Search the week, add an event, or click an empty slot to book it.
Monthly
Best for
Availability overviews, editorial calendars, billing cycles
Anatomy
A five-to-six row month grid · out-of-month hatch fill · a today badge · truncating event chips
Team calendar
Search the month, add an event, or open a day to see its hours.
Header with actions
Best for
Team calendars, shared schedules, workspaces with notifications
Anatomy
Prev/next pair · range with a Today link back · sliding Daily/Weekly/Monthly switch · Manage calendars, notifications and an overflow menu
Header with filter
Best for
Filtered schedules, event-type views, booking calendars
Anatomy
Range framed by its own arrows · Today link · sliding view switch · Filter with a count badge and event-type panel
Header with search
Best for
Archives, long-range planning, calendars people search more than browse
Anatomy
Range with a month-and-year picker · sliding view switch · Filter · a search field whose funnel turns into a clear button
Header with date tile
Best for
Personal planners, booking apps, dashboards that open on today
Anatomy
A tear-off today tile · range over a Today caption · search that opens in place · Today button group · view menu · Add Event quick-add
Header with day strip
Best for
Mobile agendas, class timetables, picking a day without a month grid
Anatomy
Range over a rule · flush Daily/Weekly/Monthly group · a scrolling strip of days whose week lights up around the pick
Using Calendar
Reach for it when
- Schedules where a clash is the thing to spot: rooms, staff, equipment.
- Dispatch and appointment work driven by the current hour, where a now line says where you are in the day.
- A month-at-a-glance read of how loaded the coming weeks are.
- A team's week, where each day or resource holds its own column.
Reach for something else when
- Choosing a date for a form field. A date picker is smaller, and the events would only be noise around the answer.
- Work carrying no real time, such as a backlog. A board orders by stage and a list by priority.
- Long spans with dependencies between them. A Gantt chart shows a six-week task and what it blocks; a month grid cannot.
Where it shows up
Clinic day
Appointments down an hour axis, with the current-time line telling the front desk how far behind the morning has slipped. The day view is the only one where a fifteen-minute gap is visible as a gap.
Team roster
A week of shifts, a column per day, so the hole on Thursday afternoon is obvious before anyone adds up hours. Overlapping shifts stack in order instead of hiding one another.
Publishing month
Scheduled posts across a month, where the question is whether next week is overloaded rather than what time anything goes out. Chips truncate, because the title is a label here, not the content.
Room availability
Bookable space shown as the hours already taken. Whoever is booking reads the empty space, so free time has to be as legible as busy time, not just the absence of a card.
Questions
What is the difference between a calendar and a date picker?
A date picker is an input. It exists to return a date to a form and closes as soon as it has one. A calendar is a view: it shows what already occupies the time, stays open while you work, and usually supports creating and moving events. They share a month grid, which is why they get confused, but only one of them carries a value.
How should a calendar handle overlapping events?
In day and week views, split the column into side-by-side lanes and keep the earliest event leftmost, so the layout stays stable as events are added. Cap the lanes and collapse the remainder behind a count, since four cards in one hour are already too narrow to read. In a month cell, show the chips that fit and put the rest behind a link that opens the day.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
