Questions Tagged javascript

Answered: The touch features are not fully supported in Edge at this moment. However, it's in the works and it will appear in one of the coming releases.

Answered: Thanks for the update. In that case you can use onAfterEventRender to remove the mousedown event handler. It's defined using onmousedown property so you can simply set it to null: onAfterEventRender:...

Answered: You can enable the indicators using "scrollLabelsVisible" property: config: any = { scrollLabelsVisible: true } See also: https://doc.daypilot.org/calendar/scroll-labels/

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...

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: ...

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...

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.co...

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 ...

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...

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

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 // open the co...

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...

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"); // config .......

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...

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 ...

Answered: The JavaScript config object would look like this: { eventClickHandling: "Select", onEventSelect: function(args) { OnEventClick(args.e); }, eventDoubleClickHandling: "Enabled" // it's disabled by def...

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...

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 is also a built...

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.useEventBoxes...

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 ...

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 resourc...

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 Da...

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...

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.multiMoveVerticalMode ...