Answered: You are overwriting the onBeforeCellRender event handler several times and only the last value is used. You need to check the dates against the list of highlighted days inside onBeforeCellRender . Th...
Answered: In onBeforeTaskRender , it is only possible to access the raw data object ( args.data ). The DayPilot.Task object is not available yet. To collapse the rows, you can set the args.data.row.collapsed p...
Answered: Yes, you can find an example in the documentation for event moving : onEventMove: async (args) => { args.async = true; const modal = await DayPilot.Modal.confirm("Do you really want to move this even...
Answered: You can add a delete icon to the Scheduler row headers using an active area . onBeforeRowHeaderRender: (args) => { args.row.areas = [ { right: 3, top: 3, width: 16, height: 16, symbol: "../icons/dayp...
Answered: Sorry for the delay! There is a tutorial that shows how to insert an Angular component to the bubble. Angular Scheduler: Dynamic Tooltip It is necessary to instantiate the component and add it to the...
Answered: The tasks.list array holds the raw data objects (they don’t have any methods). The method you need is DayPilot.Task.row.collapse() . You can call it like this: this.gantt.tasks.find(row.id).row.colla...
Answered: In the onEventMoved event handler, the event object ( args.e ) is already updated to the new values. If you want to get the old values, you need to use onEventMove where the args.e property stores th...
Answered: It is necessary to add DayPilotModule to the imports section of the module where you want to use <daypilot-scheduler>. Example from the Angular Scheduler Quick Start tutorial: import {DataService} fr...
Answered: To apply the filter, it is necessary to call the rows.filter() method with a non-null parameter. It also updates the UI (no additional update() call is necessary). This filter parameter is then store...
Answered: It is necessary to style the task children independently. It is not possible to style task children by applying a CSS class to their parent. In the resulting DOM structure, the task children are not ...
Answered: You can do it like this: onEventResizing: args => { const row = dp.rows.find(args.e.resource()); const events = row.events.forRange(args.start, args.end).filter(e => e.id() !== args.e.id()); if (even...
Answered: Yes, it is possible to hide/show the Scheduler row headers using the API ( rows.headerHide() and rows.headerShow() methods). You can also set the rowHeaderColumns property to an empty array to remove...
Answered: The MVC Lite (open-source) version is no longer under active development. I recommend switching to the JavaScript Lite version. The JavaScript version lets you set the Calendar height to show only bu...
Answered: You can mark specified days as disabled using onBeforeCellRender in the Scheduler component . This method is used in the tutorial to disable weekends: onBeforeCellRender: (args) => { const day = args...
Answered: I’m not sure if that’s what you mean but in the Calendar component in the Pro version, it is possible to select multiple events and then delete them using the API (use multiselect.events() to get a l...
Answered: In the Pro version, you can use the onBeforeCellRender event handler to customize the calendar cells - you can add custom CSS class to selected cells or modify the appearance directly. Unfortunately,...
Answered: This happens because snap-to-grid is turned on. You will need to turn it off, at least for the time range selection. There is a tutorial that shows how to customize the time range selection in real t...
Answered: This is a regression. It looks like in the Resources view, the latest version returns the column index instead of the resource id. It will be fixed shortly.
Answered: The option to turn the snap-to-grid behavior off is already implemented and it is available in the latest release ( 2023.4.5838 ). It works for event moving, event resizing and time range selection. ...
Answered: At this moment, there is not built-in property for specifying a context menu for the calendar headers but you can use one of the following options: 1. Use an active area with action: "ContextMenu" an...
Answered: Sorry for the delay! The header cell is marked with calendar_default_rowheader CSS class which applies overflow: false style to the cell. In order to shift the content (hour label) out of the cell yo...
Answered: In the latest sandbox build (2023.4.5825), the header width is set using CSS. It doesn’t rely on the width detection anymore - that will result in a smooth animation during resizing.
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...
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 co...
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...
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...
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: rotate(180deg);...
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.
DayPilot