useIlamyResourceCalendarContext

A React hook for accessing resource calendar context and controlling calendar state programmatically with resource-specific functionality.

Basic Usage

The useIlamyResourceCalendarContext hook provides access to the resource calendar's internal state and methods. It extends useIlamyCalendarContext with resource-specific functionality. It must be used within components that are descendants of the IlamyResourceCalendar component. 

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

// Via headerComponent prop
function CustomHeader() {
  const { currentDate, nextPeriod, prevPeriod, resources } = useIlamyResourceCalendarContext();

  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 />}
/>

// Via renderResource prop
function CustomResourceHeader(resource) {
  const { getResourceEvents } = useIlamyResourceCalendarContext();
  const resourceEvents = getResourceEvents(resource.id);

  return (
    <div className="custom-resource-header">
      <span>{resource.title}</span>
      <span className="badge">{resourceEvents.length} events</span>
    </div>
  );
}

<IlamyResourceCalendar
  resources={resources}
  events={events}
  renderResource={CustomResourceHeader}
/>

Return Values

The hook returns all properties from useIlamyCalendarContext plus the following resource-specific additions:

Resource-Specific Return Values

NameTypeDefaultDescription
resources
Resource[]—

Array of all resources in the calendar

getResourceEvents
(resourceId: string | number) => ResourceCalendarEvent[]—

Get all events for a specific resource

Examples

Resource Utilization Display

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

  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>
  )}
/>

Custom Resource Actions

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

  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 resource calendar context. Since IlamyResourceCalendar does not accept children, you must use this hook in descendant components that are rendered through the calendar's props like headerComponent or renderResource. 

// ❌ This will throw an error
function BadComponent() {
  // This component is not inside IlamyResourceCalendar context
  const { resources } = useIlamyResourceCalendarContext(); // Error!
  return <div>{resources.length}</div>;
}

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