Questions Tagged javascript

Answered: In this particular case, it is by design: The overlaps are resolved on pixel level, not on time level. That is necessary for proper display. The Scheduler enforces a minimum width of 1 px for small e...

Answered: The recurrence needs to be implemented on the server side and the UI depends on the supported rules; that’s why this is not implemented in the JavaScript version.

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: This can happen if the floating time headers are enabled (they are by default). The Scheduler isn’t aware of the custom component content and it uses the default HTML value for the floating divs. You...

Answered: Hi Leo, Thanks for the update. This issue should be fixed now in the latest sandbox build (2025.3.6647). Please let me know if the problem persists.

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: Hi Leo, The Gantt Chart doesn’t support multiple tasks in the same row. You’d have to use the Scheduler component for this. However, you can display the task as a single box and insert active areas w...

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: This is now implemented in the latest release ( 2025.3.6631 ). The links from rendered events to events outside of the timeline will be displayed as well. The invisible event needs to be loaded and t...

Answered: This issue should be fixed now in the latest release ( 2025.3.6631 ). Please let me know if the problem persists.

Answered: This issue should be fixed now in the latest release ( 2025.3.6631 ).

Answered: You will need a webserver with PHP enabled. For development purposes, you can run the project using the built-in PHP webserver: Linux: php -S 127.0.0.1:8090 -t /path/to/project Windows: php.exe -S lo...

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: These events can be added but your scenario can be better handled using active areas . If you add active areas with visibility: "Hover" they will ony be displayed when you hover the event. By default...

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 TypeScript definitions for these members are now available in the latest sandbox build (2025.3.6621). If there is any problem, please let me know.

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: Unfortunately, I’m not able to reproduce the issue. However, I recommend using the UI Builder app to generate a Vue project with the required boilerplate. It lets you download a configured component ...

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.