Event tooltip error & event editor error

[Florin Toader]

Hello,

For my implementation I receive 2 strange errors: one for event tooltip and another for custom editor (even if I set it as empty element for testing)

This is my implementation:

const eventTemplate = useCallback((props: any) => {
  return <CalendarEvent event={props} />
}, [])

const eventTooltip = useCallback((props: any) => {
  return <EventTooltip event={props} />
}, [])

const editorTemplate = useCallback((props: any) => {
  return <div />
}, [])

return (
  <div className='schedule-control-section'>
    <div className='col-lg-12 control-section'>
      <div className='control-wrapper'>
        <ScheduleComponent
          cssClass='room-schedule'
          width='100%'
          height='calc(100vh - 300px)'
          timeScale={{ interval }}
          selectedDate={new Date()}
          timezone='UTC'
          startHour={dayInterval.min as string}
          endHour={dayInterval.max as string}
          currentView='Day'
          headerIndentTemplate={indentTemplate}
          resourceHeaderTemplate={resourceHeaderTemplate}
          eventRendered={eventRendered}
          showQuickInfo={false}
          editorTemplate={editorTemplate}
          eventSettings={{
            dataSource: data,
            enableTooltip: true,
            tooltipTemplate: eventTooltip,
            fields: {
              startTime: { title: 'From', name: 'start_time' },
              endTime: { title: 'To', name: 'end_time' },
            },
          }}
          group={{ resources: ['Rooms'] }}>
          <ResourcesDirective>
            <ResourceDirective
              field='room_id'
              title='Rooms'
              name='Rooms'
              allowMultiple={true}
              dataSource={resources}
              idField='resourceId'
            />
          </ResourcesDirective>
          <ViewsDirective>
            <ViewDirective option='Day' eventTemplate={eventTemplate} />
          </ViewsDirective>
          <Inject services={[Day, Resize, DragAndDrop]} />
          <ToolbarItemsDirective>
            <ToolbarItemDirective name='DateRangeText' align='Left' />
          </ToolbarItemsDirective>
        </ScheduleComponent>
      </div>
    </div>
  </div>
)

this is the error for tooltip when mouse leave the event


and this error appears when I double click on event


Thanks in advance for any help understanding the cause.

Also, I have one more question, ow can I handle the resize and drag&drop events to save to DB?

[Subalakshmi Ramachandran]

Hi Florin,

Based on your shared details, we understand that you're encountering two errors:

1. One related to the event tooltip, specifically when the mouse leaves the event.
2. Another when double-clicking on an event, which seems to be related to the custom editor.

And you've set up empty callback functions for editorTemplate.

We've attempted to reproduce these issues using a simple Scheduler sample based on your provided code snippet. However, we were unable to replicate the errors you're facing. We tested this using version 28.2.5 in both Edge and Chrome browsers.

To help us investigate further and provide more accurate assistance, we kindly request the following information:

1. The specific version of the Syncfusion React Scheduler component you're using.
2. A minimal, reproducible example that demonstrates the errors. You can fork and modify our sample project at: 9fjhf97s (forked) - StackBlitz
3. The complete code snippet for your Scheduler component, including the Tooltip template implementation.

Regarding your question about handling resize and drag & drop events to save to the database, please refer to our documentation on data binding in the React Schedule component. You can find detailed information here:

Data binding in React Schedule component | Syncfusion

Regards,
Suba R.