Questions Tagged how-to
More Obvious Re-Size
Answered: The width of the active resize area can be set using the eventResizeMargin property. See also event drag handles. You can also turn off the built-in resize handles (e.g. using args.data.resizeDisable...
Resize a Bumper Row
Answered: The row height is calculated from the eventHeight property. For an empty row, it is equal to 1*eventHeight. You can set custom eventHeight for each row like this: const resources = [
{ name: "Grou...
Rich Text in Top-Date Hover popup
Answered: 1. To show a hover popup, you can use the Bubble component. For time headers, it is necessary to use an active area that will display a custom bubble when the action is set to “Bubble”. This example ...
How To Update Separators?
Answered: You can use the update() method: scheduler.update({separators}); If the Scheduler detects that only {separators} property is in the update params, it will perform an optimized update and only refresh...
Listen for Event Resizing on UseEffect
Answered: I would recommend handling the logic directly in the onEventResizing event handler. The typical action would be to notify the server or to ask for a confirmation. These actions are not typical “state...
How to avoid resizing under a certain duration in Daypilot Calendar?
Answered: You can use the onEventResizing event to customize the behavior during drag-and-drop resizing. You can use it to enforce custom rules, such as setting a minimum duration: onEventResizing: args => {
...
Index of ResourceHeader
Answered: The onResourceHeaderClicked is a legacy event which has been replaced by the onRowClicked event. In onRowClick and onRowClicked, you can access the column index using args.x.
How to clear selected events with ctrl + click
Answered: The clearSelection() method clears the time range selection. To clear the event selection, you will need to use the multiselect.clear() method. See also event selecting in the documentation.
Copying and Pasting Multiple events accross resources
//I managed to implement the copy multiple events at a go but still running into some errors in run time. //1. I need to know how to clear selection after right clicking on paste. Otherwise even afte...
Display additional header column over multiple dates
Answered: You can add custom elements to the time header using active areas (demo): You can either create a special row for this bar or add it to an existing row.
Implementing Multi-Select of Events in scheduler
Answered: There is a tutorial that shows how to do this: JavaScript Scheduler: Copy Multiple Events Please let me know if it didn’t help!
events.update updates the whole calendar and not the only event, causing flickering.
Answered: There was an issue with events.update() when called with a raw data object as an argument. It should be fixed now in the latest sandbox build (2023.4.5743). It caused the calendar to update the event...
How can i style modal pop-up
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" }...
DayPilot.Gantt - Change/modify links on render?
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 cssCl...
how to disable single eventmoving and resizeing
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...
How to group calendar component time axis to different slots?
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...
Change Appeareance of Drag and Drop.
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...
Is it possible to supply a default text value for the "text" daypilot modal form
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. Whe...
Checkbox inside the events
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.d...
Remove non business hours
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 ("Busi...
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",
...