Active Questions
newResourceId is undefined on event resize
Answered: There is no args.newResource available in onEventResize as the resource doesn’t change during resizing. You can access the event resource ID using args.e.resource().
Backend events are not loaded in the resource calender
Answered: Thanks for the update! The problem is the type of events.resource_id database field. It is incorrectly set to varchar instead of integer. Older versions of PHP/PDO converted integer values to string ...
How to collapse tasks based on field from database
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 prop...
Highlighting multiple dates in scheduler
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. Thi...
DayPilot React: When Event is moved I wanna ask a question if they are sure they wanna move it
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...
How do i delete a full row?
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,
...
How to use angular component in bubble HTML
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...
Collapse task in DayPilot.Gantt
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.collap...
Adding custom CSS to task in Gantt
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 ...
Accessing the args data for an event being moved, not the new values for start, end and possibly resource
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 the ...
<daypilot-scheduler> is not a known element
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...
Adding custom filters
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...
Cannot install DayPilot in my current Angular application
Answered: It looks like Chrome has started to report certain code as an error, even though it was acceptable before. It will be fixed shortly.
Cannot set property document of #<Window> which has only a getter in Nuxt
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.
Calendar control; showing only busniess hours
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...
Calendar time range selection broken on 2024.1.5854
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!
Event Resizing Validation - Do not allow event overlapping even when "allowEventOverlap=true"
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())...