Questions Tagged how-to
React Scheduler > Difficulty with applying css on row header background and rowmove handle
Answered: It looks like this CSS works for me, so the problem might be somewhere else. You can try turning off your custom JSX temporarily to see if that causes the issue. .scheduler_default_rowheader:hover {
...
Scheduler - cell mouseover time headers shaded with custom colour
Answered: Yes, you can do it using CSS. In the default (built-in) CSS theme, the following styles are used: .scheduler_default_crosshair_vertical,
.scheduler_default_crosshair_horizontal,
.scheduler_default_...
Scheduler: issue with resources spanning multiple rows
Answered: These two things don’t seem to work correctly in your setup: 1. Coloring the cells All cells in a column should be colored correctly with this event handler: onBeforeCellRender: (args) => {
if (ar...
React Scheduler > How to make shadow of event while moving respects the event height, despite margin top of resource
Answered: Hi Andy, In the latest sandbox build (2025.4.6701), it is now possible to set a custom shadow height in onEventMoving using args.height (in pixels).
React Scheduler > Centering event bar
Answered: Hi Andy, You are probably using rowMinHeight to set the row height. If there are no overlapping events, it is possible to center the event by replacing it with rowMarginTop and rowMarginBottom.
"dp.events.update(dpEvent)" sometimes redraw all Events on a Calendar
Answered: I close my browser, open it again and now it doesn’t flicker anymore! :-| I guess we’ll never know…
React Scheduler > `timeRangeSelectedHandling: 'Disabled` does not register click on timeline canvas
Answered: Hi Andy, The Scheduler handles the mousedown event and prevents it from bubbling if the timeRangeSelectedHandling is set to "Disabled". To hide the popover, you can handle the onGridMouseDown event. ...
React Scheduler > Control visibility of row move handle
Answered: Hi Andy, In the latest sandbox build (2025.4.6668), this can now be controlled using the new rowDragHandleVisibility property. The supported values are "Hover", "HoverVisible", and "TouchVisible". In...
Hidding an Event Bubble when scrolling a Calendar
Answered: The bubble hides if the cursor is moved outside of the source object and the bubble itself. I assume that in your scenario, the cursor stays inside but the calendar scrolls. Is that correct? The cont...
Click to create an event in inline edit mode instead of pop up modal?
Answered: Yes, this is possible - take a look at the inline event editing feature. It includes a sample onTimeRangeSelected handler that creates a new event using an inline edit box.
React Scheduler > Display splitter but disable splitter resizing
Answered: Hi Andy, In the latest sandbox build (2025.4.6665), this is now supported by the new rowHeaderResizing property (you need to set it to false).
How to detect the end of a row move session?
Answered: In the latest sandbox build (2025.3.6658), the Scheduler supports a new property (rowMoveFireOnForbiddenTarget) that lets you configure this.
15 and 20 minute events don't show up correctly on workweek view
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 ...
Setting the "cssClass" property on a Calendar Event
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 ...
Load from file
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.
How to change language of calendar in modal form?
Answered: You can specify the locale option for the modal form: const showDialog = async () => {
const form = [
{ name: "Name", id: "name" },
// ...
];
const data = {};
const option...
Calendar: Allow external drag and drop but disable the moving feature for events on the Calendar?
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: onBe...
Header groups for Calendar component and viewType: 'Days'
Answered: Unfortunately, this feature is only supported in the Pro version.
How to access current column for onBeforeRowHeaderDomAdd?
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...
React scheduler PRO (trial) > Best practice for locking in visible dates
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...
React schedule Pro (trial) > Disable/hide link one link dot for specific events
Answered: This can be added easily - I’ll let you know as soon as it is available.
React schedule Pro (trial) > Best practice for creating "bucket" cells in the timeline grid
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...
Not able to add html to the row header
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.r...
Scheduler - sticky active area for touch devices
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 vie...
Crosshair when Drag&Drop (2025)
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.
DatePicker popup - 2 questions
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...
Implement pagination in gantt chart in angular using daypilot
I need to implement pagination in gantt chart in angular using daypilot for that i need to add a load more button. by clicking on the button need to trigger. I’m stick in a situation like how to add ...
Box with Dynamic Timing in DayPilot Scheduler
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-...
Frozens Rows
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.
Questions 1-30 of 3090
Next