Questions Tagged how-to

Answered: Adding event listeners to Scheduler elements using global selectors is not a supported scenario. The Scheduler needs to update individual elements as needed. Instead, use the provided render event ha...

Answered: You can use onEventMoving event handler to customize the Scheduler drag and drop event moving in real time: https://doc.daypilot.org/scheduler/event-moving-customization/

Answered: I'm not sure what exactly you are trying to achieve but here are the related options: 1. You can specify the vertical position of an event inside a row manually: https://code.daypilot.org/91222/javas...

Answered: Please take a look at this tutorial: https://code.daypilot.org/97538/javascript-scheduler-displaying-group-availability

Answered: If you are a licensed user of DayPilot Pro, you can get a special NPM link in the customer area at https://www.daypilot.org/customers/ . If there is any problem please contact us by email at support@...

Answered: There turned out to be a problem with Vue 2.7. It should be fixed now in the latest sandbox build (2022.3.5436): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

Answered: Yes - one of the options is to use the built-in modal dialog which supports creation of custom forms: https://modal.daypilot.org/ You can also use a third-party form that you open using onEventClick ...

Answered: You can take a look at this tutorial: https://code.daypilot.org/44666/html5-doctor-appointment-scheduling-javascript-php It uses pre-generated slots that are offered to users for making appointments....

Answered: This is fixed now in the latest sandbox build (2022.4.5455): 1. The splitter for the last column is accessible. 2. Resizing columns when the outer width is set to the max updates the outer width auto...

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 "month_default_event_hover" class specifies appearance of calendar events when you move a mouse over it. To control the callout width, you can use "bubble_default_main" class (for the default the...

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: The "DataTextField" property specifies the name of the data source item field that will be used to set the event text. If you want to set custom event HTML (hyperlink, image, etc.) you can use the Be...

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: To disable text wrapping, the eventTextWrappingEnabled value must be set to false. It adds "whitespace: no-wrap" style to the event element. See also: https://api.daypilot.org/daypilot-scheduler-even...

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: 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...