Questions Tagged javascript

Answered: The date calculations shouldn't be affected by the system timezone because all internal calculations are done using the UTC base of the dates. It is however affected by the format you use to specify ...

Answered: DayPilot includes a built-in callout named "bubble". See more here: https://doc.daypilot.org/calendar/event-bubble/ You can map it to event click action by setting eventClickHandling config property ...

Answered: For the double click you should use: eventDoubleClickHandling: "Enabled", onEventDoubleClick: function(args) { // open modal here, event details are in args.e } The context menu item should look like...

Answered: Yes, it's possible. Just use the "icon" property to specify the CSS classes: var dp = new DayPilot.Scheduler("dp", { // ... contextMenu: new DayPilot.Menu({ items: [ { text: "User details...", icon: ...

Answered: Unfortunately, customization of the additional events that are moved during multi-moving is not possible at the moment. It's in the queue but I'm not able to provide the availability date now.

Answered: There are two options: 1. You can set the context menu using "contextMenu" property in onBeforeEventRender: var menu1 = new DayPilot.Menu({ ... }); var menu2 = new DayPilot.Menu({ ... }); // ... dp.o...

Answered: You can add a custom CSS class to the event using cssClass property of the data object: // e is the DayPilot.Event object // dp is the DayPilot.Scheduler object e.data.cssClass = "semi-transparent"; ...

Answered: Unfortunately, a custom external drop target is not supported at the moment. However, it is possible to drag events between to Scheduler instances. It would be possible to create a simplified instanc...

Answered: The Scheduler requires both the start and end dates of the event to be set. An empty value will be replaced by new DayPilot.Date() instance which represents the current time. In your case, it might b...

Answered: Since version 2019.3.3907 you can use this: dp.onBeforeCellRender = function(args) { if (args.cell.events().length === 0) { args.cell.html = "No event here"; } };

Answered: This is the link to the DayPilot Pro demo: https://javascript.daypilot.org/demo/ And here you can find the DayPilot Lite demo: https://javascript.daypilot.org/demo/lite/ Your link points to the Pro v...

Answered: This is by design. Each event will be displayed as close to the top of the row as possible. If you want to make sure that the blue events are displayed at the same vertical position you'll need to ad...

Answered: The new implementation is now available. Please see the following tutorial that shows how to sort the Scheduler rows by column data: https://code.daypilot.org/78411/javascript-scheduler-row-sorting-t...

Answered: I'm not sure if this is what you are looking for but the Navigator supports highlighting busy days (days with events) out of the box. You can supply the an array with events in the same format that i...

Answered: When styling the Navigator (or any other component) there are two options: 1. Use a custom theme. You can create a theme using the online theme designer ( https://themes.daypilot.org/ ) or you can bu...

Answered: The preventDefault() method needs to be called in the main context (before the onEventResize handler exits). You are calling it in the callback method which is called later and it has no effect. The ...

Answered: The latest sandbox build (2019.2.3891) now supports DayPilot.Calendar.events.forRange(start, end) method. It will return events from the specified range. var selectedEvents = dp.events.forRange("2019...

Answered: In order to show the previous and current months you can use the following config: var nav = new DayPilot.Navigator("nav"); nav.startDate = DayPilot.Date.today().addMonths(-1); nav.showMonths = 2; na...

Answered: There was an issue with the row headers. There was an extra space below the rows that allowed scrolling to an invalid position. This extra space is only required on desktop to make space for the scro...

Answered: Hi Vane, It's now possible to drag external items (including files from desktop and items from other applications) to the Scheduler cells using the native HTML5 drag and drop API. Please see the foll...

Answered: This project doesn't use any authentication. If you can't delete or edit the appointment from the modal dialog there is most likely a server side error (when calling the backend endpoint). You should...

Answered: Mike, Thanks for the update! After checking the implementation it turned out that the Calendar used hardcoded Monday as the first day of week instead of reading the locale. It should be fixed now in ...

Answered: The application consists of two parts: 1. The frontend part that is built using Angular will be compiled to a set of static files during build. You can deploy it to any web server that will serve 2. ...

Answered: Yes, this is possible. You can hook the onTimeRangeSelect event handler and forbid navigating to the selected dates. Please see the following tutorial: https://code.daypilot.org/88013/javascript-cale...

Answered: You can call args.preventDefault() in onEventMove (not onEventMoved) to cancel the moving action: https://api.daypilot.org/daypilot-scheduler-oneventmove/ It's also possible to use the built-in overl...

Answered: Unfortunately, this is not possible. You can use custom event height but it won't affect the position of other events. Based on the overlap ordering rules, the events are arranged into "lines" inside...