Questions Tagged javascript
Cells 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 ma...
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 th...
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(re...
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
More Obvious Re-Size
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.resizeDisable...
Resize a Bumper Row
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: "Grou...
Rich Text in Top-Date Hover popup
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 ...
How To Update Separators?
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...
Listen for Event Resizing on UseEffect
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...
How to avoid resizing under a certain duration in Daypilot Calendar?
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 => {
...
Shift + select when multirange is active doesn't clear
Dear Daypilot-Support, I work as a developer for RTM Systems. When performing shift + select when multirange is active, the previous selection doesn’t clear properly. Please review the attached GIF. ...
Time Range double click error
Answered: This problem should be fixed now in the latest sandbox build (2023.4.5769): See also: https://release.daypilot.org/changes/js/
DayPilot Vue Event Calendar loses css after build
Answered: This is not a limitation of the trial version. I recommend checking the DOM structure of the production build in the browser (using developer tools) to see whether the elements are using the expected...
Index of ResourceHeader
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.