Questions Tagged javascript

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

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/

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

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

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

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

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.

Answered: In older DayPilot versions (including 2019 versions), the event handler object (args) was not typed (type any). The args.originalEvent holds a MouseEvent object (unmodified event object from the clic...

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

Answered: The React monthly calendar component works the same way - you need to update the "startDate" property and provide the event data for the new range using "events" property. Another option is to update...

Answered: I'm not sure if you will be able to get rid of the flicker. During zoom, the Scheduler is re-rendered with the updated timeline and dimensions (including the row headers). There are a couple of thing...

Answered: Unfortunately, this is not possible at the moment.

Answered: This should be fixed now in the latest sandbox build (2022.4.5471): https://release.daypilot.org/changes/js/

Answered: In some cases this can happen. It's a result of the following logic: 1. The Scheduler enforces a minimum event with of 1px. 2. The overlaps are resolved on pixel level. These rules are necessary to e...

Answered: You need to get a reference to the DayPilot.Month object (using "ref" attribute) and call its update() method to display the events. You can find an example here (see the "How to load calendar event ...

Answered: The date picker component can be configured to display multiple months: https://doc.daypilot.org/navigator/months/ They can be arranged vertically or horizontally: https://doc.daypilot.org/navigator/...

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

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

Answered: I recommend checking your custom CSS theme: If you define z-index for the event boxes, they will appear on top of everything. The Scheduler doesn't use z-index for any element.

Answered: I recommend checking the data that comes from the API endpoint - there might be a problem with the format (most likely the "start" or "end" properties).

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

Answered: This should be fixed now in the latest sandbox build (2022.2.5463): https://release.daypilot.org/changes/js/ Thanks for reporting the issue!

Answered: This should be fixed now in the latest sandbox build (2022.4.434): https://release.daypilot.org/changes/jslite/ The next official release will be available next week. Thanks for reporting the issue!

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/

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

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

Answered: Angular 11 is EOL (see https://angular.io/guide/releases ) and since version 2022.2.5332, DayPilot only supports Angular 12+: https://javascript.daypilot.org/daypilot-pro-for-javascript-2022-2-5332/ ...

Answered: I recommend checking the DOM element using browser developer tools. If you see a broken image icon, the image path may be incorrect.

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