Questions Tagged how-to

Answered: This seems to be a problem of some of the older releases. The latest version (2025.2.6442) should work fine with args.target = "Text"; . Could you please give it a try? Please let me know if the prob...

Answered: Yes, this can be done by hiding selected time columns using the onIncludeTimeCell event handler or by defining the timeline manually .

Answered: At this moment, the Lite version of the Calendar only displays events this way - the start and end times are aligned with the grid cells and the real duration is highlighted using the duration bar . ...

Answered: The onIncludeTimeCell logic should look like this (it works for two days and scale="Hours" ): onIncludeTimeCell: (args) => { const businessStart = 21; // 9 PM (21:00) const businessEnd = 6; // 6 AM (...

Answered: Please take a look at this tutorial: JavaScript Calendar in Read-Only Mode (Open-Source)

Answered: Since version 2025.1.5435 , it is possible to handle these actions using these new events: onRowCollapse onRowExpand

Answered: Yes, you can use the same property ( linkShape ) in the Gantt Chart.

Answered: You can use the onBeforeTaskRender event handler to customize the task boxes . This event will let you set custom color easily. { onBeforeTaskRender: (args) => { args.data.box.backColor = "#cc0000"; ...

Answered: You can take a look at the JavaScript Scheduler: Resource Utilization Chart for Rows tutorial:

Answered: Sorry for the delay. This can be done like this: const scheduler = new DayPilot.Scheduler("scheduler", { onRowMouseOver: args => { if (app.dragging) { args.row.cells.all().addClass("cell-target"); } ...

Answered: Yes, it is possible to activate inline editing mode for the row headers , or you can open a modal dialog with task details on click (see Task Editing ).

Answered: Please see here: https://forums.daypilot.org/question/6575/is-it-possible-to-edit-gantt-chart-event

Answered: Have you modified the source code? Or maybe you have overwritten the DayPilot.Date object? Because all this should work fine - you can also test it in the JavaScript console in the online demo .

Answered: The filter param is only available in the onEventFilter event handler. The best way would be to store the filter value in a special variable outside of the Scheduler object. This approach is used for...

Answered: In the Lite version, you can use this config: { businessBeginsHour: 8, businessEndsHour: 21, heightSpec: "BusinessHoursNoScroll" } This will display only the specified hours, but there will be no ver...

Answered: For the time range selection/grid cell right clicks, you can define the context menu using the ContextMenuSelectionID property. See also Time Range Context Menu .

Answered: I was able to manually select the current date in javascript inside the form using dp_navigator.select(new Date()); thanks

Answered: The linkShape property is now available in the Gantt chart in the latest sandbox build (2025.1.6403).

Answered: Yes, this is possible. If the built-in time header units don’t work for you, you can define custom segments, as described in the following tutorial: JavaScript Scheduler: Custom Time Header Segments

Answered: Yes, you can use the onBeforeTimeHeaderRender event handler to customize the time header . There is a tutorial available that shows how to calculate the summary/utilization details using methods like...

Answered: Unfortunately, the frozen rows feature is only available in the JavaScript version.

Answered: This problem should be fixed now in the latest sandbox build (2025.1.6400).

Answered: The minLine property is now available as an experimental feature in the latest sandbox build (2025.1.6407).

Answered: Sorry for the delay! It looks like you might reset the StartDate value at some point. I recommend checking Page_Load and the <DayPilot:DayPilotNavigator> tag. It also depends how you refresh the page...

Answered: There was an issue that prevented double click on calendar cells next to existing events from working. It was fixed in version 2025.1.6333 , so make sure that you are using the latest release. I assu...

Answered: You can use the row filter to hide selected rows in the Scheduler. If you set rowFilterParentsAlwaysVisible to false , the parent rows that don’t match the filter will be hidden as well.

Answered: For PostBack updates, you can place a label control above the calendar and set its text from code behind based on DayPilotMonth.StartDate value. If you change the date using a callback, you can use A...

Answered: You can use active areas to insert blocks with custom start/end inside cells. You can find an example here (this tutorial shows how to block selected time ranges): JavaScript Scheduler: Disabling Cus...

Answered: Sorry for the delay! This is hard to guess, but probably it’s some custom CSS. You can try turing the global CSS of temporarily to see if the problem disappears and use browser developer tools to ins...