Questions Tagged how-to
Scale={"Manual"} with 30 minutes cells
Answered: To display time cells with custom duration defined in minutes, you need to set the scale property to "CellDuration": scale={"Manual"}
cellDuration={30] Another option would be to use scale={"Manual"...
select form with remote search
Answered: oeps i see you can change it to type: "searchable", so that works :-)
I need only snap to grid animation.
I don’t want my data to be altered, so i want to be able to free move my event but when released or resized, acting like snap to grid was true. What can i do?
How to create a full width menu under column header.
Answered: There is no easy way to do this. You can try detecting the cell dimensions using the internal dp.nav.main property which stores the DOM parent of grid cells.
Daypilot React- Make left click work the same as right click
Answered: The time range selection always stays active, until you call clearSelection() or update the calendar. You might want to check your onTimeRangeSelect/onTimeRangeSelected handlers.
Daypilot React Scheduler - Row Header Customization with multiple columns
Answered: Unfortunately, custom React components in multiple row header columns are not supported at the moment. Until it is available, you can try using row header active areas to show the icons.
How to get a bubble on the time column headers in the scheduler.
Answered: You can show the bubble using a time header active area: onBeforeTimeHeaderRender: args => {
const header = args.header;
args.header.areas = [
{
left: 0,
...
Removing all tasks from a gantt chart without disposing of it
Answered: When you need to load a new task set in the Gantt chart, the best way is to replace the tasks with a new array: const tasks = [ /* ... */ ];
dp.update({tasks}); There is no need to clear the events ...
Separator on TimeHeaders
Answered: You might need to check the value of startOfMonth. Please make sure that it contains correct dates. My guess is that the values don’t correspond to the current view when the separators are not visibl...
Scheduler businessEndsHour later than 24
Answered: The Scheduler has built-in support for quick specification of business hours using businessBeginsHour and businessEndsHour but businessBeginsHour needs to be smaller than businessEndsHour. For more c...
Uncaught TypeError: Cannot read properties of null (reading 'style')
daypilot-core.js:17 Uncaught TypeError: Cannot read properties of null (reading 'style') at DayPilot.Calendar.Ea (daypilot-core.js:17:14081) at DayPilot.Calendar.La (daypilot-core.js:16:23322) at Res...
Put a Swap button on the context menu
Answered: Please take a look at the following tutorial: JavaScript Scheduler: Swap Events using Context Menu
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...
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...
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...
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 ...
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 ...
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...
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...
Mutliselection
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...
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,...