Questions Tagged javascript
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...
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 ...
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.
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!
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.
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())...
Hide resources panel (Scheduler)
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 ...
Part Time employees
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 = ar...
How to add style to cells
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,...
Keyboard navigation error (reading 'lines')
Answered: This issue should be fixed now in the latest sandbox build (2023.4.5851). Please let me know if there is any problem.
Custom onTimeRangeSelecting Start and End selection
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...
Strange error on TimeRangeSelected, happening just in the new version.
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.
Some requests for next release
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. On...
Custom css not working after upgrading to dayilot-pro-angular from daypilot-angular-lite.
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...
Open menu on calendar header clicked.
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...
Hour indication is not next to the line.
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...
Width changes makes disaster effect on colum headers.
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.
Scheduler - How to switch between dark and light themes
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...
Use with ASP.Net Core 6
Answered: Yes, no problem. DayPilot is a purely client-side solution so you can use it with any backend. This example includes a .NET 7 project but you can use the same source code with .NET 6 as well. You jus...
Event not taking full height
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 coul...
Performance issues on table resize.
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...
During one event, I have three areas with four dates in total. Is there a way to move each date to resize the event independently?
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 a...
vertical text in the scheduler
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: rotat...
Scheduler - build 5777 broke event rendering
Answered: This happens if you specify both text and html properties for events. This regression incorrectly applies text if both values are specified - the html property should have higher priority. It should ...
Dynamic disabled cells in scheduler
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.
How to smoothen resize animation?
Answered: Please see my answer here: https://forums.daypilot.org/question/6206/smooth-draganddrop
Cells disabled not working when moving an event
Answered: This was a regression that has been fixed in version 2023.4.5772. Please let me know if the problem persists.
Listen to onEventMoving
Answered: The onEventMoved event is fired when all updates are complete, and it’s fine to use it for updating either the calendar/scheduler itself or external elements. The onEventMoving event is fired in real...