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

[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.