Questions Tagged how-to
Override Daypilot.min.js function
Answered: In case of the ASP.NET WebForms version the client-side library is embedded in the DLL and it's inserted into the page using internal ASP.NET mechanisms. As far as I can tell it's impossible to inser...
How to leave blank area in time header when group is collapsed
Answered: I made a wrapper for daypilot and override method _getScrollableWidth. if (innerHeight > height && !autoHeight && this.reserveSpaceForScrollBar === undefined) || this.reserveSpaceForScrollBar) { scro...
Scheduler ContextMenu Scrolling
Answered: Thank you for your answer. I've found a my solution putting the following code into css file: .menu_default_main {position: absolute; top: 0px; left: 450px; overflow: auto !important; z-index: 11; ma...
Assign Multiple Background Color to an Event
Answered: You can insert custom segments into an event using "active areas": https://doc.daypilot.org/scheduler/event-active-areas/ You can specify the active area position using start/end properties instead o...
Sceduler Export to PDF - the scedule does not show correctly from second page
Hello, When I export schedule to PDF, the rows that has schedule gets shifted down and its not fitting the row like the first page. Is there any way to fix this issue? Thank you.
scheduler export PDF - how to put time bar and dates on the second and third page
Answered: There is a tutorial available that shows how to do this using the client-side export: https://code.daypilot.org/76551/html5-scheduler-paged-pdf-export Basically, it's necessary to export one image pe...
How to Get Specific Date of An Event
Answered: The current position in the grid (in pixels) is stored in DayPilot.Scheduler.coords object. This value is updated in real time:
var coords = dp.coords; // coords.x, coords.y
You can use DayPilot....
Unrecognized HeightSpec value error by default settings.
Hello I'm using lite version of calendar with mvc 5. I want to show the calendar only working hours. So my here is my code which throws above error. Any idea? @Html.DayPilotCalendar("dpc", new DayPil...
Javascript Date To Daypilot Date Conversion
Answered: The constructor has a second parameter which lets you specify whether to use the GMT base or local representation of Date object. This call will use the local representation:
var local = new DayPil...
How to change the time range showing in left hand side of the DayPilot Event Calender
Answered: @Html.DayPilotCalendar("days_resources", new DayPilotCalendarConfig { BusinessBeginsHour = 9, BusinessEndsHour= 17, } you need to add bussiness begins and ends hour in your helper html tag
Scheduler MVC - Hiding rows without events
Answered: The isEmpty() method of DayPilot.Row is available since client core version 2759. It's now available in the sandbox version of DayPilot Pro for ASP.NET MVC: https://mvc.daypilot.org/sandbox/ The late...
DayPilot Scheduler (JavaScript) with SQL Server backend
Hi everyone, Is it possible to use the Scheduler (JavaScript) with a SQL Server database? I see in the tutorials that MySQL & SQLite can be used with PHP backend. I'd like to implement the DPS using ...
Menu: menu is not defined
Answered: 1. The "contextMenu" property specifies a context menu for events. It's activated when you right-click an event (the default eventRightClickHandling value is set to "ContextMenu"). You can also map i...
loadEvents(); wanted to call every 10 sec
Answered: Thanks for the update. There is also a built-in AutoRefresh feature that is a bit smarter (it doesn't fire if a drag and drop operation is in progress): https://doc.daypilot.org/scheduler/autorefresh/
Highlighting Today
Answered: Yes, you were correct I was using Version 7.9.5741.1, now that I changed to 8.3.5862.1 is working properly. Thanks.
Disabled Rows
Answered: The best way would be to use TimeRangeSelectingJavaScript to provide a custom event handler that forbids the selection for the given rows. Something like this:
@Html.DayPilotScheduler("dps", new Da...
onTimeRangeSelected: giving 3 value start/end/resource
Answered: The original data object is accessible as "data" property of the row object. You can get the row object (DayPilot.Row class) using .rows.find():
var row = dp.rows.find(args.resource);
var rm_cat =...
Add or remove doctors
Answered: Management of doctors is not implemented in this tutorial. The doctor data is stored in the database, in a table called "doctor":
CREATE TABLE doctor (
doctor_id INTEGER PRIMARY KEY AU...
How to show Active Areas in Angular4
Answered: You might be defining onBeforeEventRender handler too late in the component lifecycle (after it is rendered). Try adding it to the config object (see also the Angular 4 Calendar tutorial at https://c...
Export Calendar Month with different event colors
Answered: The event colors should be already fixed in the latest sandbox version (since build 2936): https://javascript.daypilot.org/sandbox/ The TypeScript definitions [missing exportAs()] will be updated sho...
Changing HeaderDateFormat in Calendar has no affect on output
I have been experimenting with the DayPilot lite version 1.5.434.0, and I have been unable to change the way the dates are rendered. I would like to have the day name displayed, but currently it only...
One Event with multiple resources but same EventId
Answered: You need to supply one item in the datasource for each of the rows. Typically, you'll be storing the resources assignment (event-resource link) as a separate DB record anyway. I recommend using the a...
Event Resize in vertical and horizontal direction in Scheduler
how can i resize event in both direction horizontal and vertical ? it is just allow me to resize event in vertical direction but not in horizontal direction . can you please help me ?
Drag&Drop of events which cross the border of visible period
Hi! Here is an issue with events which cross the border of the beginning of the visible period. Every event is bound to the start date. But in this case the start date isn't even displayed. So we can...
How to highlight area on Scheduler when clicked on an event
Hi everybody, There is few time I have started to use Daypilot for JS. But now I have a problem that not seems to be in "Demo" section. My goal is to highlight some area when an Event is selected. Fo...
Scroll down a specific Event on filter
Hi, How can i scroll down to a specific event when i apply filter? . when i apply filter event filtered but i have to scroll down to find specific event . is there any way to go on specific event dir...
How to highlight the busy days in angular2
Answered: <daypilot navigator [config]="navigatorConfig" [events]="events" [(date)]="calendarConfig.startDate"></daypilot-navigator> here [events]="events" is list of events which is used in calendar so same c...
Fix Header
Answered: Please take a look at HeightSpec property, especially Parent100Pct value: https://doc.daypilot.org/scheduler/100-pct-height/
How to get the start and end date
I am currently using the trial version of DayPilot Pro. I am displaying a default week / month view of the current week/month. I need to extract from the calendar the start and end dates it is showin...
How to display full time on monthly calendar event
Answered: I found a solution in a demo project. The demo project is in the DayPilotProTrial-8.3.3601.zip on the following page : https://www.daypilot.org/demo/ On the StartEndTime aspx page, look for the OnBef...