Questions Tagged how-to
Drag and Drop the Whole Event.
Answered: At this moment, the events always snap to grid in the Calendar during drag and drop. In the Scheduler, it is possible to turn off the snap to grid feature and implement a custom snap-to-grid logic. S...
Drag and drop skips some cells.
Drag and drop works well, except it arbitrarily skips certain cells, those that correspond to whole hours. They are not disabled or anything, but if I try to place the event there, it moves it a quar...
Get mouse coordinates in DayPilot.Gantt
Answered: In the latest sandbox build (2023.3.5736), the getCoords() method is now available for the Gantt Chart as well.
DayPilot.Gantt.onRowMoving with multiple positions
Answered: There are two options: 1. In the latest sandbox build (2023.3.5737), there is a new rowMoveSameLevelOnly property that lets you limit the target position of a row to the same level in the hierarchy o...
Drag & Scroll
Answered: Unfortunately, scrolling through the Scheduler grid by 'swiping' with the mouse is not supported. If you would like to scroll the Scheduler automatically during drag and drop operations (moving, resi...
Tags and cssClass properties
Answered: Both the tags and cssClass properties are available in the Lite version as well. You can find a full list of available event properties in the API docs for DayPilot.Event.data object. These propertie...
How to access date time information from Calendar onEventClick
Answered: The latest sandbox build (2023.3.5726) now supports a new getCoords() method which you can use to get the date/time value corresponding to the current mouse position: onEventClick: args => {
const...
Scheduler print - event content printed over 2 pages
Answered: If you want full control over the printed output, it is necessary to use PDF export. This way you can define the the individual pages. You can find an example here: https://code.daypilot.org/73551/ht...
Scheduler print - print only children
Answered: The Scheduler can only print the state that is displayed at the moment. You’d need to filter the rows first before printing it.
change calendar type based on device screen size
Answered: Try this var smallscreen = (window.screen.width < 800);
if (smallscreen) {
// use a weekly or daily calendar
var dp = new DayPilot.Calendar("calendar", {
//viewType: "Week",
...
I can't access a constant updated by an external useState hook within the daypilot scheduler state
Answered: It appears that you're running into a closure issue. When you define a function inside a component, it captures the values of the state and props at the time of the function's creation. In your case,...
How to skip an event on Sunday and Saturday
Answered: It is possible to skip weekends by manually splitting an event into multiple segments but it would be difficult to handle them together. It might be better to use active areas to add a highlight to t...
Render overnight events in scheduler
Answered: Unfortunately, this is not possible. The event box can’t be made shorter than the real event duration. In this case, you would have to adjust the event start/end before loading it in the Scheduler.
Angular Schedular Event links
Answered: At this moment, it is not possible to have links between events in a frozen row and the main grid. However, the links are due for a review, and curved links will be supported in the future. We will a...
In Time sheet Scheduler, How Scheduler form should visible after reopening of same timesheet?
Answered: It sounds like you are using the browser's session storage to keep track of the scheduled tasks in your timesheet, and the data is vanishing when you reopen the same timesheet. The data stored in ses...
How can we display timezone header different to default
Answered: In the Calendar component, you can customize the hour header (displayed on the vertical axis) using the onBeforeTimeHeaderRender event handler and display custom content, including the hour data from...
onBeforeRowHeaderDomAdd disables expandable tree styles?
Answered: In the onBeforeRowHeaderDomAdd event handler, you can specify the target that of the custom element using the args.target property. By default, it is set to "Cell". In this case, it will overwrite th...
How to edit Queue items
Answered: To edit the queue items, you can add another item (“Edit”) to the context menu: It will open a modal dialog with task details: This context menu can be defined like this: queueConfig: DayPilot.QueueC...
how to color some cells of the scheduler grid
Answered: You can specify properties of the row header cells using the onBeforeRowHeaderRender event handler. In this case, it could look like this: onBeforeRowHeaderRender: args => {
if (yourCriteria) {
...
Filtering down to two groups or more (Scheduler)
Answered: Hi Steve, Thanks for the update! You could use two dropdowns or you could use a component that allows selecting multiple values (such as Choices). So provided that you have multiple selected values s...
Impossible to show events from my database (resource calendar)
Answered: When displaying a resource calendar (viewType: "Resources"), it is necessary to specify the resource id for events using the resource property. This value needs to match the column id exactly (includ...
Task time selection may get wrong then How to reselect it ,by deleting before task time in UI. And how to save it in server and local storage as data.
Hey!! Thanks for kind help by providing this doc. I have to customize it for purpose of self learning. Hope forums gonna help me out for this. Recently ,I have doubt which I posted “Task time selecti...
How I can modify resources? If I don’t need group?
Answered: If the events don’t display correctly, you should check the id of the resources (resources[].id) and the resource of events (event.list[].resource). Events are only displayed in a row if these value ...
Implementing a 'Break and Reschedule' Function in the Scheduler Component
Answered: This is possible. Just remember that it’s a bit more complex task and you will need to extend this code to cover edge cases and implement the server-side part. It works like this: The “Split” context...
Multiple background colors in event (Scheduler)
Answered: You can do this by inserting custom active areas into Scheduler events. The start and end of an active area can be specified using date/time values instead of pixels. That will let you insert custom ...
Scheduler - Disable Cells based on resource Availability
Answered: There is a tutorial that explain how to implement this: JavaScript Scheduler: Displaying Holidays It uses onBeforeCellRender event handler to disable individual cells. The resource-specific date rang...
Custom Event Styling in React Scheduler
Answered: You can use the onBeforeEventRender event handler to customize the events. A sample implementation could look like this: onBeforeEventRender: (args) => {
if(args.data.status === "completed") {
...
Scheduler Time Range Configuration
Answered: There are two ways to solve it: 1. You can define business hours using the businessBeginsHour and businessEndsHour properties and set showNonBusiness to false (see also hiding non-business hours): co...
Event Calendar, resource view: days on Y-axis
Answered: At this moment, the Calendar can only display hours on the vertical axis.
scroll 2 daypilot component in a single scroll event
Answered: You can synchronize two Schedulers using a native scroll event as demonstrated in this demo: https://javascript.daypilot.org/demo/scheduler/eventmovingtwoschedulers.html // scrollbar synchronization
...