Our pure JavaScript Scheduler component


Post by asharafshahi »

I've been going over the documentation and reading the forums but cannot figure out how to change what the double click event does. I'd like to actually navigate the user to another page when they double click an event.

I realize this: https://www.bryntum.com/docs/scheduler/#Grid/view/mixin/GridElementEvents has something to do with it, but when working in React, can you give an example for how to change the event

Post by mats »


Post by asharafshahi »

Thanks Mats, I had seen that page on the docs as well. But my challenge is where do I add an event handler for this event when using the React version?

Post by asharafshahi »

I have BryntumScheduler in the JSX return of a component like this:
<BryntumScheduler
          autoHeight
          ref={scheduler}
          eventStyle="colored"
          eventLayout="pack"
          eventColor="blue"
          startDate={moment(selectedDate).subtract(3, 'days').toDate()}
          endDate={moment(selectedDate).add(7, 'days').toDate()}
          viewPreset="myNewPreset"
          useInitialAnimation="slide-from-left"
         
          features={{
            timeRanges: {
              showCurrentTimeLine: true,
            },
           .....
           .....
/>
Do I add event handlers in there somewhere?

Post by mats »

You can add it using the scheduler instance, as explained in the docs. https://bryntum.com/docs/scheduler/#guides/integration/react.md
The native Bryntum Scheduler instance
It is important to know that the React component that we may even call "scheduler" is not the native Bryntum Scheduler instance, it remains to be a wrapper or an interface between the React application and the Bryntum Scheduler itself.

The majority of properties and features are propagated from the wrapper down to the underlying Bryntum Scheduler instance but there might be the situations when you want to access the Bryntum Scheduler directly. That is fully valid approach and you are free to do it.

Accessing the Scheduler engine
To access Scheduler functionality not exposed by the wrapper, you can access the Scheduler engine directly. Within the wrapper it is available as this.schedulerEngine, from the outside it could look something like this:

<BryntumScheduler
ref = {'scheduler'}
/>
// From within your React app
this.refs.scheduler.schedulerEngine.scrollEventIntoView(xx);
When accessing schedulerEngine directly, use API docs to know which properties and methods you may use and what are the valid values.

Post Reply