Questions Tagged how-to

Answered: Yes, you can do it using CSS. In the default (built-in) CSS theme, the following styles are used: .scheduler_default_crosshair_vertical, .scheduler_default_crosshair_horizontal, .scheduler_default_cr...

Answered: These two things don’t seem to work correctly in your setup: 1. Coloring the cells All cells in a column should be colored correctly with this event handler: onBeforeCellRender: (args) => { if (args....

Answered: Hi Andy, In the latest sandbox build (2025.4.6701), it is now possible to set a custom shadow height in onEventMoving using args.height (in pixels).

Answered: Hi Andy, You are probably using rowMinHeight to set the row height. If there are no overlapping events, it is possible to center the event by replacing it with rowMarginTop and rowMarginBottom .

Answered: I close my browser, open it again and now it doesn’t flicker anymore! :-| I guess we’ll never know…

Answered: Hi Andy, The Scheduler handles the mousedown event and prevents it from bubbling if the timeRangeSelectedHandling is set to "Disabled" . To hide the popover, you can handle the onGridMouseDown event....

Answered: Hi Andy, In the latest sandbox build (2025.4.6668), this can now be controlled using the new rowDragHandleVisibility property. The supported values are "Hover" , "HoverVisible" , and "TouchVisible" ....

Answered: The bubble hides if the cursor is moved outside of the source object and the bubble itself. I assume that in your scenario, the cursor stays inside but the calendar scrolls. Is that correct? The cont...

Answered: Yes, this is by design.

Answered: Yes, this is possible - take a look at the inline event editing feature. It includes a sample onTimeRangeSelected handler that creates a new event using an inline edit box.

Answered: Hi Andy, In the latest sandbox build (2025.4.6665), this is now supported by the new rowHeaderResizing property (you need to set it to false ).

Answered: In the latest sandbox build (2025.3.6658), the Scheduler supports a new property ( rowMoveFireOnForbiddenTarget ) that lets you configure this.

Answered: Thanks. This happens because the calendar uses event boxes by default. In the JavaScript version, you can turn it off using useEventBoxes: "Never" . BTW, it looks like some of your property names are...

Answered: Yes, this is correct. Please note that the CSS class is applied at the top level (it is added to the div with calendar_default_event class). You can verify that using browser developer tools. If you ...

Answered: Loading files this way doesn’t work on a local filesystem. That’s a browser security limitation. You will need to run the app on a webserver.

Answered: You can specify the locale option for the modal form: const showDialog = async () => { const form = [ { name: "Name", id: "name" }, // ... ]; const data = {}; const options = { locale: "de-de" }; con...

Answered: Yes, this is possible. Keep the value of eventMoveHandling set to "Update" . Disable moving for all events by setting moveDisabled: true on each event . This can be done using onBeforeEventRender : o...

Answered: Unfortunately, this feature is only supported in the Pro version.

Answered: Hi Andy, Yes, args.x is the column index. However, I recommend using onBeforeRowHeaderRender instead when possible (you can access the header cell properties using args.rows.columns[] there). The onB...

Answered: This is a good approach - take the width of the parent element and calculate the desired cellWidth before Scheduler initialization. The auto cell width feature uses the same approach. However, it has...

Answered: This can be added easily - I’ll let you know as soon as it is available.

Answered: Yes, this is an internal property and its name will change in the future. I would try to split the resources vertically using the split resources feature. It lets you define sub-resources for each re...

Answered: You can set a custom HTML for the row header using onBeforeRowHeaderRender like this: onBeforeRowHeaderRender: args => { args.row.html = `<div style="font-weight:bold; margin-bottom:5px;">${args.row....

Answered: Sorry for the delay! At this moment, the active areas with position defined using the left property are included in the floating event element . Areas relative to the right are not included in the vi...

Answered: The crosshair is now enabled during drag and drop in the Calendar in the latest sandbox build (2025.3.6634). The behavior is now consistent with the Scheduler.

Answered: The DayPilot.DatePicker class is now included in the TypeScript definitions in the latest sandbox build (2025.3.6620). Thanks for reporting the problem. To set a custom first day of the week, use the...

Answered: It is possible to insert custom time segments (phases) into an existing events: Event Phases [docs] You can also take a look at the following related tutorial: JavaScript Scheduler: Warm-Up and Cool-...

Answered: Unfortunately, this scenario is not supported. It’s not possible to modify the list of dragged events on the fly. You shouldn’t call update() in onEventMoving - it will break things.

Answered: The Scheduler respects the value of allowEventOverlap - if you set it to false , the overlaps will be forbidden.