How to use gantt-schedule-timeline-calendar in a redux application?

[gadyonysh]

Your question and description of the problem goes here
Hi!
I have a React-Redux application and I want to integrate the "gantt-schedule-timeline-calendar" into it. Can you please advise me on the best way to manage the calendar's state using Redux? Specifically, I am interested in how to set the initial state of the calendar, update it based on changes in Redux data, and dispatch actions in response to user interactions.
Thank you for your help.

[neuronetio]

GSTC works in a separate internal ecosystem, so you need to listen to state or connect to plugin events to be notified about changes or events.

You can listen events from item movement plugin or item resizing plugin and then dispatch your events to redux if you want.

If you need you can listen state changes directly.
For example when user is scrolling through a timeline you can listen scroll position changes or time changes.

First of all save your state object somewhere and then

// Generate GSTC state from configuration object
const state = GSTC.api.stateFromConfig(config);

// for testing
globalThis.state = state;

const element = document.getElementById('gstc');
//@ts-ignore
element.addEventListener('gstc-loaded', (ev) => {
  // @ts-ignore
  globalThis.dispatchEvent(new Event('gstc-loaded', ev.target));
});

// Mount the component
const app = (globalThis.gstc = GSTC({
  // @ts-ignore
  element,
  state,
}));

// subscribe horizontal scroll
const usubscribeHorizontalScroll = state.subscribe('config.scroll.horizontal', horizontalScroll => {
  console.log(horizontalScroll);
  // dispatch event to your redux store here if you need
});

// subscribe time changes

const unsubscribeChartTime = state.subscribe('config.chart.time', chartTime => {
  console.log(chartTime);
  // dispatch event to your redux store here if you need
});

[gadyonysh]

@neuronetio Thank you very much. It was very helpful.