Questions Tagged how-to

Answered: https://api.daypilot.org/daypilot-scheduler-eventtextwrappingenabled/

Answered: Please disregard, this has been solved. The scheduler was not initialize in the correct spot to make it globally available aboutside the rendered callback.

Answered: The cssClass property will be added in the next release. At this moment, you can apply custom class using the "theme" property. The theme name is used as a prefix for all classes used for menu elemen...

Answered: At this moment, the vertical scrollbar is not implemented. Just adding the CSS isn't enough as the calculated height needs to be taken into account. I recommend splitting the long list into several g...

Answered: You can use a custom modal dialog and add as many field as needed. Here is an example: async function modalText() { const form = [ {name: "Name", id: "name", type: "text"}, {name: "Description", id: ...

Answered: In order to access objects from the "DayPilot" namespace, you need to include "daypilot-all.min.js". In this case, this means you need to include it in both pages (in the main page and in the modal c...

Answered: LWC uses virtual DOM so you will need to adjust the code a bit. 1. Make sure that the init code is in renderedCallback(). This ensures that the placeholder will be available. 2. The DayPilot.Schedule...

Answered: The modal dialog form is designed to display one field per row. You might be able to adjust the CSS to display two fields per row but it is not supported out of the box at the moment.

Answered: Yes, you can add a custom progress bar using active areas. This approach is outlined in this tutorial (it's for React and Scheduler but the same logic can be used in the Gantt chart component): https...

Answered: You can display recurrent events (and add the necessary icons) but you need to handle the recurrence definition and storage on the server side. The calendar needs to receive the individual occurrence...

Answered: Unfortunately, it is not possible to select multiple options from the drop down list (type: "select" or type: "searchable"). I recommend using a set of checkboxes instead (type: "checkbox").

Answered: This seems to be caused by the wrapper divs that you use to display the columns for DayPilotNavigator and DayPilotCalendar. The tutorial uses "display: flex" to arrange these components but your code...

Answered: You can hide non-business hours using the heightSpec property: const calendar = new DayPilot.Calendar("dp", { heightSpec: "BusinessHoursNoScroll", //... }); calendar.init(); See also: https://doc.day...

Answered: This looks like the minute part which is included in the standard view. However, it doesn't display if you use timeHeaderCellDuration value other than 60. I recommend checking the onBeforeTimeHeaderR...

Answered: You can disable time range selecting using the config: { timeRangeSelectedHandling: "Disabled", // ... } If you want to use this feature to create new events, it is necessary to call clearSelection()...

Answered: You can find the documentation here: Resizing: https://doc.daypilot.org/gantt/task-resizing/ https://api.daypilot.org/daypilot-gantt-ontaskresize/ Moving (horizontal): https://doc.daypilot.org/gantt/...

Answered: You can load resources from an API like this: async componentDidMount() { const {data} = await DayPilot.Http.get(`/api/resources`); this.setState({resources: data}); } The returned data must follow t...

Answered: Sorry for the confusion. You can do this by changing the order of tasks in the data source (it's stored in dp.tasks.list). Then call update() to apply the changes.

Answered: This example uses onBeforeCellRender to customize the monthly calendar cells. It adds the action button using an active area. In Angular, it could look like this: onBeforeCellRender: (args) => { cons...

Answered: I assume you mean the modal dialog: Unfortunately, Angular components in the form items are not supported at the moment.

Answered: At this moment, icons can't be displayed in <select> items - it uses the standard browser element and that doesn't support HTML in <option> elements. You can implement your own form item type using p...

Answered: There is now a new zoom API available in the latest sandbox build (2023.1.5540). See also: https://release.daypilot.org/changes/js/ The API docs and a tutorial are coming soon.

Answered: The BeforeCellRender event is fired for every cell and it needs to be kept as efficient as possible. It is not possible to run a new database query in every invocation. I recommend running a single q...

Answered: You can hide the minutes using CSS: .calendar_default_rowheader_minutes { display: none; }

Answered: Yes - you should take a look at the onTimeRangeSelected event handler in your application. By default, the calendar doesn't do anything when you select a time range (click a cell) so if you see a mod...

Answered: If you click a calendar cell, it will fire onTimeRangeSelect (and onTimeRangeSelected) event handler where you can create a new event. This works in both versions (Lite and Pro). To make sure only a ...

Answered: This should work fine - DayPilot.Gantt.exportAs() method uses the same syntax as DayPilot.Scheduler.exportAs(). However, the range defined using "dateFrom" and "dateTo" can only define a subset of th...

Answered: At this moment, this is not supported but we will take a look at it.

Answered: I have managed to solve this and the solution was: the method that build my events array was async and due to that fact, to update the events field in state I had to perform setState in .then functio...