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: Thanks for the update. All browser on a Mac use the same rendering/JS engine (from Safari). The problem with old MacOS versions is that Safari stops getting updates at some point - that means on an o...
Answered: The scrollToResource() method is quite simple (it sets the scrollTop style to the appropriate value) but it is executed asynchronously, after a delay of 100ms. It’s good to take this into account. I ...
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: This issue should be fixed now in the latest sandbox build (2024.1.5872). Please let me know if the problem persists. Thanks for reporting the issue!
Answered: This issue should be fixed now in the latest release (version 2024.1.519/3.20.1): https://javascript.daypilot.org/daypilot-lite-for-javascript-2024-1-519/ Please let me know if the problem persists.
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: 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: 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: The Pro version of the Calendar component may use a slightly different DOM structure, as required by the advanced features. You may need to adjust your CSS customizations a bit. As a general guidelin...
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...
DayPilot