Questions Tagged how-to
Is there any setting for showing More events red icon
Answered: You can enable the indicators using "scrollLabelsVisible" property:
config: any = {
scrollLabelsVisible: true
}
See also: https://doc.daypilot.org/calendar/scroll-labels/
How to remove default mousedown event on calendar events?
Answered: It's not possible to remove event handlers from the event div. However, you can handle onAfterEventRender event to get access to the event div and customize it. The event consists of two main <div> e...
Custom data for Resources
Answered: The MVC version is designed to customize the rows on the server side (using DataItem and OnBeforeResHeaderRender) and at this moment there is no way to pass custom data to the client side.
Business hours and minutes
Answered: 1. You can define the "business" status for each cell using onBeforeCellRender event handler: https://doc.daypilot.org/scheduler/cell-customization/ This affects the cell appearance (.scheduler_defau...
Cannot use DayPilot.Angular.Modal
Answered: The modal dialog tutorial was created some time ago - the DayPilot.Angular namespace has been deprecated meanwhile. An updated version of the tutorial is now available (it uses Angular 6 and DayPilot...
scheduler overlaps anything else i try and add to the web page.
Answered: It looks like you might have placed the Scheduler in an absolutely-positioned element that is displayed as a top layer. The Scheduler also supports a special mode where it fills the available space: ...
Text on duration bar
Answered: 1. You need to increase the height of the duration bar. The height is defined using CSS and you need to override the default style. It's defined using two elements, .scheduler_default_bar and .schedu...
How To Print Scheduler With Angular 4+
Answered: There are two options: 1. You can print the exported image (SVG format works best because it's scalable). This command exports the Scheduler as SVG and open the browser print image:
this.scheduler....
Display Resources on a time range
Answered: If you are switching the date using an .update() call you can simply update the resources array (https://api.daypilot.org/daypilot-scheduler-resources/) at the same time. It might be also possible to...
Select multiple events from code
Answered: Unfortunately, the Lite edition doesn't support event selecting. In the Pro version, you can select the events using SelectedEvents list (in the Scheduler). It's a list of simplified EventInfo object...
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 ...