Questions Tagged javascript

Answered: You can switch the CSS theme using the update() method: dp.update({theme: "my_dark_theme"}); And back: dp.update({theme: "my_light_theme"}); Both theme files need to be included in the page using <li...

Answered: Yes, no problem. DayPilot is a purely client-side solution so you can use it with any backend. This example includes a .NET 7 project but you can use the same source code with .NET 6 as well. You jus...

Answered: 1. First, check if you use the correct value for the useEventBoxes property (see Exact Event Duration in the docs). The default value ( "Always" ) aligns the event boxes with the grid cells. 2. It co...

Answered: The calendar component doesn’t re-render events when the width changes. The resizing itself is fully handled by the browser (so there is nothing to optimize). Generally, it will take longer if the re...

Answered: There are two issues: 1. The action property can only have one of the predefined values (see the API docs ). A drag handle that triggers resizing must use either "ResizeStart" or "ResizeEnd" . 2. The...

Answered: Yes, you can use the writing-mode CSS property: .scheduler_default_event_inner { writing-mode: vertical-lr; } or .scheduler_default_event_inner { writing-mode: vertical-lr; transform: rotate(180deg);...

Answered: This happens if you specify both text and html properties for events. This regression incorrectly applies text if both values are specified - the html property should have higher priority. It should ...

Answered: You can customize the drag-and-drop moving behavior using the onEventMoving event handler. It lets you forbid the drop depending on the source event and the target position.

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: 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: > Why don’t select a cell or event when moving the cursor? In Excel when I move my cursor to the next cell, it selected the cell direct and I can edit or add something. OK, let’s see if I understand ...

Answered: This bug should be fixed now in the latest sandbox build (2023.4.5802): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

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: Most likely, this is caused by the fractional value used for the cellHeight property: const config: any = { cellHeight: 42.75, // ... } I recommend using an integer value. Fractional values may not o...

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: This bug should be fixed now in the latest sandbox build (2023.4.5797): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

Answered: This bug should be fixed now in the latest sandbox build (2023.4.5786): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

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...