Hi,

You can use Smart Scheduler with state management libraries like Redux, Vuex, or even React’s useReducer to keep the scheduler in sync with your global store. The key idea is that the scheduler’s data and settings are treated as part of your app’s state, and any changes are dispatched to the store. Let me break it down for different scenarios.

Example with Redux:

import React, { useEffect, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Scheduler } from "smart-webcomponents-react/scheduler";
import { addEvent, updateEvent, removeEvent } from "./schedulerSlice";

export default function SchedulerWithRedux() {
  const dispatch = useDispatch();
  const events = useSelector(state => state.scheduler.events);
  const schedulerRef = useRef(null);

  // Sync scheduler changes to Redux
  const handleEventChange = (event) => {
    const { type, eventDetails } = event.detail;
    if (type === 'add') dispatch(addEvent(eventDetails));
    if (type === 'update') dispatch(updateEvent(eventDetails));
    if (type === 'delete') dispatch(removeEvent(eventDetails));
  };

  useEffect(() => {
    const scheduler = schedulerRef.current;
    scheduler.addEventListener('change', handleEventChange);
    return () => scheduler.removeEventListener('change', handleEventChange);
  }, []);

  return (
    <Scheduler
      ref={schedulerRef}
      dataSource={events}
      view="week"
      views={['day', 'week', 'month']}
      dateCurrent={new Date()}
    />
  );
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/