Questions Tagged javascript
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...
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...
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...
Dose DayPilot Scheduler Pro support Undo & Redo ?
Answered: There is now a new tutorial available that shows how to implement undo/redo for the JavaScript Scheduler component: https://code.daypilot.org/33599/javascript-scheduler-undo-redo
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...
No result, no data passing to stored procedure?
I am currently trying to implement the ASP.NET and Javascript DayPilot solutions with no luck. At the moment I am using a RecordSet to call from a SQL Database view, and this works. However, my onEve...
calendar resource view - possible to filter column ?
Answered: The latest DayPilot Pro version now supports column filtering API. See the following tutorial: https://code.daypilot.org/25430/javascript-resource-calendar-column-filtering You'll need version 2018.3...
Scheduler + Calendar break rowMoveHandling on Firefox
Hi, I think I have found a bug! If you have the Scheduler and the Calendar directives in the same page, it seems that the rowMoveHandling option stop to work for the Scheduler directive. This strange...
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...
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...
Invalid cellGroupBy value
Answered: I was able to fix it using the online configurator as a guide, here is the modified js used: dp.scale = "CellDuration"; dp.cellDuration = 15; dp.timeHeaders = [ {groupBy: "Day", format: "dddd d MMMM ...
Reorder resources?
Answered: The drag and drop row moving (https://doc.daypilot.org/scheduler/row-moving/) allows moving one row at a time. It will move the selected row, including all children. You can also change the resources...
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 ...
Question without answer for 11 months :/
Answered: Thanks for the update! It looks Ionic does some magic here and it swallows the event click until you click something else in the Scheduler. There is a workaround which is already available - just add...
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...
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...
All appointments shifted by 30 minutes
Hi, Somehow, all my appointments (and business starting hours) are shifted by 30 minutes (see attachment). What am I doing wrong/how can I fix it? Using: DayPilot Calendar, Version: 2018.1.228-lite I...
[?] 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....
Setting eventheight dynamicly makes cells too large when expanding group overlapping
Answered: I was grabbing the value from a dropdown and did not run it through parseInt. That solved the problem - sorry for the trouble :-)
[?] 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