Can Scheduler be combined with D3.js inside React apps?

[emily.thorne91]

Are there examples of using Smart Scheduler with state management in JavaScript (like Redux, VUEx, etc.)? How do I sync scheduler state with global stores?

[Markov]

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/

[Author]

Posts