Questions Tagged how-to
How to set the start of the week as monday
Answered: The Gantt Chart component uses the "locale" property to determine the first day of week: https://api.daypilot.org/daypilot-gantt-locale/ You can use one of the built-in locales or create your own. Se...
How to export Gantt view in png/svg/pdf
Answered: Please see my comments here: https://forums.daypilot.org/question/5962/how-to-export-gantt-chart-view-in-png-svg-pdf-in-2022-4-548
Gantt-Chart: Dotted line for current date
Answered: You can add a separator to the Gantt chart to highlight the current date/time: https://doc.daypilot.org/gantt/separators/ The separators are marked with "gantt_default_separator" CSS class - you can ...
Make editable cell in rowHeaderColumn when double click
Answered: The Scheduler supports inline editing of the row header. However, you can only edit the first row header column at the moment: https://doc.daypilot.org/scheduler/row-editing/
NPM javascript throws error "Uncaught ReferenceError: module is not defined"
Answered: The JavaScript NPM package (daypilot-pro-javascript) defines a CommonJS module which can't be used directly in the browser. The purpose is to allow using DayPilot in a Node project. In the browser, y...
Scheduler - How to add active areas to cells
Answered: 1. You can make space for the active areas at the bottom using the "rowMarginBottom" property : https://api.daypilot.org/daypilot-scheduler-rowmarginbottom/ 2. If you use the full crosshair mode the ...
Gantt - How to automatically move task2 start when task1 resized or moved
Answered: Unfortunately, there is no built-in support for automatic moving of the linked events at the moment. You would have to detect which tasks need to be moved and update them in onEventMoved event handle...
MaxEvents for scheduler is possible?
Answered: This option is now available in the Scheduler (since version 2023.1.5515). You can specify a maximum number of lines for each row using the new "maxLines" property. For an example, please see the fol...
Scheduler - How set the same margin between events and between events and cell borders
Answered: There are two options: 1. You can use "eventMarginLeft" and/or "eventMarginRight" properties: https://api.daypilot.org/daypilot-scheduler-eventmarginleft/ https://api.daypilot.org/daypilot-scheduler-...
Scheduler - How to programmatically fire onBeforeCellRender for certain resources
Answered: You can either update the full scheduler using update(): https://api.daypilot.org/daypilot-scheduler-update/ Or you can update a row using rows.update(): https://api.daypilot.org/daypilot-scheduler-r...
How do I modify a database?
Answered: You can take a look at this tutorial: https://code.daypilot.org/64657/angular-scheduler-resource-management It is for Angular, but it shows how to add a context menu to the row headers with additiona...
Scheduler - Restore default behaviour in onTimeRangeSelecting when snap to grid is disabled
Answered: You will find an example of a custom snap-to-grid implementation in this tutorial: https://code.daypilot.org/39403/javascript-scheduler-customized-snap-to-grid It is necessary to round/floor the date...
modal.form html inputs
Answered: This is not a typical scenario but you can use the onClose event handler to query the content before it is removed from DOM: https://api.daypilot.org/daypilot-modal-onclose/
VueJS, DayPilotCalendar, resource view
Answered: In the Lite (open-source) version this is not possible at the moment but in the Pro version you can customize the calendar column headers using "onBeforeHeaderRender" event handler: https://doc.daypi...
Any Option for Max-Width for the columns or Resizable height
Answered: In the latest sandbox build (2022.4.5479), there is now a new property (maxAutoWidth) added to the rowHeaderColumns array items that lets you specify a maximum width that will be respected during row...
How can I get the line of event?
Answered: I do not recommend storing individual line numbers in the database. A fixed line number should only be used for selected events that you want to display in a specific position, out of the standard or...
Trying to update resource row using timerange selected
Answered: This error has been fixed in version 2022.3.5391: https://javascript.daypilot.org/daypilot-pro-for-javascript-2022-3-5391/ Please let me know if the problem persists.
Scheduler - How to center multiple active areas horizontally in row header column
Answered: Unfortunately, it's not possible to center a variable number of active areas horizontally. The width is not adjusted because active areas are displayed in a separate layer which is not part of the ro...
Scheduler - onTimeRangeRightClick not fired on frozen rows
Answered: This should be fixed now in the latest sandbox build (2022.4.5471): https://release.daypilot.org/changes/js/
Show event bubble in Queue?
Answered: Event bubbles are now supported in the Queue component in the latest sandbox build (2022.4.5467): https://release.daypilot.org/changes/js/ You can use the standard API: https://api.daypilot.org/daypi...
Use keyboard with daypilot angular
Answered: The Scheduler attaches "keyup" and "keydown" event handlers to the document element if you enable keyboard support using "keyboardEnabled: true". It uses the document object as the event target (you ...
How to change text in active area.
Answered: It is not possible to change the text of an existing active area using the Scheduler API. The Scheduler is built on a "refresh" model - you need to update the state first and then request an update t...
Scheduler - Is it possible to show whole days, although cell duration is half-day
Answered: You can use onBeforeGridLineRender to hide selected grid lines in the Scheduler: https://api.daypilot.org/daypilot-scheduler-onbeforegridlinerender/ You can also use a different approach - set scale ...
Start drag and drop programatically (Scheduler)
Answered: That is not possible but you can activate any element to be draggable to the Scheduler using DayPilot.Scheduler.makeDraggable(): https://api.daypilot.org/daypilot-scheduler-makedraggable/
Scheduler - Changing the margin for certain events
Answered: Unfortunately, this is not supported at the moment. You can change it using CSS by overriding (increasing) the left/right/top/bottom properties of the inner div (marked with "scheduler_default_event_...
Confirm pop up on calendar
Answered: The onValidate event handler can't be asynchronous. Every change of "args" made after the "await" call in validateDateRequired() method will be ignored. If there are values which you allow but requir...
Gantt Chart - the html(img) is not rendering on the gantt view.
Answered: I recommend checking the DOM element using browser developer tools. If you see a broken image icon, the image path may be incorrect.
Scheduler - How to use linear-gradient() in event's backColor property
Answered: You can set the gradient using the "backColor" property. See also: https://api.daypilot.org/daypilot-event-data/ This example uses DayPilot.ColorUtil.lighter() and DayPilot.ColorUtil.darker() helpers...
Conditional drags crashes scheduler
Answered: There are a couple of issues with this example: 1. If you set args.async = true, you must call args.loaded() in every code path. Otherwise the dragging operation will remain active. The first "if" bl...