All Questions
Displaying several properties of an event in different active areas, during PNG export
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...
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 => {
arg...
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 ...
How switch between line = 0 and line = 'dedicated' in a Event?
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 even...
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 validate if current cell has Events (Scheduler)?
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...
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.dayp...
vue npm error!
Answered: You are trying to install the Angular package ("daypilot-pro-angular") instead of the Vue package.
Clean solution to import custom scheduler theme with prefix CSS in Angular project
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.SchedulerCo...
this in undefined in the addEvent example
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...
Month Event Prerender not working
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...
Using DayPilot.Calendar.makeDraggable and native drag/drop on the same html element
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...
DayPilot for angular mobile touch device.
Answered: Please see the following tutorial: https://code.daypilot.org/79036/angular-calendar-detect-orientation-change-landscape-portrait
I'm facing issue while updating my daypilot version 2018 to 2021.
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...
Gannt View Sticky date header.
Answered: Please see my comments here: https://forums.daypilot.org/question/5509/how-can-i-make-sticky-date-header-of-angular-gantt-view
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...
Delete on mobile
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 devic...
Changing cell width without changing the cell duration
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/
FontAwesome
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...
More precise event's position
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 ...
I'm Using angular Daypilot Scheduler.
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 ...
How to load row axis based on selected items from dropdown by the user
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...
Show calendar with 15 minutes slots
Answered: No, the Lite version only supports 30-minute slots. See also: https://doc.daypilot.org/calendar/time-cell-duration/
load data based on dropdown list
Answered: Please see my answer here: https://forums.daypilot.org/question/5494/how-to-refresh-gannt-chart-based-on-dropdown-values
How to refresh gannt chart based on dropdown values
Answered: The following tutorial includes a project that displays a drop-down list with locations: https://code.daypilot.org/61166/php-shift-planning-javascript-html5-mysql-database When a user selects an item...
How to change color of duration bar based on values in database
Answered: The backend_events.php script should look like this:
<?php
require_once '_db.php';
$stmt = $db->prepare("SELECT * FROM leave_event WHERE NOT ((leave_end <= :start) OR (leave_start >= :end))");
...