Questions Tagged how-to

Answered: Unfortunately, RTL direction is not supported in the Scheduler at the moment.

Answered: The vertical position of the modal dialog can be set using the top property. By default, it is set to 20 (pixels). You can increase it as needed. The background elements appear above the modal dialog...

Answered: 1. The default linkLayer value is set to "Above" and you can see this behavior in the Links demo as well. Instead of using z-index , it uses the two different layers that are inserted into the DOM in...

Answered: The recurrence needs to be handled on the server side. You need to supply the expanded occurrences to the calendar as part of the dataset. Most likely, you will want to show an icon indicating that t...

Answered: I assume that you mean the feature that lets you skip non-business hours during event moving . This adjustment is only applied during event moving and not to the data source. The Scheduler assumes th...

Answered: You can find an example in the following demo: Group Concurrent Events (Demo) It shows how to add an expand/collapse icon to the row headers using the onBeforeRowHeaderRender event handler.

Answered: Unfortunately, that is not possible. Events are arranged in horizontal lines inside rows (see also Event placement strategies ) and the line height is determined by the event height. It is possible t...

Answered: The best way would probably be to add the nested events as active areas inside events. The position of active areas can be specified in pixels ( top / bottom / height properties) or you can replace t...

Answered: Update: The Weeks mode is fully supported by the server-side image export so you can export individual weeks by setting ViewType to Weeks (DayPilot.Web.Ui.Enums.Month.ViewTypeEnum.Weeks), Weeks to 1 ...

Answered: Unfortunately, this is not supported. However, if the problem is that the bottom scrollbar is not accessible without scrolling, I recommend checking the heightSpec property which lets you set the hei...

Answered: By default, the exportAs() method includes the current viewport in the exported image. You can use the area property of the options parameter to include the full timeline ( area: "full" ) or a manual...

Answered: The easiest way is to use a locale for which the timeFormat property is set to "Clock24Hours" . You can also customize individual properties directly - see localization in the docs.

Answered: The open-source version doesn’t support all functionality on touch devices at the moment. For example, you can click a time slot to select it but you can’t select multiple cells by dragging. The full...

Answered: Please take a look at the following tutorial, which uses onTimeRangeSelecting , onEventMoving and onEventResizing to disable custom time segments (that do not correspond to whole cells): JavaScript S...

Answered: It the open-source version, the event box is always aligned with the grid cells. In the Pro version, it is possible to turn off this behavior (see exact event duration ). The real start and end is hi...

Answered: You can mark the event div with a custom attribute using the onAfterEventRender event handler: onAfterEventRender: args => { args.div.dataset.eventId = args.e.data.id; } Than you can get the event po...

Answered: Most likely, you are using DayPilot Lite for ASP.NET WebForms - the open source version for ASP.NET. At this moment, the resources view is supported in the open-source JavaScript version and in all P...

Answered: You are right, this iCalendar tutorial is a bit outdated. I’ve added your request to the tutorial plan and it should appear at code.daypilot.org soon. We don’t plan to add iCalendar support directly ...

Answered: You can use the locale property to apply culture-specific settings (such as date format, first day of week….). const calendar = new DayPilot.Calendar("calendar", { locale: "en-au", // ... }); calenda...

Answered: Please make sure that you are using the latest DayPilot Pro version. Angular Ivy is supported since version 2022.2.5344 .

Answered: Yes, you can do it using the onBeforeCellRender event, like this: onBeforeCellRender: args => { if (args.cell.row.data && args.cell.row.data.frozen) { const events = scheduler.events.forRange(args.ce...

Answered: Do you see any error in the JavaScript console?

Answered: In order to detect changes performed by the Scheduler UI in Vue, you need to watch the source object. Like this: <template> <DayPilotScheduler :events="events" :resources="resources" /> </template> <...

Answered: When you use an async function in the event handler, calling args.preventDefault() after await has no effect as the processing continues immediately (before args.preventDefault() gets called). You ne...

Answered: Unfortunately, this feature is only available in the Pro version at the moment. In the open-source version, the selection is limited to a single column of the Calendar component.

Answered: You can do it in the onEventMove event handler using the events.forRange() method: onEventMove: args => { const movedEvent = args.e; const newStart = args.newStart; const newEnd = args.newEnd; const ...

Answered: The showEventStartEnd property isn’t supported in the open-source version of the Calendar component at the moment. However, you can customize the event content as needed using the onBeforeEventRender...

Answered: Please see the src/index.html file in the project attached to the Angular Scheduler: Event Filtering tutorial - the header is defined there.

Answered: To prevent the menu from closing when an item is clicked, you can add an onClick event handler to the items and stop the click event from bubbling: const menu = new DayPilot.Menu({ items: [ { text: "...

Answered: Hi The problem gets fixed by using the following one to open all the tabls. dp.rows.expandAll(); Thank you for the great library. Martin