Questions Tagged how-to
Event text is overlapping with added active areas
Answered: There are two ways to fix that: 1. Apply additional padding to the inner event div ("scheduler_default_event_inner" CSS class in the Scheduler) to prevent overlapping with the active area. 2. Set the...
Overlay to indicate days has past
Answered: One option is to add custom CSS (using cell.cssClass) and create styles for all different combinations of classes (they are all applied at the same level): .scheduler_default_cell, .scheduler_default...
Hide complete percentage label
Answered: You can customize the task text/HTML using onBeforeTaskRender:
config: any = {
onBeforeTaskRender: args => {
args.data.box.html = args.data.text; // displays task text instead of percenta...
Custom Context Menu
Answered: You can handle onEventRightClick event and use it to open your own context menu:
dp.onEventRightClick = function(args) {
args.preventDefault();
var e = args.e; // DayPilot.Event object
...
Capture Drag Start
Answered: Hi Aliaa, Take a look at the following tutorial: https://code.daypilot.org/20663/html5-machine-production-job-scheduling-tutorial-php-mysql In "Creating a Follow-Up Job" section, it explains how to c...
How do you insert multiple different Gantt Charts in your website?
Answered: Just use two placeholder divs and create a DayPilot.Gantt instance for each of them:
<div id="gantt1"></div>
<div id="gantt2"></div>
<script>
var gantt1 = new DayPilot.Gantt("gantt1");
// con...
Error while re-populating the Daypilot weekly scheduler
Answered: This exception is part of the input data validation that was introduced recently. You should check if the events.list property holds correct items. It must be an array of objects which have the follo...
[dp.Locale] Can't get timeFormat value
Answered: Sorry, it's ok. I didn't use the constructor to create my dp2.locale variable .! > dp2.locale = new DayPilot.Locale(jsonObj.data.settings[0].cultureInfo); Still thanks for the time you spent reading ...
MVC to Jquery conversion for Daypilot Event Selection
Answered: The JavaScript config object would look like this:
{
eventClickHandling: "Select",
onEventSelect: function(args) { OnEventClick(args.e); },
eventDoubleClickHandling: "Enabled" // it's dis...
Update .timeHeaders doesn't work (with scheduler).
Answered: In the MVC version, the time headers are generated on the server side and it's not possible to switch the view without calling the server. You can request an update using commandCallBack() method whi...
How to make an event style as selected on mouse click?
Answered: You can change the event background color using onEventClick event handler:
dp.onEventClick = function(args) {
var e = args.e;
e.data.backColor = "blue";
dp.events.update(e);
};
There i...
Disable Blank cells
Answered: I was able to figure this out by setting the setting TimeRangeSelectedHandling to disabled.
Event Cell Wrapping
Answered: I'm not sure if this is what you need but you can control how concurrent events are arranged using EventArrangement property: https://doc.daypilot.org/calendar/event-arrangement-mode/ Let me know if ...
Drag drop users to the Daypilot calendar event
Hi, I want to drag and drop resource (i.e. User) to the event of daypilot calendar, Is there any way i can do it? I can see there is external drag and drop https://javascript.daypilot.org/demo/calend...
Daypilot Weekly Scheduler Event Box Size
Answered: You can control the behavior using useEventBoxes property: https://doc.daypilot.org/scheduler/exact-event-duration/ If you don't want the event boxes to be aligned with the grid use:
dp.useEventBox...
Gannt Period Limit
Answered: You can control the visible data range using StartDate and Days properties. You can use Days property to increase the number of visible days.
Move Resoources
Answered: You can also move a resource by modifying the "resources" array. Afer making the changes, call update() to refresh the Scheduler. This example sorts the rows alphabetically (by name):
var dp = new ...
dynamically set background
Answered: You can also change the background color of the grid cells, the mechanism is the same. Just use BeforeCellRender event handler:
protected void DayPilotScheduler1_BeforeCellRender(object sender, Day...
modal.showURL isn't firing the Page_Load so dropdownlist doesn't fill
Answered: Arghhh... In the Page markup at the top of the edit and new aspx markup... AutoEventWireup="true" needs to be set (as it is in the demo). Creating a new webform in visual studio by default sets that ...
Daypilot Modal (Mobile Safari Bug with Stretching)
There's an issue on mobile safari caused by it not returning the correct documentElement.clientHeight/Width. After testing some of the other ways to get the height of the modal I couldn't figure out ...
Can I make Joint Events move vertically across resources?
Answered: The behavior is controlled by multiMoveVerticalMode property. By default, it's set to "Disabled" which disables vertical moving. You can use "All" to enable vertical moving:
dp.multiMoveVerticalMod...
Import ics file
Answered: You'll need a library that handles iCalendar format to import an ics file. One of the free libraries available is DDay.iCal. It's used in the export tutorial for exporting the events to ics: https://...
Getting error Uncaught TypeError: Cannot read property 'id' of undefined
Hi, I am using daypilot-calendar control and daypilot-month control, In my application i added Week and Month view, so based on selection i hide other and show that component, Its working fine, But r...
DayPilotScheduler - hide non business hours
Answered: Unfortunately, this feature is only available in the Pro version. See also the feature comparison: https://aspnet.daypilot.org/feature-matrix/
[?] How to change the Event Areas value from dps.contextMenu
Answered: If you have access to the DayPilot.Event object (e) you can change it like this:
// e holds DayPilot.Event object
e.data.areas = [{ html: "Confirmed", right: jsonTags.AreasRight, bottom: jsonTags....
[?] Update Event client-site
Answered: After read some sample code, I know how to do. Instead of `e.client.moveEnabled = false; ` , it should be ` e.data.moveDisabled = false;` and after that, use ` dp.events.update(e).queue();` to update
Change color of some resource divider
Answered: Unfortunately the divider div is not part of the resource header element so you can't control it using resource properties. However, you can hide the default divider and use a bottom border of the ro...
options to split hour
Answered: For the Calendar component (used in index.php and doctor.php) you can adjust the scale to show 15-minute cells using cellDuration property:
var calendar= new DayPilot.Calendar("dp");
// ...
calen...
Showing Custom Data
Answered: The Scheduler requires the key data (such as event start, end, id) to be stored in specific properties. You need to transform your data items to match the required structure. You can use map() to do ...