DayPilotWidth changes makes disaster effect on colum headers.
Answered: In the latest sandbox build (2023.4.5825), the header width is set using CSS. It doesn’t rely on the width detection anymore - that will result in a smooth animation during resizing.
Questions Tagged javascript
Scheduler - How to switch between dark and light themes
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...Use with ASP.Net Core 6
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...Event not taking full height
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...Performance issues on table resize.
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...During one event, I have three areas with four dates in total. Is there a way to move each date to resize the event independently?
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...vertical text in the scheduler
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);...Scheduler - build 5777 broke event rendering
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 ...Dynamic disabled cells in scheduler
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.How to smoothen resize animation?
Answered: Please see my answer here: https://forums.daypilot.org/question/6206/smooth-draganddropCells disabled not working when moving an event
Answered: This was a regression that has been fixed in version 2023.4.5772 . Please let me know if the problem persists.Listen to onEventMoving
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...Smooth DragAndDrop
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.OnEventmoving and OnEventMoved drag acts crazy.
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...Enhanced keyboard navigation for automatic timerange selection
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 ...Strange behavior of keyboard navigation
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.How can I add space at the top and bottom between events in the Scheduler?
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...Critical Issue with Drag and Drop.
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...Is it possible to use events with different phases to make it shape like this?
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...How to increase the height of the row headers located on the left side of the Scheduler?
Answered: There are a couple of options; please see the Row Height topic in the Scheduler documentation.How to enable horizontal autoscroll in calendar?
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...Keyboard navigation doesn't skip invisible rows
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.Error on keyboard navigation on long event
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.Loading events from 1 month and earlier on Scheduler view
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 ...Is is possibile to enable horizontal drag and drop on calendar?
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.How to work with dp.tasks.list.find(), dp.tasks.list.find() not working for subtasks.
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 ...Displaying custom dynamic data on a second time header (Scheduler)
Answered: To customize the content of the time header cells in the Scheduler , you can use the onBeforeTimeHeaderRender event handler.DayPilot.Calendar - multimove items
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).Scheduler - How to cancel event moving after server call
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 (!...UseEffect everytime an event gets resized or moved.
Answered: Please see my answer here: https://forums.daypilot.org/question/6173/listen-for-event-resizing-on-useeffect