Questions Tagged javascript

how to export cornerHtml text value ?

Answered: The corner content is now included in the exported image (since build 2021.4.5145). By default, the corner will display the text specified using cornerText property: https://api.daypilot.org/daypilot...

Spacing on right of events

Answered: You can set the margin width using the columnMarginRight property: https://api.daypilot.org/daypilot-calendar-columnmarginright/ dp.columnMarginRight = 0;

Show an icon when hovering a cell with crosshair on

Answered: The full crosshair (crosshairType = "Full") is displayed above the cells and masks access to them. So unfortunately, it's not possible to combine the full crosshair with hover styles for cells. I rec...

Week numbers at 2021 -> 2022 transition

Answered: Hi David, At this moment, the week number is calculated from the first date of the week. That results in week #53 for the transitional week. It's not always possible to provide a default behavior tha...

Scheduler fromStringSortable throwing exceptions

Answered: Thanks! That helped to identify the performance issue. It should be fixed now in the latest sandbox build (2021.4.5128, see https://npm.daypilot.org/ for the Angular version). The constructor used to...

Move per 15 minutes

Answered: Yes, it is possible. Please take a look at the following tutorial: https://code.daypilot.org/39403/javascript-scheduler-customized-snap-to-grid Just remember that the smallest possible step is one pi...

Resize shadow doesn't match event time

Answered: You'd need to turn off the "snap to grid" feature ( https://doc.daypilot.org/scheduler/snap-to-grid/ ) to prevent this behavior: dp.snapToGrid = false;

Move events on drag with blocks of 12 hours

Answered: Yes, please take a look at the following tutorial: https://code.daypilot.org/39403/javascript-scheduler-customized-snap-to-grid Another option would be to change the cell duration to 12 hours using t...

Custom rendering requirements during PNG export

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

Scalability of export PNG

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

Popover using onEventRightClick

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

Duration bar for some events only

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

Using CSS3 zoom breaks Scheduler crosshair

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

Width calculation in custom HTML, for trimmed 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.

Adding a Color Bar using Active Areas doesn't work

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

How can I install .tar.gz

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

vue npm error!

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