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

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

React Scheduler > Behaviour of `rowHeaderWidth`

Answered: Yes, this is by design.

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