Questions Tagged javascript

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: Frozen rows are now supported by the row filter in the latest sandbox build (2023.1.5544). The documentation is updated as well: https://doc.daypilot.org/scheduler/frozen-rows/

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: The Scheduler provides the following tools to help you make it accessible: the Scheduler elements (main areas, items) are marked with "aria-label" attributes you can enable keyboard support ( https:/...

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

Answered: This issue should be fixed now in the latest sandbox build (2023.1.5540): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

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: It looks like you have modified the source code - you should use the original (commented-out in your screenshot) regex: var already = new RegExp("(^|\\s)" + name + "($|\\s)");

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

Answered: It is possible to modify the appearance using CSS. You can either override the built-in CSS theme for selected elements or you can create a custom CSS theme ( https://themes.daypilot.org ) and adjust...

Answered: The $refs values will only be accessible after the component is mounted. Before that, this.$refs.calendar (or any other $refs value) will be undefined and you will see this error. 1. If you move your...

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...

Answered: This turned out to be a minification issue. It should be fixed now in the latest sandbox build (2023.1.449): https://release.daypilot.org/changes/jslite/ The next official release will be available n...

Answered: The "dp" variable used in example is a reference to DayPilot.Scheduler object. In Vue, you can get it using the "ref" attribute: <template> <DayPilotScheduler id="dp" :config="config" ref="scheduler"...

Answered: You can implement custom rules for event moving using "onEventMoving" event handler. You can find an example here: https://doc.daypilot.org/scheduler/event-moving-customization/

Answered: You can either use a string value (such as "2023-02-15" or "2023-02-15T00:00:00") which will be converted to an exact date. const date = new DayPilot.Date("2023-02-15T00:00:00"); If you have a Date o...

Answered: By default, the Scheduler aligns event boxes with the grid cells. The exact start and end are displayed using the duration bar at the top of the event. You can turn it off using "useEventBoxes" prope...

Answered: By default, the Scheduler component merges cells of parent resources into a single cell. You can enable multiple columns for parents using rowHeaderColumnsMergeParents property: https://api.daypilot....

Answered: If you mean the modal dialog ( https://modal.daypilot.org ), you can use the "okText" option to change the "OK" button text: https://api.daypilot.org/daypilot-modal-oktext/

Answered: Great, thanks for the update. In the latest sandbox build (2023.1.444), the Calendar component now accepts null as well and treats it as []: https://release.daypilot.org/changes/jslite/