useIlamyCalendarContext

A React hook for accessing calendar context and controlling calendar state programmatically. Works with both IlamyCalendar and IlamyResourceCalendar — when used inside a resource calendar, additional resource-specific properties are available.

Basic Usage

The useIlamyCalendarContext hook provides access to the calendar’s internal state and methods. It must be used within components that are descendants of the IlamyCalendar component.

Basic Usage

import { useIlamyCalendarContext } from '@ilamy/calendar';

// Method 1: Via headerComponent prop
function CustomHeader() {
  const { currentDate, nextPeriod, prevPeriod } = useIlamyCalendarContext();

  return (
    <div>
      <button onClick={prevPeriod}>Previous</button>
      <span>{currentDate.format('MMMM YYYY')}</span>
      <button onClick={nextPeriod}>Next</button>
    </div>
  );
}

<IlamyCalendar
  events={events}
  headerComponent={<CustomHeader />}
/>

// Method 2: Via renderEvent prop
function CustomEvent(event) {
  const { deleteEvent, updateEvent } = useIlamyCalendarContext();

  return (
    <div className="custom-event">
      <span>{event.title}</span>
      <button onClick={() => deleteEvent(event.id)}>Delete</button>
    </div>
  );
}

<IlamyCalendar
  events={events}
  renderEvent={CustomEvent}
/>

Return Values

The hook returns an object with the following properties and methods:

Property	Type	Description
currentDate	dayjs.Dayjs	The currently displayed date/month in the calendar view
view	'month' | 'week' | 'day' | 'year'	The current calendar view mode
events	CalendarEvent[]	Array of all calendar events
isEventFormOpen	boolean	Whether the event form modal is currently open
selectedEvent	CalendarEvent | null	The currently selected event, if any
selectedDate	Date | null	The currently selected date, if any
firstDayOfWeek	WeekDays	The first day of the week setting
setCurrentDate	(date: dayjs.Dayjs) => void	Navigate to a specific date/month
selectDate	(date: Date) => void	Select a specific date
setView	(view: CalendarView) => void	Change the calendar view mode
nextPeriod	() => void	Navigate to the next period (month/week/day)
prevPeriod	() => void	Navigate to the previous period (month/week/day)
today	() => void	Navigate to today’s date
addEvent	(event: CalendarEvent) => void	Add a new event to the calendar
updateEvent	(id: string, updates: Partial<CalendarEvent>) => void	Update an existing event
deleteEvent	(id: string) => void	Delete an event from the calendar
openEventForm	(eventData?: Partial<CalendarEvent>) => void	Open the event form modal with optional pre-populated data
closeEventForm	() => void	Close the event form modal

Resource Calendar

When used inside IlamyResourceCalendar, the hook returns all the properties above plus resource-specific additions.

Resource-Specific Return Values

Property	Type	Description
resources	Resource[]	Array of all resources in the calendar
getResourceEvents	(resourceId: string | number) => CalendarEvent[]	Get all events for a specific resource

Resource Calendar Usage

Via headerComponent

import { useIlamyCalendarContext } from '@ilamy/calendar';

function CustomHeader() {
  const { currentDate, nextPeriod, prevPeriod, resources } = useIlamyCalendarContext();

  return (
    <div>
      <button onClick={prevPeriod}>Previous</button>
      <span>{currentDate.format('MMMM YYYY')}</span>
      <button onClick={nextPeriod}>Next</button>
      <div>Resources: {resources.length}</div>
    </div>
  );
}

<IlamyResourceCalendar
  resources={resources}
  events={events}
  headerComponent={<CustomHeader />}
/>

Resource Utilization Display

Show Resource Booking Stats

function ResourceStats({ resourceId }) {
  const { getResourceEvents, currentDate } = useIlamyCalendarContext();

  const events = getResourceEvents(resourceId);
  const todayEvents = events.filter(event =>
    event.start.isSame(currentDate, 'day')
  );

  return (
    <div className="resource-stats">
      <div>Total Events: {events.length}</div>
      <div>Today: {todayEvents.length}</div>
    </div>
  );
}

<IlamyResourceCalendar
  resources={resources}
  events={events}
  renderResource={(resource) => (
    <div>
      <span>{resource.title}</span>
      <ResourceStats resourceId={resource.id} />
    </div>
  )}
/>

Quick Event Creation

Quick Event Creation per Resource

function ResourceActions({ resource }) {
  const { addEvent, currentDate } = useIlamyCalendarContext();

  const createQuickEvent = () => {
    const newEvent = {
      id: `event-${Date.now()}`,
      title: 'Quick Booking',
      start: currentDate.hour(9).minute(0),
      end: currentDate.hour(10).minute(0),
      uid: `event-${Date.now()}@company.com`,
      resourceId: resource.id,
    };
    addEvent(newEvent);
  };

  return (
    <div className="resource-actions">
      <span>{resource.title}</span>
      <button onClick={createQuickEvent}>Quick Book</button>
    </div>
  );
}

<IlamyResourceCalendar
  resources={resources}
  events={events}
  renderResource={(resource) => <ResourceActions resource={resource} />}
/>

Error Handling

The hook will throw an error if used outside of the calendar context. Since IlamyCalendar and IlamyResourceCalendar do not accept children, you must use this hook in descendant components that are rendered through props like headerComponent, renderEvent, or renderResource.

Context Usage

// ❌ This will throw an error
function BadComponent() {
  // This component is not inside a calendar context
  const { currentDate } = useIlamyCalendarContext(); // Error!
  return <div>{currentDate.format()}</div>;
}

// ❌ This won't work - neither calendar accepts children
function App() {
  return (
    <IlamyCalendar events={events}>
      <GoodComponent /> {/* This won't render */}
    </IlamyCalendar>
  );
}