Questions Tagged javascript
args.loaded is not a function
Answered: In version 2023.1.5508, asynchronous processing of onEventDelete is not supported. It is now available in the latest sandbox build (2023.1.5525+). See also: https://release.daypilot.org/changes/js/
Scheduler - Rendering issue with row header height after hiding/showing events
Answered: Thanks - but after changing the event properties, you need to update the Scheduler to make the changes visible. Do you call update()? Or events.update()?
Does Gantt have a dispose() method?
Answered: There is a special React package that defines a <DayPilotGantt> React component which you can use in your JSX instead of creating the instance manually using a placeholder and init() method. To see h...
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...
Scheduler - Stacking of Overlapping Events
Answered: Do I understand it correctly that although there are three events in the screenshot you define six events? Events are rendered in the in the order determined by the default sort order. You can also d...
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
Scheduler - DayPilot.Scheduler: The placeholder element not found: 'dp_1673963716024126533'.
Answered: The Angular Scheduler component includes a placeholder div in its template. This placeholder is then initialized using init() call in ngAfterViewInit() - you can also see this in the stack trace. If ...
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/
Splitter between the rowheader grid and task grid not showing
Answered: I've tried to add your config to a new Angular Gantt chart project generated using https://builder.daypilot.org and it seems to work fine. The splitter appears as expected. If you are using a custom ...
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...
Create custom column with DayPilot scheduler in angular 12
Answered: Please take a look at the following tutorial: https://code.daypilot.org/49959/javascript-scheduler-show-hide-columns-using-context-menu It uses a context menu to show/hide individual row header colum...
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...
Previous And next not working when Adding more features to it..?
Answered: I recommend you to review the code and remove duplicate parts - that makes it confusing and error-prone. You define three functions that do the same thing. There are also other issues, like calling s...
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...
Back end
Answered: This project shows a single page with the restaurant reservation UI. It is kept as simple as possible so that the code can be modified easily. There is no admin part.
Scheduler - right clicking changes existing time range selection
Answered: Thanks for uploading the sample project. This issue should be fixed now in the latest sandbox build (2023.1.5487): https://release.daypilot.org/changes/js/ Please let me know if it doesn't work as ex...
Scheduler - New Event Placement Strategy
Answered: You might want to take a look at the "split resources" feature: https://doc.daypilot.org/scheduler/split-resources/ It lets you split a resource into multiple subresources, each having a special row ...
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...
Scheduler - Cannot read properties of undefined (reading 'ignoreDisabledCells')
Answered: > No, but I forget to tell, that the error happens on right clicking any cell. It doesn't matter to which row the cell belongs. I select it and right click, then the error shows. Could you please che...
Feature: Display in new line if event overlaps htmlLeft / htmlRight of another event.
Answered: The element that displays htmlLeft/htmlRight content has variable width and it's not possible to calculate the real width without expensive pre-rendering. However, you can use a workaround: You can r...
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...
dblclick is not working after daypilot upgrade
Answered: From your example it's not obvious what kind of element that is and where you add it (it is not part of the standard Scheduler structure). Please note that the Scheduler parts are rendered progressiv...