Questions Tagged javascript
Can cell widths be set differently for business/non-business times?
Answered: Hi David, That's correct - the manual timeline can't be use in combination with the infinite scrolling. Since version 2019.3.3947, you can use onIncludeTimeCell to modify the cell width during automa...
How to be able to select a row and also have double click working?
Answered: The row double click is not enabled by default. If you enable it using rowDoubleClickHandling = "Enabled" you'll be able to use both single and double click event handlers: https://api.daypilot.org/d...
Create and Assign event-specific contextMenus
Answered: The docs is now updated with an example that shows how to assign an event-specific menu using onBeforeEventRender: https://doc.daypilot.org/scheduler/event-context-menu/ Please let me know if there i...
No next cell found - error thrown
Please advise on the following error: I have two Daypilot timesheets based on with the following settings: eventHeight: 60, heightSpec : 'Max', height: 350, cellWidthSpec: 'Auto', cellWidthMin: '25',...
How to add button in daypilot scheduler
Answered: Please see the following tutorial - it shows how to add a button to the row header using active areas: https://code.daypilot.org/79997/angular-scheduler-row-header-actions
Remove argument in the onScroll event for dynamic loading doesn't do anything.
When using the dynamic loading feature I am loading events by their associated resource. I want to add and remove events depending on what resource is visible. When attempting to remove, I was passin...
Preventing move after answering cancel in the modal dialog
Answered: My colleague found a way:
if (data.masterbook > 0) {
args.async = true;
// Moving booking series should be handled differently
const { Modal } =...
Using cellDuration with business hours
Answered: The cells defined using cellDuration (or other scale types as well) will always start at 00:00 and the start won't be affected by the businessBeginsHour property. In fact, businessBeginsHour works be...
Day specific start and end time
Answered: The visibility of cells can't be specific to columns. However, there are two options (depending on the required logic): 1. You can mark specific cells as disabled which will make then unavailable for...
Regarding the "Demo" text
Answered: Yes, this is a trial version. The trial period is 60 days. If you want to use it after the trial period you need to purchase a license: https://javascript.daypilot.org/buy/
How can I make item not draggable
Answered: Never mind, solved it with the following:
for (let i = 0; i < this.bookings.length; i++) {
const drag = document.getElementById(`clipboardBooking${i}`);
if (drag) ...
Linked events assigned on one resource overlapping
Answered: Hi Vane, Unfortunately there is no built-in way to do this using a simple switch. There are couple of options that may help, depending on your scenario: 1. You can define custom sort order for overla...
Drag en drop Events wittout overlap in an different Timeline
Answered: To display the customized timeline it's necessary to call loadTimeline() before init(). In the attached project, you can find this call on line 154 (index.php). If the model used in the tutorial does...
How to display event's text while moving the event?
Answered: You can set the inner HTML of the target position indicator using onEventMoving event handler - just set args.html as needed: https://api.daypilot.org/daypilot-scheduler-oneventmoving/
Hide bubble on outside click of calendar (Angular 6)
I'm showing bubble on click of event and I set hideAfter property to '0'. It works pretty well, but the bubble popover do not hide if I click outside of daypilot calendar. Any help is appreciated.
DayPilot.Modal.alert Theme is not working
Answered: Have you tried the attached project? It seems to work fine. You may want to check that the CSS import works correctly and that you are using the latest DayPilot.Modal version from https://code.daypil...
Week Calendar. How to have events of arbitrary length
Answered: In the Lite (open-source) version this is not supported but in the Pro version you can set the behavior using useEventBoxes property. Please see more here: https://doc.daypilot.org/calendar/exact-eve...
Add popover on click of event on schedule calendar (JS / Angular 2+)
Answered: Please see the following tutorial that explains how to display a bubble with custom content (defined as static HTML, dynamic HTML loaded from the server, and as an Angular component): https://code.da...
Can anybody explain me how to show bubble in daypilot calendar Angular 6+
Answered: Please see the answer here: https://forums.daypilot.org/question/4729/add-popover-on-click-of-event-on-schedule-calendar-js-angul
Add a new panel to be able to drop events to
Answered: Yes, it's been in the queue for some time already. Before it's implemented, the following approach might work: Instead of dragging the whole event, you can insert a custom element into the event that...
data changed - force rerender of event
Answered: The events.update() method is the right tool. It only reloads the event in the UI. It doesn't send anything to the server. In the server-based versions (ASP.NET MVC, ASP.NET WebForms, Java), it's pos...
change tag
Answered: You can find the event using events.find() method: https://api.daypilot.org/daypilot-scheduler-events-find/ The original data object is accessible as e.data, so the tags can be accessed as e.data.tag...
Event Links show bubbleHTML on hoverOver on arrow part
Answered: Unfortunately, the bubble for event links is not implemented at the moment.
Drag&Drop with scrolling not working on tablet in scheduler
On a tablet (both iPad & android), when you drag an event to the bottom or top of the scheduler, the scheduler does not scroll up or down. This is working as expected on desktop but not on mobile. Th...
Limit Event Moving calendar event
Answered: You can mark the cells in the past as "disabled" which will prevent drag and drop operations: https://doc.daypilot.org/calendar/disabled-cells/ See also the following tutorial (JavaScript): https://c...
Submitting a Form with event data
Answered: Normally, you only use forms when editing details of a single event using a modal dialog or in a standalone page. When working with the Scheduler, every change is usually submitted immediately using ...
Week View start date not correct in some timezones
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 ...
How to show popover on click of event in daypilot calendar
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 ...
Event double click
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 ...
Using font-awesome icons in the context menu
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 ...