Questions Tagged how-to

Answered: Please see my answer here: https://forums.daypilot.org/question/6206/smooth-draganddrop

Answered: This was a regression that has been fixed in version 2023.4.5772 . Please let me know if the problem persists.

Answered: The onEventMoved event is fired when all updates are complete, and it’s fine to use it for updating either the calendar/scheduler itself or external elements. The onEventMoving event is fired in real...

Answered: If you mean the option to turn off 'snap to grid' (as in the Scheduler), this feature is planned and will be introduced in one of the future releases.

Answered: You can customize the row header using the onBeforeRowHeaderRender event handler.

Answered: You can customize the row header using the onBeforeRowHeaderRender event handler.

Answered: It behaves as if the Calendar component were updated in the middle of the drag-and-drop movement. You can see that the source event (which is marked with calendar_default_event_moving_source CSS clas...

Answered: You can define a custom margin beneath each event with the eventMarginBottom property, or alternatively, override the CSS to introduce additional whitespace. For more details, please see the Event Sp...

Answered: You can customize the Scheduler event appearance using the onBeforeEventRender event handler. It lets you apply custom CSS class to the event, and specify event phases using active areas . See also t...

Answered: There are a couple of options; please see the Row Height topic in the Scheduler documentation.

Answered: AutoScroll is enabled by default in the Calendar component for drag-and-drop operations (moving, resizing, and time range selection). You can set the value of the autoScroll property to "Always" to e...

Answered: If you would like to load Scheduler events from the server during scrolling (this feature is called dynamic event loading ), you need to do two things: Enable this feature using dynamicLoading: true ...

Answered: Could you please specify which type of drag-and-drop you are referring to? You can drag events horizontally without any problems, it is enabled by default.

Answered: The tasks.list property contains the original array of tasks. Its find() method is the standard Array.prototype.find() method, which searches through the array items. To find a task by its ID within ...

Answered: To customize the content of the time header cells in the Scheduler , you can use the onBeforeTimeHeaderRender event handler.

Answered: Yes, support for moving multiple events at once is in the plan. The args.shift property is now available in onEventClick since the latest sandbox build (2023.4.5773).

Answered: You should always call args.loaded() after switching to async processing ( args.async = true ). Like this: onEventMove: (args) => { args.async = true; this.moveItem(args) .subscribe(result => { if (!...

Answered: Please see my answer here: https://forums.daypilot.org/question/6173/listen-for-event-resizing-on-useeffect

Answered: The width of the active resize area can be set using the eventResizeMargin property. See also event drag handles . You can also turn off the built-in resize handles (e.g. using args.data.resizeDisabl...

Answered: The row height is calculated from the eventHeight property. For an empty row, it is equal to 1*eventHeight . You can set custom eventHeight for each row like this: const resources = [ { name: "Group1...

Answered: 1. To show a hover popup, you can use the Bubble component. For time headers, it is necessary to use an active area that will display a custom bubble when the action is set to “Bubble”. This example ...

Answered: You can use the update() method: scheduler.update({separators}); If the Scheduler detects that only {separators} property is in the update params, it will perform an optimized update and only refresh...

Answered: I would recommend handling the logic directly in the onEventResizing event handler. The typical action would be to notify the server or to ask for a confirmation. These actions are not typical “state...

Answered: You can use the onEventResizing event to customize the behavior during drag-and-drop resizing . You can use it to enforce custom rules, such as setting a minimum duration: onEventResizing: args => { ...

Answered: The onResourceHeaderClicked is a legacy event which has been replaced by the onRowClicked event. In onRowClick and onRowClicked , you can access the column index using args.x .

Answered: The clearSelection() method clears the time range selection . To clear the event selection, you will need to use the multiselect.clear() method. See also event selecting in the documentation.

Answered: You can add custom elements to the time header using active areas ( demo ): You can either create a special row for this bar or add it to an existing row.

Answered: There is a tutorial that shows how to do this: JavaScript Scheduler: Copy Multiple Events Please let me know if it didn’t help!

Answered: There was an issue with events.update() when called with a raw data object as an argument. It should be fixed now in the latest sandbox build (2023.4.5743). It caused the calendar to update the event...