useIlamyCalendarContext

A React hook for accessing calendar context and controlling calendar state programmatically.

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

Error Handling

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

Context Usage

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

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