Questions Tagged javascript

Answered: Hi Mikolaj, There are two options: 1. If you want to display your data in cells (in the background layer), you can use the logic described in the following tutorial and modify the cell properties (ba...

Answered: The scrollbar position is defined by the browser and it can't be moved. So the answer is no. You might be able to implement your own scrolling logic using scrollTo() and scrollToResource() methods: h...

Answered: Cypress isn't particularly good at detecting the layers correctly and this error message ("trigger failed because this element is covered by another element") is often misleading. Adding {force: true...

Answered: The RTL text direction is only supported in the Pro version, you can find a demo here: https://javascript.daypilot.org/demo/calendar/rtl.html At this moment, it's not supported in the Lite (open-sour...

Answered: The Scheduler will include events that are loaded at the moment of export (it uses the event data from events.list) in the exported image. If you use dynamic loading ( https://doc.daypilot.org/schedu...

Answered: If you want to get the date that was last clicked in the Navigator, you can read the selectionDay property: https://api.daypilot.org/daypilot-navigator-selectionday/ const nav = new DayPilot.Navigato...

Answered: Yes, the best way would probably be to use two scheduler instances and switch between them. You might be able to do it with one instance but the configuration would be more complex. You can also take...

Answered: Hi Benny, It looks like the default action uses "click" event which is not reliable on touch devices. It will be fixed in the next release. You can use 'action: "None"' as a workaround - that will bi...

Answered: 1. Please make sure that you have replaced the daypilot-all.min.js file with the full version. 2. You may need to force a reload using Ctrl+F5 in the browser. Or add a random string to the script pat...

Answered: You can get the DayPilot.Row object using rows.find() method: const row = dp.rows.find(args.resource); Then you can access the original data object using row.data: const country = row.data.country; S...

Answered: You can write to cells using onBeforeCellRender event handler: https://api.daypilot.org/daypilot-scheduler-onbeforecellrender/ In order to make the text accessible even if there is an event scheduled...

Answered: You can increase the margin on the right side of a calendar column using "columnMarginRight" property: https://api.daypilot.org/daypilot-calendar-columnmarginright/ By default it uses 5 pixels.

Answered: It was released as an experimental feature and it was not included in the API documentation and TypeScript definitions. It's still supported. It's now added to the API documentation: https://api.dayp...

Answered: This is possible - you need to add heightSpec: "BusinessHoursNoScroll" to the config: https://api.daypilot.org/daypilot-calendar-heightspec/ It's supported in the Lite version as well. In the Pro ver...

Answered: Yes, you're right. There seems to be a problem with timeHeaderCellDuration values other than 60. It should be fixed now in the latest sandbox build (2021.2.5010): https://javascript.daypilot.org/sand...

Answered: In the Pro version, XSS protection is enabled by default and content specified using "text" property is automatically HTML encoded. You can use "html" property to specify raw HTML or you can disable ...

Answered: Yes - at this moment, the "Resources" view is only available in the Pro version.

Answered: You should take a look at the viewType property. It lets you hide weekends: https://doc.daypilot.org/calendar/work-week-view/ If you only want to hide Sundays, you can use viewType="Days", days=6 and...

Answered: In the Month component, the events are always displayed as all-day events (the width is aligned with cells). You can display the start and end time using eventStartTime and eventEndTime properties: h...

Answered: In order to set raw HTML you can use the "html" property of the resources[] array items: https://api.daypilot.org/daypilot-scheduler-resources/ You can also customize the HTML dynamically using onBef...

Answered: You need to get the DayPilot.Event instance first using events.find(). Then you can update the event using events.update(). const dp = this.scheduler.control; const e = dp.events.find("1"); e.data.te...

Answered: Nvm, I managed to find it. If anyone is looking for a solution, args.row.data.children[i].areas. Iterate over the row children

Answered: > I tried the simple tutorial that is available to get the active area working. How can I have it working on a specific column of my row header? If you define custom row header columns (rowHeaderColu...

Answered: Yes, it works as you describe. At this moment, the args.async option is not supported in the onShow() method but you can switch to manual event click/right click handling and open the context menu wh...

Answered: You can customize the image export using the onBeforeEventExport method of the internal scheduler object: https://api.daypilot.org/daypilot-scheduler-onbeforeeventexport/ For cells, use the onBeforeC...

Answered: You can use DayPilot.Modal.form() instead to customize the content: https://api.daypilot.org/daypilot-modal-form/ The following example would display a list: const form = [ {text: "Would you like to ...

Answered: In Angular/React, you can't mix the config changes with direct API calls like this. The config changes are merged and applied at once after the current code block finishes. The result of this logic i...

Answered: Please take a look at the following tutorial: https://code.daypilot.org/72047/javascript-scheduler-copy-multiple-events

Answered: Thanks for the feedback! It will be fixed soon.

Answered: You can control the bar width and other properties using CSS. The bar is built using two nested divs with the following CSS classes (applies to the default "calendar_default" theme): calendar_default...