Calendar View

Multi-view calendar with day, week, and month modes

SaaSCalendar

Overview

CalendarView provides a complete calendar interface with day, week, and month view modes. It displays events with color coding, supports date navigation, and can be configured with a specific timezone. Includes loading and empty states.

Usage

import { CalendarView } from "@leanicon/web-builder-library/saas";

const events = [
  {
    id: "1",
    title: "Team Meeting",
    startTime: new Date(2026, 2, 25, 10, 0).toISOString(),
    endTime: new Date(2026, 2, 25, 11, 30).toISOString(),
    color: "blue",
  },
  {
    id: "2",
    title: "Project Review",
    startTime: new Date(2026, 2, 25, 14, 0).toISOString(),
    endTime: new Date(2026, 2, 25, 15, 0).toISOString(),
    color: "green",
  },
];

<CalendarView
  events={events}
  defaultViewMode="week"
  onEventClick={(event) => console.log("Clicked:", event.id)}
  onDateChange={(date) => console.log("Date:", date)}
/>;

Variants

Week View (Default)

October 2026

8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM

Week View (Dark)

October 2026

8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM

Day View

Friday, October 2, 2026

8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM

Month View

October 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Loading

October 2026

No Events

October 2026

8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM

With Timezone

October 2026

8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM

Props

NameTypeDefaultRequiredDescription
eventsCalendarEvent[]—YesEvents to display on the calendar
selectedDatestring—NoCurrently selected date (controlled)
defaultSelectedDatestring—NoDefault selected date (uncontrolled)
viewModeenum—NoCurrent view mode (controlled)
defaultViewModeenumweekNoDefault view mode (uncontrolled)
loadingbooleanfalseNoWhether component is in loading state
minDatestring—NoMinimum selectable date
maxDatestring—NoMaximum selectable date
weekStartsOnenum0NoFirst day of week (0=Sunday, 1=Monday)
dayStartHournumber8NoStart hour for day/week views (0-23)
dayEndHournumber18NoEnd hour for day/week views (0-23)
maxEventsPerDaynumber3NoMaximum events per day in month view
timezonestring—NoTimezone for display (IANA timezone string)
classNamestring—NoCustom class name
onEventClick((event: CalendarEvent) => void)—NoCalled when an event is clicked
onSlotClick((startTime: string, endTime: string) => void)—NoCalled when a time slot is clicked (for creating new bookings)
onDateChange((date: string) => void)—NoCalled when selected date changes
onViewModeChange((mode: CalendarViewMode) => void)—NoCalled when view mode changes
onRangeChange((range: DateRange) => void)—NoCalled when visible date range changes