search envelope-o feed check
Home Unanswered Active Tags New Question

Questions Tagged how-to

Width changes makes disaster effect on colum headers.

Just upgraded to the last version, and i have this huge issue.

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

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

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

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

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:

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.

Font color for event name

Answered: You can customize the row header using the onBeforeRowHeaderRender event handler.

Daypilot resource forecolor

Answered: You can customize the row header using the onBeforeRowHeaderRender event handler.

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

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

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

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:

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

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...
Questions 1-30 of 2856 Next