Controlled Mode

React Scheduler Pro supports both controlled and uncontrolled modes, just like native React form elements.

Uncontrolled (Default)

By default, the scheduler manages its own internal state for navigation and view switching:

// Uncontrolled — scheduler manages state internally
<Scheduler
  events={events}
  fields={fields}
  view="week"
  selectedDate={new Date()}
/>

To control the selected date from your parent component, provide both selectedDate and onNavigate:

const [date, setDate] = useState(new Date());

<Scheduler
  events={events}
  fields={fields}
  selectedDate={date}
  onNavigate={({ date: newDate, start, end, view }) => {
    setDate(newDate);
    // Optionally fetch events for the new date range
    fetchEvents(start, end);
  }}
/>;

When both selectedDate and onNavigate are provided, the scheduler will always reflect the parent's selectedDate prop. Clicking next/previous will call onNavigate but won't change the internal date — your parent component is in control.

Controlled View

Similarly, to control which view is active:

const [view, setView] = useState('week');

<Scheduler
  events={events}
  fields={fields}
  view={view}
  onView={({ view: newView }) => {
    setView(newView);
  }}
/>;

Full Controlled Example

function MyCalendar() {
  const [events, setEvents] = useState([]);
  const [date, setDate] = useState(new Date());
  const [view, setView] = useState('week');

  const handleNavigate = ({ date, start, end, view }) => {
    setDate(date);
    // Fetch events for the visible range
    api.getEvents(start, end).then(setEvents);
  };

  return (
    <Scheduler
      events={events}
      fields={{
        id: '_id',
        subject: 'title',
        start: 'startDate',
        end: 'endDate',
      }}
      selectedDate={date}
      onNavigate={handleNavigate}
      view={view}
      onView={({ view }) => setView(view)}
    />
  );
}

When to Use Controlled Mode

URL sync: Keep the calendar date in sync with the URL query params
Server-side data: Fetch events when the visible date range changes
External controls: Add custom navigation buttons outside the scheduler
State persistence: Save and restore the user's last viewed date/view

Controlled Mode

Uncontrolled (Default)

Controlled Navigation

Controlled View

Full Controlled Example

When to Use Controlled Mode