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.

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

function CalendarToolbar() {
  const {
    currentDate,
    view,
    setView,
    nextPeriod,
    prevPeriod,
    today,
    addEvent
  } = useIlamyCalendarContext();

  const handleAddEvent = () => {
    addEvent({
      id: Date.now().toString(),
      title: 'New Event',
      start: new Date(),
      end: new Date(Date.now() + 60 * 60 * 1000),
      backgroundColor: 'red',
      color: 'black'
    });
  };

  return (
    <div className="flex items-center gap-4">
      <button onClick={prevPeriod}>Previous</button>
      <button onClick={today}>Today</button>
      <button onClick={nextPeriod}>Next</button>
      
      <span>{currentDate.format('MMMM YYYY')}</span>
      
      <select value={view} onChange={(e) => setView(e.target.value)}>
        <option value="month">Month</option>
        <option value="week">Week</option>
        <option value="day">Day</option>
      </select>

      <button onClick={handleAddEvent}>Add Event</button>
    </div>
  );
}

Return Values

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

Return Values

Name	Type	Default	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`	`(event?: CalendarEvent, date?: Date) => void`	—	Open the event form modal
`closeEventForm`	`() => void`	—	Close the event form modal

Error Handling

The hook will throw an error if used outside of the calendar context.

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

// ✅ Correct usage
function App() {
  return (
    <IlamyCalendar events={events}>
      <GoodComponent />
    </IlamyCalendar>
  );
}

function GoodComponent() {
  // This works because it's inside IlamyCalendar
  const { currentDate } = useIlamyCalendarContext();
  return <div>{currentDate.format()}</div>;
}