[REACT] preset change handle

[bhagya]

I have start date and end Date component. ON change of start date and end date scheduler strat date and end should change based on date component selected value. when i change end date as nov 30 2026 then start date as sept 1 2026, preset change handler is executing. then change date from start date as sept 10 and end date no changes preset change handler is executing.
preset value is not changed but scheduler is showing value sept 10 to dec 10. on change of start date immediately end date of scheduler is shoifting initial date difference.
I have added zoom to date component selected dates but still preset change is executing .
as per attachment selected dates is different and scheduler date is different.
Note: Frist time date change sept 1 to nov 30 its working fine. next immediate change from sept 22 to nov 30 not working as expected

[marcio]

Hey bhagya,

Thanks for reaching out, and welcome to our forums!

Could you please provide a runnable test case showing how you update the dates and your Scheduler config (viewPreset, autoAdjustTimeAxis, any ViewPresetCombo settings), so we can debug properly?

In the meantime, you can try to set both dates together to avoid Scheduler recalculating span using scheduler.setTimeSpan(startDate, endDate). See setTimeSpan documentation.

[bhagya]

  const {
    resourcesData,
    eventsEndDate,
    eventsStartDate,
    resourceTimeRanges,
    handlePresetChange,
    weekStartDay,
    columns,
  } = props;
  

useEffect(() => {
    if (window.bryntum && window.bryntum.schedulerpro) {
      const { SchedulerPro } = window.bryntum.schedulerpro;
      const { PresetManager, CalendarModel } = window.bryntum.schedulerpro;


  const customCalendar = new CalendarModel({
    intervals: [
      {
        isWorking: true,
      },
    ],
    name: 'CustomCalendar',
  });
  schedulerInstance.current = new SchedulerPro({
    appendTo: schedulerRef.current,
    columns,
    createEventOnDblClick: false,
    endDate: eventsEndDate,
    eventLayout: 'stack',
    eventRenderer({ eventRecord, renderData, resourceRecord }) {
      return eventRecord.name;
    },

    features: {
      cellMenu: {
        items: {
          removeRow: false,
        },
        processItems(e) {
          props.handleCreateContextMenu(e);
        },
      },
      dependencies: false,
      eventDrag: true,
      eventDragCreate: false,
      eventMenu: {
        items: {
          copyEvent: false,
          cutEvent: false,
          deleteEvent: false,
          editEvent: false,
          eventColor: false,
          showDetails: false,
          splitEvent: false,
          unassignEvent: false,
        },
      },
      eventResize: true,
      eventTooltip: {
        hideOnDelegateChange: true,
        showOnClick: true,
        showOnHover: false,
      },
      nonWorkingTime: false,
      pan: true,
      resourceTimeRanges: true,
      scheduleMenu: {
        items: {
          addEvent: false, // on copy/paste cut paste, right click hide addevent.
        },
      },
      scheduleTooltip: false,
      timeRanges: true,
      tree: true,
    },
    presets: getSupportedPresets(),
    project: {
      calendar: customCalendar,
    },
    scrollEventPromise: true,
    subGridConfigs: {
      locked: {
        maxWidth: 420,
        minWidth: 210,
        overflowX: 'auto',
      },
    },
    resources: resourcesData,
    resourceTimeRanges,
    rowHeight: 35,
    startDate: eventsStartDate,
    timeAxis: {
      end: eventsEndDate,
      start: eventsStartDate,
    },
    timeAxisViewModel: {
      displayDateFormat: 'h:mm A',
    },
    viewPreset: {
      base: 'hourAndDay',
      tickWidth: 35,
    },
    weekStartDay,
  });
  schedulerInstance.current.setTimeSpan(
    eventsStartDate,
    eventsEndDate,
  );

  schedulerInstance.current.on({
    presetChange: (e) => {
      console.log('***************presetChange event:', e.preset.id);
      if (handlePresetChange) {
        handlePresetChange(e);
      }
    },

  });

  if (props.onSchedulerReady) {
    props.onSchedulerReady(schedulerInstance.current);
  }

  return () => {
    if (schedulerInstance.current && typeof schedulerInstance.current.destroy === 'function') {
      schedulerInstance.current.destroy();
      schedulerInstance.current = null;
    }
  };
}
  }, []);
  

from parent component getting eventStartDate(startdate) and eventEnddate(end)
preset handler is not working as expected

[tasnim]

Could you please share a runnable test case (app without node_modules folder that is runnable with npm i & npm start) that we can download/run locally and see what's wrong?