Questions Tagged javascript
Angular 9 upgrade : can not install module with my API key
Answered: Can you please contact support@daypilot.org and include your order number?
Infinite scrolling only works after browser refresh(F5) with version 2020.2.4516
Answered: Version 4516 with the following config it seems to work fine:
config: DayPilot.SchedulerConfig = {
infiniteScrollingEnabled: true,
infiniteScrollingMargin: 20,
infiniteScrollingSte...
findByPixels returns cell with incorrect date
Answered: And what's the use case? The purpose of onGridMouseDown is to modify the click + shift/ctrl/meta behavior before the actual events are fired, not to handle clicks on events and cells. Normally you wo...
unexpected scroll on init | incorrect onScroll behavior |infinity scroll loop
Answered: You must not assign the events attribute in onScroll. This causes the change detection mechanism to refresh the Scheduler and fire another onScroll event. See also a related question (it's for Angula...
Hotel Room Booking Tutorial with infinite scrolling
Answered: The infinite scrolling is only supported for timelines generated automatically (scale !== "Manual"). However, it's possible to adjust the generated time cells using onIncludeTimeCell to achieve the s...
export as pdf
Answered: You'll need to define images using active areas as demonstrated in this tutorial: https://code.daypilot.org/61152/javascript-scheduler-how-to-export-html-to-image
onScroll infinite loop
Answered: Unfortunately, I'm not able to reproduce the problem with args.clearEvents = true. Which version of DayPilot do you use? In Angular, it's necessary to avoid changes to the watched objects ([config] a...
onRowClick/Clicked event
Answered: It's now available in the latest sandbox build (2020.2.4505): https://javascript.daypilot.org/sandbox/
eventEndSpec and onBeforeCellRender args.cell.events()
Answered: This issue is fixed now in the latest sandbox build (2020.2.4519): https://javascript.daypilot.org/sandbox/
infinity horizontal scroll
Answered: It seems i was to early with my post. i came across this documentation. https://doc.daypilot.org/scheduler/infinite-scrolling/ Going to try this out first.
Popup menu (contextmenu) behind modal
Answered: You can set the z-index of both components using zIndex property: https://api.daypilot.org/daypilot-modal-zindex/ https://api.daypilot.org/daypilot-menu-zindex/
DayPilot.Row.events.all()
Answered: You can access the original data object like this:
var data = events[0].data;
Fixed column width on row header
Answered: Hi Bertrand, I'm not sure what exactly the problem is but: 1. The "RowHeaderWidthAutoFit" property needs to be renamed to "rowHeaderWidthAutoFit": https://api.daypilot.org/daypilot-scheduler-rowheade...
Time range context menu is opened when time range is selected and clicking on event
Answered: Can you please give it a try using the latest DayPilot Pro version (2020.2.4470)?
Alert() Replacement in TypeScript, Angular.
Answered: Please see the following tutorial: https://code.daypilot.org/60333/using-daypilot-modal-in-angular-application-typescript
onBeforeCellRender
Answered: The onBeforeCellRender implementation must be very fast because it's called for every cell in the grid during scrolling. I recommend reading all cell data in advance and storing it on the client side...
How to change start time?
Answered: In the Pro version, this can be set using dayBeginsHour and dayEndsHour properties. See also: https://doc.daypilot.org/calendar/overnight-scheduling/
How to change bar color?
Answered: The right property name is "barColor". Here is a full list of event object properties: https://api.daypilot.org/daypilot-event-data/ There is also an example that shows how to change the duration bar...
full display for Calendar
Answered: In the JavaScript version, all member names follow the camel case convention. You need to use "heightSpec": https://api.daypilot.org/daypilot-calendar-heightspec/
In tutorial app is referenced
Answered: It's the Vue app:
var app = new Vue({
el: '#scheduler-app',
data: { }
});
It was missing in the previous code samples - the tutorial is updated now.
Scheduler not showing
Answered: The following combination of properties results in an empty timeline:
days: 1,
startDate: new DayPilot.Date('2020-02-01T00:00:00+00:00'),
showNonBusiness: false,
businessWeekends: false,
The s...
Not having startDate and days filled in in the config doesn't cause the gantt to show every task
Answered: The parent tasks can either use fixed start/end values or values calculated from the children (which is the default mode). You can switch the mode using "taskGroupMode" property: https://api.daypilot...
Change the amount of days on screen, scroll through entire year
Answered: Yes, you'd have to calculate the cellWidth based on the viewport size. Something like this:
cellWidth: function(args) { var days = args.date.daysInMonth(); return Math.floor(dp.nav.scroll.clientWid...
Arrow issue
Answered: This is by design. In the Scheduler, the left edge uses "w-resize" cursor and the right edge uses "e-resize" cursor. If you don't like the appearance you can replace the built-in resize margins by ac...
New Event with dropdown values as name
On the creation of a new event, instead of typing name, get possible values from a query to a mysql. Getting a dropdown menu to select the name of the event.
New Event from a list of pre define events
Answered: I'm not sure if this is what you are looking for but if you have existing unscheduled events/tasks that need to be scheduled you can use external drag and drop to move them to a specific time slot in...
Show Duration of External Drag and Drop Event
Answered: This example uses the generic HTML5 drag and drop API and that doesn't allow reading the source object properties until drop. So unfortunately, this is not possible. If you use the built-in external ...
Sticky Time Header on Javascript Scheduler
Answered: You need to use heightSpec value other than "Auto": https://doc.daypilot.org/scheduler/height/ That will enable a vertical scrollbar and the time header will remain fixed. It's a good idea to design ...
how to delete link
Answered: You can delete a link using the api: https://api.daypilot.org/daypilot-gantt-links-remove/ Users can delete a link using a context menu: https://doc.daypilot.org/gantt/link-deleting/