Questions Tagged how-to

Answered: You can either override selected styles of the built-in theme or create a custom theme and apply it using the theme property: const modal = await DayPilot.Modal.form(form, data, { theme: "my_theme" }...

Answered: At this moment, there is no special onBeforeLinkRender event. However, you can set the properties directly in the data source. You can customize the look using properties like color , style , and css...

Answered: At this moment, you can disable event moving and resizing for individual events only in the Pro version (using moveDisabled and resizeDisabled properties of the data object or using the onBeforeEvent...

Answered: This scenario could be implemented with the following limitations: The maximum cell duration supported at this moment is 1 hour (this is the max slot duration). When switching to the “compact” view y...

Answered: At this moment, it is possible to change the appearance and content of the shadow using the onEventMoving event handler (you can add a custom CSS class and modify the HTML content). See DayPilot.Cale...

Answered: Yes, the form will load the initial values from the source data object using the property mappings ( id property of the form items). The source data object ( data in the example below) is optional. W...

Answered: You probably copied one of the examples that create a hover icon using an event active area in the onBeforeEventRender event handler. It might look like this: onBeforeEventRender: args => { args.data...

Answered: In the Scheduler component, you can hide the non-business hours using the showNonBusiness property. In the Calendar component, you can hide the non-business hours using the heightSpec property ( "Bus...

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 ....

Answered: In the latest sandbox build (2023.3.5736), the getCoords() method is now available for the Gantt Chart as well.

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...

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...

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...

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 co...

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...

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.

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", timeRangeSelectedHandling...

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,...

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...

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.

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...

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...

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...

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 t...

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...

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) { const...

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 ...

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 (incl...