Questions Tagged javascript

Answered: Unfortunately, these properties are only available in the Pro version of the React Calendar. See also: https://doc.daypilot.org/calendar/overnight-scheduling/

Answered: The current version works like this: The Scheduler doesn't create any event by itself. If users select a time range, the Scheduler fires he onTimeRangeSelected event ( https://api.daypilot.org/daypil...

Answered: The latest sandbox build (2022.3.5424) now includes a fix for this scenario. Could you please give it a try and let me know if it solves the issue?

Answered: The Navigator component (date picker) can be switched to select a week using the selectMode property: https://doc.daypilot.org/navigator/select-mode/

Answered: You can switch the date picker to "week" mode when it selects a week automatically. Please see my answer here: https://forums.daypilot.org/question/5812/how-to-create-the-week-wise-date-picker-in-sch...

Answered: The cells can only be marked as disabled using the onBeforeCellRender event handler. This reactive design ensures the best performance of your app and prevents state synchronization issues. You shoul...

Answered: The Scheduler doesn't wrap the text automatically during export but you can use args.text to insert line breaks using '\n' characters in onBeforeEventExport event: https://api.daypilot.org/daypilot-s...

Answered: To add line breaks to Scheduler event text, you need to use the "html" property and insert "<br>" tags. The text provided using the "text" property will be HTML-encoded automatically (XSS protection ...

Answered: I'm not sure what exactly you are trying to achieve, but there are several options: 1. You can remove the list item and create a new one, activating it using makeDraggable() again. 2. You can only ch...

Answered: Unfortunately, it's not possible to apply custom event height during export. However, you can use the built-in "versions" feature which is created just for this scenario (to display planned vs. actua...

Answered: After purchase, you will receive login details for the customer area ( https://www.daypilot.org/customers/ ) where you can get a special NPM link which you replace in your package.json.

Answered: By calling setTimeout() in onEventMove you create a new JavaScript message that will be processed later as the JavaScript event loop continues (see also https://developer.mozilla.org/en-US/docs/Web/J...

Answered: When using the Composition API in Vue, you can use the calendar component like this: <template> <DayPilotCalendar id="dp" :config="config" /> </template> <script> import {DayPilotCalendar} from '@day...

Answered: You can disable menu items dynamically using the onShow event handler: https://api.daypilot.org/daypilot-menu-onshow/

Answered: You probably know that during drag and drop operations, you can adjust the target range using the real-time events (onTimeRangeSelecting, onEventMoving, onEventResizing) so you are able to change the...

Answered: You can use DayPilot.Row.events.forRange() method to get a list of Scheduler events for a specified time range: https://api.daypilot.org/daypilot-row-events-forrange/ You can also assign custom utili...

Answered: You handle shortcuts by adding a simple "keydown" event handler to your application: document.addEventListener("keydown", e => { if (e.key === "F2") { // do something } });

Answered: Thanks for the update. It should be fixed now in the latest sandbox build (2022.3.5390): https://release.daypilot.org/changes/js/ Please let me know if there is any problem.

Answered: The text doesn't wrap automatically during export but you can use '\n' in the "text" property or "<br>" in the "html" property to insert line breaks. See also: https://code.daypilot.org/61152/javascr...

Answered: In React, the "html" property supports a string with HTML, but not JSX. You can use JavaScript template literal (with backtick quotes) to insert variables into the HTML string. However, remember that...

Answered: I recommend checking the HTTP call to the API (backend_events.php) in the browser developer console (Network tab). Most likely, you will see a DB-related error instead of the expected JSON array with...

Answered: Please see my suggestion here: https://forums.daypilot.org/question/5785/example-does-not-work

Answered: This error means that the parent object of the cssClass property is undefined - args.columns[x]. Since version 2022.2.5302, the columns are merged by default for parent resources. That means args.col...

Answered: This should be already fixed in the latest version (which is now 2022.3.5384). Please let me know if the problem persists.

Answered: Unfortunately, there is no elegant way to display the row headers on the right side at the moment. There is a tutorial that shows how to implement your option 2, but it's just a workaround: https://c...

Answered: I recommend checking the HTTP calls to the API (especially work_order_resources.php and work_order_list.php) in the browser developer console (Network tab). Make sure that the response includes the c...

Answered: I recommend using RowClickJavaScript instead. It handles the JavaScript onRowClick event: https://api.daypilot.org/daypilot-scheduler-onrowclick/ You can access the resource id using args.row.id ther...

Answered: This issue should be fixed now in the latest sandbox build (2022.3.5388): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

Answered: In order to switch to MySQL please follow the instructions at the bottom of the article (a section called "Database (MySQL, SQLite)"). You need to edit _db.php and _mysql.php files.

Answered: You can use the show() and hide() methods of the DayPilot.Navigator instance: https://api.daypilot.org/daypilot-navigator-show/ https://api.daypilot.org/daypilot-navigator-hide/