Need help with Syncfusion Schedule (Timeline Grouping) – Resources render but Events sometimes disappear when switching custom filters and Next/Prev/T

[Nam Nguyen]

Hi Syncfusion team,

• Library: @syncfusion/ej2-react-schedule
• Framework: Next.js/React
• View: Timeline Grouping (e.g., TimelineWeek)

Context:

I’m not using the default Schedule toolbar. Instead, I use custom buttons: NextWeek, PreviousWeek, Today (and some custom filters). Each time I change week/filter, I call an API and run the result through a useCalendarMapper hook to sort/group/map data as needed. The hook returns calendarData:

export interface CalendarData {

resources: CalendarResource[];

shipments: ImportExportCalendarOptions[];

}

Binding (simplified):

Each event has the resource mapping field (e.g., LineId) and valid Date values for StartTime/EndTime.

const data = extend([], calendarData.shipments, undefined, true);

console.log('data', data);

const scheduleRef = useRef<ScheduleComponent>(null);

const { onPopupOpen, handleNavigating, handleEventRendered, highlightParentCells } = useCalendarEvents({

setSwapShipmentData,

setSelectedDate,

setCreateEvent,

loadEditEvent,

resources: calendarData.resources,

scheduleRef,

calendarData,

});

<StyledSyncfusionCalendar>

<ScheduleComponent

ref={scheduleRef}

cssClass="timeline-resource-grouping"

width="100%"

height={`calc(100vh - 232px)`} // 232px is the height of the header

selectedDate={selectedDate}

currentView="TimelineWeek"

eventSettings={{

dataSource: data,

enableTooltip: true,

tooltipTemplate: tooltipTemplate,

}}

group={{ resources: ['Transactions', 'Resources'] }}

rowAutoHeight={true}

showQuickInfo={false}

popupOpen={onPopupOpen}

navigating={handleNavigating}

eventRendered={handleEventRendered}

firstDayOfWeek={1}

showHeaderBar={false}

headerIndentTemplate={handleTitleWarehouse}

>

<ResourcesDirective>

<ResourceDirective

field="transactionId"

name="Transactions"

allowMultiple={false}

dataSource={impExpEvents}

textField="name"

idField="id"

colorField="color"

/>

<ResourceDirective

field="resourceId"

name="Resources"

allowMultiple={true}

dataSource={calendarData.resources}

textField="name"

idField="id"

groupIDField="transactionGroupId"

colorField="color"

/>

</ResourcesDirective>

<ViewsDirective>

<ViewDirective option="TimelineWeek" timeScale={false} />

</ViewsDirective>

<Inject services={[TimelineViews]} />

</ScheduleComponent>

</StyledSyncfusionCalendar>

Issue

• When switching weeks (Next/Prev/Today) or toggling filters repeatedly, sometimes:
• The Resources panel renders correctly.
• But events do not display, even though I console.log and confirm shipments has data every time the API is called.
• No obvious JS errors.
• Intermittent behavior.

What I’ve tried

• Ensured shipments is a new array on every change (no in-place mutation).
• Verified resource mapping consistency (event.LineId ↔ resource.id).
• Verified StartTime/EndTime are valid Dates (also tried new Date(...)) and checked timezone.
• Tried:
• scheduleRef.current?.refreshEvents();
• scheduleRef.current?.dataBind();
• scheduleRef.current?.refresh();
• Changing the key of ScheduleComponent based on selectedDate/filter to force remount.
• The issue still occurs occasionally.

Questions

1. With Timeline + group.resources, are there any known issues where events fail to re-render when resources/eventSettings.dataSource change rapidly or multiple times in a row?
2. When using custom navigation (no default toolbar), do I need to call any specific Schedule APIs/lifecycle steps to ensure proper rebind? For example, a sequence like setProperties(..., true) → refreshEvents()?
3. Any strict requirements for:
   • Matching the resource field name (e.g., field: 'LineId') with the event shape?
   • Event Id format (must be unique/integer/sequential)?
4. Recommendations for debouncing/throttling selectedDate and dataSource updates to avoid internal race conditions?
5. Any flags/props (e.g., enablePersistence, timezone) that could cause caching/conversion leading to events temporarily not rendering?
   

bug:

[Vijay Ravi]

Hi Nam Nguyen,
 

Query 1: With Timeline + group.resources, are there any known issues where events fail to re-render when resources/eventSettings.dataSource change rapidly or multiple times in a row?

We have thoroughly reviewed and validated your reported query regarding Timeline + group.resources. Our findings confirm that no issues arise when resources/eventSettings.dataSource are changed rapidly or multiple times in succession, and there is no likelihood of such issues occurring

Query 2: When using custom navigation (no default toolbar), do I need to call any specific Schedule APIs/lifecycle steps to ensure proper rebind? For example, a sequence like setProperties(..., true) → refreshEvents()?

We have carefully reviewed and validated your inquiry concerning the requirements for the scheduler functionality. You are utilizing a custom navigation toolbar and making API or lifecycle calls to refresh events in the UI as expected. However, when setting the second argument to true in setProperties, the values are updated, but these updates are not reflected in the UI output.

Query 3: Any strict requirements for Matching the resource field name (e.g., field: 'LineId') with the event shape? Event Id format (must be unique/integer/sequential)?

Yes, for resource grouping, the resource field (e.g., field: 'LineId') must be set to unique values only.

Query 4: Recommendations for debouncing/throttling selectedDate and dataSource updates to avoid internal race conditions?

To prevent race conditions in a React-based Syncfusion Scheduler, debouncing and throttling are applied to selectedDate and dataSource updates. Throttling limits selectedDate updates during rapid navigation to ensure smooth UI rendering, while debouncing batches dataSource updates from event changes (e.g., drag-and-drop) to avoid frequent re-renders. The solution uses Lodash's debounce and throttle for controlled updates, with a custom hook for reusability. The scheduler leverages TimelineWeek view with resource grouping, and updates are optimized to maintain performance and consistency.

Query 5: Any flags/props (e.g., enablePersistence, timezone) that could cause caching/conversion leading to events temporarily not rendering?

The query asks about flags/props that might cause caching or conversion issues, leading to events temporarily not rendering. While enablePersistence and timezone aren't directly in the code, persistence relates to data saving/reloading, potentially causing delays if flawed. Incorrect timezone settings could misplace events. The dataSource prop, if updated incorrectly, can also cause rendering issues. The use of debounce and throttle for optimization, when misconfigured, could introduce delays. Finally, problems in the onEventRendered function could prevent events from rendering correctly.

Additionally, If you are still experiencing the issue, we kindly request the following to help us investigate further:

 

1. Share a minimal sample that replicates the problem, or
2. Replicate the issue in our shared sample.
3. Share the entire code snippets for replicate the issue.

Sample link: https://stackblitz.com/edit/react-zk44gds8-nqeukfs2?file=index.js,datasource.json
 

Please get back to us with the required details for further assistance.
 

Regards,

Vijay