Questions Tagged javascript
Scheduler drag and scroll
Answered: On the desktop, this is not supported. You need to use the scrollbar or custom scrolling controls (implemented using scrollTo() - https://api.daypilot.org/daypilot-scheduler-scrollto/). On touch devi...
Vertical scroll
Answered: Yes, please see the options here: https://doc.daypilot.org/scheduler/height/
Set Text in Resource 2nd Columns
How we can set description/text on resource's second column on a button click. I understand on onBeforeResHeaderRender event, I can set description on second column but need to set dynamically. Below...
Scheduler Timeheader Date text 90 degree rotation
Answered: You can rotate the text using CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
Angular show() not working
Answered: In order to access the component using "this" you need to use the arrow function notation:
reSizeScheduler = () => {
this.scheduler.control.show();
}
See also: https://www.typescriptlan...
ivy - SchedulerModule angular 8
Answered: Hi Chris, Ivy + AOT is now supported in Angular 8 and Angular 9 (since build 2020.1.4238). Please let me know if there is any problem.
Vue.js: export and download scheduler as svg
Answered: If you follow this tutorial: https://code.daypilot.org/69423/vue-js-scheduler-build-a-reservation-application-in-5-minut you will be able to access the DayPilot.Scheduler object as "this.scheduler". ...
Upload file on creating new event
Answered: You can see that the form submission is intercepted and sent using a special $.post() request:
$("#f").submit(function () {
var f = $("#f");
$.post(f.attr("action"), f.serialize(), functi...
Scheduler durationbarvisible false not auto adjust event height
Answered: The durationBarVisible property doesn't affect the event height - you can test it by running
dp.update({durationBarVisible:false});
in the browser console at https://javascript.daypilot.org/demo/...
performance index
Answered: You should take a look at the hints provided by the audit tool. The audit breakdown has much higher value than the index itself. You will see what affects the performance of your page and can evaluat...
Scheduler endDate property
Answered: You can calculate the number of days between two days like this:
var days = new DayPilot.Duration("2020-01-01", "2020-01-05").days();
See also: https://api.daypilot.org/daypilot-duration-days/ ht...
(IMP) Doesnot display exact time of the event in Calendar UI
Answered: By default, the calendar component aligns the events with the grid cells and displays a duration bar to indicate the real duration. In the Pro version, you can change this behavior as described here:...
Scheduler export with html tags
Answered: If you define the content using active areas you will get better support during the export and you will be able to include images. See an example here: https://doc.daypilot.org/calendar/exact-event-d...
How to hide two additional columns in gantt Chart
Answered: This can't be done using the built-in icon but you can implement your own logic and change the columns array (https://api.daypilot.org/daypilot-gantt-columns/) as needed. After calling update() the c...
Updating the Navigator with External call to event data
Answered: The Navigator doesn't support events.load() at the moment but you can load the events using update():
var data = [ ... ] ;
nav.update({events: data});
Usually you'll want to reuse the calendar d...
How can I fetch value of new column from database and display it on the calendar?
Answered: You can use onBeforeEventRender event handler to modify the event HTML (args.data.html) using the staff column (args.data.staff): https://doc.daypilot.org/calendar/event-customization/ You can also m...
Scheduler Event Link
Answered: It's not possible to change the link position but you can use custom link styles (colors, etc.). Also, the full link will be highlighted on hover so you'll be able to see it in full.
Angular Scheduler TimeHeader Display Week Wording
Answered: You can override the text in the time header using onBeforeTimeHeaderRender event handler: https://doc.daypilot.org/scheduler/time-header-customization/
When someone clicks on active area, how do I stop the default event from firing?
Answered: That did not do what I was looking for, however, I looked at the docs at the link you sent and adding the following code to the area onClick works: args.originalEvent.preventDefault(); args.originalE...
Angular 8 Scheduler Error: The placeholder element not found when refresh
Answered: Please see more here: https://forums.daypilot.org/question/4269/daypilote-angular-2-error-daypilot-scheduler-the-placeholde
Adding, deleting events does not change the Navigator highlighting
Answered: The navigator can be refreshed by calling update(): https://api.daypilot.org/daypilot-navigator-update/ If the Navigator doesn't share the data array (https://api.daypilot.org/daypilot-navigator-even...
Show current text when Inline Event Editing
Answered: The text area will use the "text" value of the event data object. If you only use "html" to set the event content you'll also need to add "text" property to the data object. See also: https://api.day...
How to Hide Daypilot Gantt Chart none business hours
Answered: You can create your own timeline using "timeline" property (set scale to "Manual"). Or you can use the showNonBusiness property of the underlying "scheduler" object of the DayPilot.Gantt class.
Properties not functioning in add event
Answered: I've tested it by adding this to the main scheduler demo page (https://javascript.daypilot.org/demo/scheduler/) and it seems to work fine:
dp.onTimeRangeSelected = function (args) {
dp...
Calendar - Make delete icon stay on event
Answered: If you disable the built-in delete icon using eventDeleteHandling="Disabled" you will be able to add a custom icon using active areas. See also an example in the docs (https://doc.daypilot.org/schedu...
Adding a new event with client-side immediate update
Answered: After you create the new event in newcalevent.php, you need to send the event details (including the id) back to the main page using DayPilot.Modal.close():
var eventdata = {
id: ...,
start: ...
IE Error when clicking on/resizing an event using Warmup/Cool down Areas
Answered: This is a DayPilot bug. It has been fixed now in the latest sandbox build (2019.4.4159): https://javascript.daypilot.org/sandbox/ Please let me know if the problem persists.
Angular Scheduler Event Link Delete ContentMenu
Answered: The SchedulerConfig.contextMenuLink property is now supported in the latest version: https://javascript.daypilot.org/daypilot-pro-for-javascript-2019-4-4153/
Line of Linked Events on Odd numbered rows are hidden*don't show
Answered: It looks like it might be caused by a scaled view (e.g. browser zoom level not set to 100%). You can try to reset the browser zoom level or increase the link width.
eventDeleteHandling does not remove event
Answered: Looks like I continue to find my own solutions. :) That's a good thing. Here's the missing code that I found to assist me. var e = dp.events.find(args.e.id()); dp.events.remove(e);