Questions Tagged how-to

Answered: You can enable text wrapping using the "eventTextWrappingEnabled" property: https://api.daypilot.org/daypilot-scheduler-eventtextwrappingenabled/ You can also use HTML line breaks (<br>) in the event...

Answered: Hi Shruti, Thank you for choosing DayPilot Pro! You can get a NPM link for a trial version here: https://npm.daypilot.org/ The following documentation page describes how to start using the Scheduler ...

Answered: This is not possible. You can't hide just one cell of a column. You can either hide a full column (if the non-business hours are the same) or use a special background color for non-business hours tha...

Answered: The onBeforeRowHeaderRender event lets you set custom HTML for each row header cell (args.rows.cells[].html). See also: https://doc.daypilot.org/scheduler/row-header-customization/

Answered: You can add a picture to the Scheduler row header using onBeforeRowHeaderRender event. Please see an example here: https://doc.daypilot.org/scheduler/row-header-icons/

Answered: This logic destroys the component when noRows if false and makes the scheduler instance invalid. You can try using the "visible" attribute instead, something like this: <DayPilotScheduler {...config}...

Answered: Unfortunately, this is not supported in the modal dialog forms ( https://modal.daypilot.org/ ) at the moment. You can only add checkboxes at the top level (always visible). However, it might be a goo...

Answered: This is not supported at the moment - but you can use the "searchable" element which is a drop-down list with items filtered by the text you type.

Answered: You'll need to change the "SlotDurationMinutes" value in the Timeline class. using Project.Models; namespace Project.Service { public class Timeline { public static int SlotDurationMinutes = 15; // ....

Answered: Since version 2022.2.5287 (now available in the sandbox), you can disable selected cells using onBeforeCellRender event handler: https://doc.daypilot.org/month/disabled-cells/

Answered: Yes, you can add it using onBeforeCellRender. Try something like this: onBeforeCellRender: args => { args.cell.areas = [ { left: 0, right: 0, bottom: 0, text: "Start" } ]; }

Answered: This syntax is correct and it seems to work fine. However, the screenshot doesn't correspond to the sample code - "left: 0, right: 0, top: 0, bottom: 0" will fill the whole cell. So you might want to...

Answered: You need to make two requests manually and merge the results into a single array. The following example uses two parallel requests, waits until both return a result and update the Scheduler: const st...

Answered: You can enable a bubble for event groups using the groupBubble property: https://api.daypilot.org/daypilot-scheduler-groupbubble/ There are two ways to specify the bubble content: 1. You can use onBe...

Answered: To set the initial date selection, please use the select() method in ngAfterViewInit(): https://api.daypilot.org/daypilot-navigator-select/ When you add the selectionStart, selectionEnd properties to...

Answered: At this moment, it's only possible to use the "new row" feature to add rows to the top level. In order to add children, you can use a context menu as demonstrated in this tutorial: https://code.daypi...

Answered: You can do it using onClose event handler: onClose: args => { if (args.backgroundClick) { args.preventDefault(); } }

Answered: You'll need to turn off the "row header width auto-fit" feature (it adjusts the column width dynamically based on content): https://doc.daypilot.org/scheduler/row-header-width-auto-fit/

Answered: It's in the works - it will be possible to add custom React components to cells in the upcoming release.

Answered: I made a few changes and Now it's working fine.

Answered: At this moment, this is not supported. The mousedown on event will trigger event moving, unless you hold the Shift key.

Answered: The timeHeaders property is only applicable to the Scheduler component. In the Calendar component, you can change the date format using headerDateFormat property: https://api.daypilot.org/daypilot-ca...

Answered: Unfortunately, the Scheduler component is not included in DayPilot Lite for JavaScript. See also the feature matrix here: https://javascript.daypilot.org/feature-matrix/

Answered: There is no way to control the initial state of the automatic event groups, beyond setting the minimum number of overlapping events that form a group (using groupConcurrentEventsLimit property). If y...

Answered: This example will calculate a sum of values stored in a specified event field ("val"): onBeforeCellRender: (args) => { if (args.cell.isParent) { const field = "val"; const children = dp.rows.find(arg...

Answered: The Modal.Close() method uses a workaround to return the control back to the client side. Older versions may not work well - please make sure that you use the latest version of the ASP.NET WebForms h...

Answered: The cells in rows marked with "cellsAutoUpdated: true" will be updated on every change, including a row removal. You might want to review and update the calculation logic. The tutorial ( https://code...

Answered: Please take a look at this tutorial - it shows how to load calendar events from a database: https://code.daypilot.org/50175/angular-appointment-calendar-component-typescript