Questions Tagged javascript

Answered: You can use *ngIf on the <daypilot-scheduler> element: <daypilot-scheduler [config]="config" [events]="events" #scheduler *ngIf="visible"></daypilot-scheduler> You can also create the component dynam...

Answered: Yes, this is possible. You can specify the delay using the "options" parameter of the message() method: dp.message("Welcome!", {delay: 5000}); See also: https://api.daypilot.org/daypilot-scheduler-me...

Answered: The Switcher is only necessary if you want to manage different components, e.g. DayPilot.Calendar for the week view and DayPilot.Month for the Month view. If you are using two different configuration...

Answered: The makeDraggable() method adds special event handlers (mousedown, touchstart) to the target DOM element but it doesn't link it to the Scheduler component. It's not necessary to clean the elements ex...

Answered: i solved this in an easier way than i expected. I just discovered i can use thymeleaf in the javascript so i send the model of an event to the view and i get it done like this. <script th:inline="jav...

Answered: Since build 2020.1.4264, it's possible to read the current sort criteria using DayPilot.Scheduler.rows.sortParam property (read-only): https://api.daypilot.org/daypilot-scheduler-rows-sortparam/

Answered: The scrollbar used by the Scheduler is the native browser scrollbar which is always displayed at the bottom. In order to make the scrollbar visible, make sure that you are using heightSpec="Parent100...

Answered: If you mean the row header columns you can change them using "rowHeaderColumns" property. In React, you can use rowHeaderColumns attribute of the <DayPilotScheduler> tag. See also: https://doc.daypil...

Answered: Please take a look at this option: https://doc.daypilot.org/scheduler/exact-event-duration/ Let me know if this is not what you are looking for.

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

Answered: Yes, please see the options here: https://doc.daypilot.org/scheduler/height/

Answered: You can rotate the text using CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

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.typescriptlang.org/docs/han...

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.

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

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(), function (result) ...

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

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

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

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

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

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

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

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

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.

Answered: You can override the text in the time header using onBeforeTimeHeaderRender event handler: https://doc.daypilot.org/scheduler/time-header-customization/

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