Questions Tagged how-to
Change the starting hour and ending hour of Scheduler?
Answered: Yes, this is possible. Please see the documentation for more details: https://doc.daypilot.org/scheduler/hiding-non-business-hours/
Calendar hover color remains active when moving mouse between calendars
Answered: Hi Dave, This issue should be fixed now in the latest sandbox build (2021.1.3780): https://aspnet.daypilot.org/sandbox/ Please let me know if the problem persists.
Event calendar scrolling on event draw/resize/move
Answered: Unfortunately, this is feature is not available in the Calendar at the moment.
How to make event in disabled Cell clickable
Answered: You can add moveDisabled and resizeDisabled properties to the event data object. This will forbid drag operations but the onEventClick event handler will still be fired for such events:
dp.events.l...
Add event listener on holiday marked cells
Answered: You can display a custom text/html using a cell bubble if you add this to the config:
var dp = new DayPilot.Scheduler("dp", {
// ...
cellBubble: new DayPilot.Bubble({
onLoad: funct...
Resize only one side of event
Answered: Yes: You need to disable resizing using eventResizeHandling="Disabled" (https://api.daypilot.org/daypilot-scheduler-eventresizehandling/) and add an active area at the end with action: "ResizeEnd". T...
Scheduler - hide parent resources when filtering
Answered: In the latest sandbox build (2021.1.4830), you can now control this using "rowFilterParentsAlwaysVisible" property. The default value is true but if you set it to false it will hide parents that don'...
Property 'makeDraggable' does not exist on type 'typeof Calendar'.
Answered: The DayPilot.Calendar.makeDraggable() method was missing in the TypeScript definitions. It's now added in the latest sandbox build (2021.1.4829). As a workaround, you can cast the DayPilot object to ...
Insert gap between multiple stacked events to ensure good user readibility
Answered: You can use eventMarginBottom property to specify the space between events: https://api.daypilot.org/daypilot-scheduler-eventmarginbottom/ Please note that in the current release, it's incorrectly ap...
Add Resources Afterwards
Answered: To add resources you need to modify the resources[] array and call update():
dp.resources.push({name: "New resource 1", id: "NR1"});
dp.resources.push({name: "New resource 2", id: "NR2"});
dp.upd...
DayPilot bubble is not working
Answered: The bubble is available in DayPilot Pro (paid version) but not in DayPilot Lite (open-source version). You can get an evaluation version of DayPilot Pro here: https://aspnet.daypilot.org/try/
DayPilot bubble is not working
Answered: For an example of <DayPilotBubble> usage please see the following demo: https://aspnet.daypilot.org/demo/Calendar/EventBubble.aspx The source code of the demo is in Demo/Calendar.EventBubble.aspx fil...
Diferent design for resource bubble and event bubble
Answered: I already found the problem, I changed the class name for event bubble using this: bubble: new DayPilot.Bubble({ theme: "bubble_event_main", }), Thank you.
Row selection in latest versions.
Answered: The onAfterRender event handler is not a good place to do this. It's only fired if the whole Scheduler is updated. If you want to customize the grid cell elements you should use onAfterCellRender ins...
How to convert php to spring boot
Answered: Unfortunately, this tutorial is not available for Spring Boot at this moment. To see how the Calendar and Scheduler components can be used with Spring Boot backend, please see the following tutorials...
DayPilot Pro for angular
Answered: Yes, the latest release (2020.4.4807) works with any Angular version (since Angular 2).
Update certain columns of the resources
Answered: 1. You can update a single row using rows.update(): https://api.daypilot.org/daypilot-scheduler-rows-update/ 2. It's also possible to change HTML of a specific row header column directly using DayPil...
crosshairType (Full): events part of frozen rows is not highlighted
Answered: The full crosshair is now fully supported in combination with frozen rows in the latest sandbox build (since 2020.4.4811).
Scheduler: keyboard navigation using the Tab-key
Answered: At this moment, no. The keyboard access has no API yet. It will be introduced soon and it will include an option to add custom key mappings.
i want to chart add in codeigniter but data not fetch from conreoller
i want to chart add in codeigniter but data not fetch from conreoller anyone can send me code for codeigniter same chart?
Line between normal and frozen rows
Answered: In the latest version (2020.4.4807), the horizontal lines separating frozen rows from the main grid are now marked with special CSS classes (*_divider_horizontal_frozen_top and *_divider_horizontal_f...
How can I remove Gantt chart default name?
Answered: You can override this text using onBeforeTaskRender event, by calling args.data.box.htmlRight = ""; there. See also: https://api.daypilot.org/daypilot-gantt-onbeforetaskrender/
Angular 6 Zoom level.
Answered: As far as I can see, there is no .start property used in the HTML template in the tutorial. I recommend using the attached project as a reference - it runs fine without any errors.
Floating Events doesn't work
Answered: The floating events are enabled by default. It works as follows: 1. Events that start before startDate will have *_event_continueleft class. This doesn't change with scrolling. 2. The float div (mark...
Initial events load seems to happen before onBeforeCellRender()
Answered: This issue should be fixed now in the latest sandbox build (2020.4.4805). Could you please give it a try and let me know if the problem persists? https://javascript.daypilot.org/sandbox/
Scheduler limit the number of column
Answered: This can't be done automatically but you can calculate the cellWidth value based on the screen size (window.innerWidth) before displaying the Scheduler. You need to take into account the width of oth...
How to show current month on button click?
Answered: It looks like you are missing "configMonth" change in your method:
currentDate(date: DayPilot.Date): void {
this.configDay.startDate = date;
this.configWeek.startDate = date;
this.configMo...
Disable range selection Calendar
Answered: In DayPilot Pro for JavaScript, you can do this using onTimeRangeSelecting event handler: https://api.daypilot.org/daypilot-calendar-ontimerangeselecting/ Unfortunately, it's not available in the Lit...
Declaration-file for Vue.JS
Answered: The TypeScript declarations are now included in the latest sandbox build (2020.4.4792) of the Vue package (daypilot-pro-vue). Please let me know if there is any problem.