All Questions

Answered: There are two options: 1. You can switch the built-in bar (displayed at the top of the event) to "progress" mode: https://doc.daypilot.org/scheduler/percent-complete/ 2. You can build the progress ba...

Answered: The best way would be to increase the margin width using columnMarginRight property: https://doc.daypilot.org/calendar/column-margin/

Answered: A imagem está correta, a atividade que está no Píer 1 lado Mar está com início no dia 03/08/2021 as 00:00 hora, isso só está acontecendo quando ela vai para o evento filho, se essa mesma atividade fo...

Answered: The active areas will be included in the exported image. The area dimensions must be fully specified (it doesn't work if you only specify "left" but not "width" or "right"). If you only want to inclu...

Answered: The export is performed on the client side using a canvas element and browsers limit the maximum size of the canvas area. If the exported area exceeds the maximum size the browser won't be able to ex...

Answered: I've solved with the following code: Added a unique class on event inside onBeforeEventRender: args.data.cssClass = args.data.id; Later, inside onEventRightClick I just look for that class and I acti...

Answered: You can use barHidden property of the event to hide the duration bar. You can add it to the source data object or you can add it using onBeforeEventRender: dp.onBeforeEventRender = args => { args.dat...

Answered: Unfortunately, the CSS-level zoom is not supported at the moment. However, you should be able to achieve a similar effect by adjusting the dimensions properties (eventHeight, headerHeight, etc.) and ...

Answered: The "line" property can't be changed in onBeforeEventRender (that's too late). You need to set it in the data source before the Scheduler loads it. You can preprocess the data like this: const events...

Answered: You can turn off the "floating events" feature using floatingEvents property: https://doc.daypilot.org/scheduler/floating-events/ When floating events are disabled, only the div #1 will be displayed.

Answered: If you enable columns ( https://doc.daypilot.org/scheduler/row-header-columns/ ) you need to specify the areas for the respective args.row.columns[] item instead: onBeforeRowHeaderRender: function (a...

Answered: In the JavaScript version, you can use the following methods: 1. To check a time range (for all resources), use the events.forRange() method: https://api.daypilot.org/daypilot-scheduler-events-forran...

Answered: We provide the Vue package at https://npm.daypilot.org . The Vue package is ready to use and you can install it by following the instructions. With reference to a related question ( https://forums.da...

Answered: You are trying to install the Angular package ("daypilot-pro-angular") instead of the Vue package.

Answered: Two steps are required: 1. Include the theme in the global CSS (styles.css): @import url('themes/your_theme.css'); 2. Activate it using the "theme" config property: config: DayPilot.SchedulerConfig =...

Answered: This hint is correct, you can't use "this" in a functional React component. You'll need to create a variable instead: const Scheduler = () => { let scheduler: DayPilot.Scheduler; return ( <div> <DayP...

Answered: You'll need to change the attribute to: OnBeforeEventRender="DayPilotMonth1_BeforeEventRender" or add "Handles" to the the method signature: Protected Sub DayPilotMonth1_BeforeEventRender(ByVal sende...

Answered: Unfortunately, the makeDraggable() method can't be combined with the native HTML5 drag and drop API. However, there is now a new registerDropTarget() method available in the latest sandbox build (202...

Answered: Please see the following tutorial: https://code.daypilot.org/79036/angular-calendar-detect-orientation-change-landscape-portrait

Answered: You can remove both properties. The "cssOnly" property is no longer used (the css-only mode is always active). The "cssClassPrefix" property has been replaced with "theme" - and "bubble_default" is t...

Answered: Please see my comments here: https://forums.daypilot.org/question/5509/how-can-i-make-sticky-date-header-of-angular-gantt-view

Answered: The horizontal (date/time) header is sticky by default. You just need to set the height properly. For all options, please see the Scheduler height topic in the documentation (the Gantt chart uses the...

Answered: You can use an active area with the following properties. This will ensure that the active area will be always visible: visibility: "Visible" Or you can make it permanently visible on touch devices. ...

Answered: You can do that by increasing the cellWidth value: scale: 'CellDuration', cellDuration: 10, cellWidth: 20, See also: https://doc.daypilot.org/scheduler/cell-width/

Answered: You can display Font Awesome icons using active areas. That will let you specify the icon position and dimensions. You can include the active areas in the data source (events.list) but it's better to...

Answered: By default, the Scheduler displays event boxes rounded to the grid cell borders. The exact duration is displayed using the duration bar (if enabled). You can change this behavior using useEventBoxes ...

Answered: Thanks for the feedback!

Answered: The placeholder div is generated automatically by the Angular Scheduler component and it is initialized immediately. You will only see this error if the Scheduler can't find the placeholder which is ...

Answered: You need to make sure that the URL used in dp.rows.load() call returns the data correctly. I recommend using browser developer tools (Ctrl-Shift-I or Option-Command-I), the Network tab, to inspect th...

Answered: No, the Lite version only supports 30-minute slots. See also: https://doc.daypilot.org/calendar/time-cell-duration/