API Documentation

Calendar props

Name	Description
calendar	Calendar object returned by the useEventsCalendar hook
compact	Renders a more compact calendar
enableDragCreation	Enables drag event creation
events	Main array containing events to display in the calendar
isFetching	Activates a loading overlay. Useful for asynchronous data fetching
noHeader	Removes the default calendar header
onEventClick	Event click handler
onEventCreate	Event creation handler. Fires after event drag creation. Requires enableDragCreation
renderPopover	Render function for popovers bound to a calendar event. Used with onEventClick and onEventCreate to display events within a popover.
renderContextMenu	Render function for a context menu bound to a calendar event. Used with onEventClick and onEventCreate to bind actions to an event.
views	A subset of the array ['year', 'month', 'week', 'day']. Determines the view control in the default header

Calendar prop types

export interface EventsCalendarProps<T extends RawCalendarEventBase = RawCalendarEventBase> {
    calendar?: EventsCalendarObject;
    compact?: boolean;
    enableDragCreation?: boolean;
    events?: RawCalendarEvent<T>[];
    isFetching?: boolean;
    noHeader?: boolean;
    popoverZIndex?: number;
    views?: CalendarView[];
    onEventClick?: (props: EventClickArgs<T>) => void;
    onEventCreate?: (props: EventEditProps) => void;
    onEventReschedule?: (props: EventEditProps) => void;
    renderPopover?: (props: EventsCalendarPopoverProps) => ReactNode;
    renderContextMenu?: (props: EventsCalendarContextMenuProps) => ReactNode;
}

Calendar event object

export type RawCalendarEvent = {
  id?: number | null;
  title?: string;
  start?: string | number | Date | Dayjs;
  end?: string | number | Date | Dayjs;
  startTime?: string | null;
  endTime?: string | null;
  isAllDay?: boolean;
  groups?: { label: string; color: string }[];
}

The useEventsCalendar hook

With the useEventsCalendar hook, you can set the initial state of the calendar, as well as manage the calendar state externally. A common use-case is for creating custom header elements.

export type useEventsCalendarProps {
    initialDate?: string | number | Date | Dayjs;
    initialView?: CalendarView;
}

const calendar = useEventsCalendar({ initialDate: '01-Aug-2024', initialView: 'week' })

The hook returns a object containing the following properties:

export type EventsCalendarObject = {
    activeDate: dayjs.Dayjs;
    setActiveDate: Dispatch<SetStateAction<dayjs.Dayjs>>;
    view: CalendarView;
    setView: Dispatch<SetStateAction<CalendarView>>;
};

On this page