Questions Tagged
How to set dynamic value into parent row cell value
Answered: Please take a look at this tutorial: https://code.daypilot.org/97538/javascript-scheduler-displaying-group-availability
How can I remove demo from header and add other text
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@d...
How to use pro DayPilot in vue js
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.
Custom Event Form
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 ...
Setting Number of Appointments
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....
Scheduler - How to change the width of the last resource's column
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...
cannot find dayBeginsHour for reactjs
Answered: Unfortunately, these properties are only available in the Pro version of the React Calendar. See also: https://doc.daypilot.org/calendar/overnight-scheduling/
Applying CSS styles to dynamic "bubble" popovers
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...
Empty start or end date corrupts DB
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/daypilo...
Scheduler - TypeError: Cannot read properties of undefined (reading 'left')
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?
How to create the Week Wise date picker in Scheduler?
Answered: The Navigator component (date picker) can be switched to select a week using the selectMode property: https://doc.daypilot.org/navigator/select-mode/
How to get the Week data in daypilot datepicker if we select any date?
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...
Disable Column in js Calendar
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...
How to make long contents to fit in the event cell while printing ?
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...
How to display event details in cell with new line (\n) ?
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 ...
How do I embed a html link in the Event text?
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...
Update draggable item list
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...
Exporting/Printing scheduler - event customization
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...
How to use the daypilot pro javascript license after purchase?
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.
OnEventMove waiting on modal response -- cancel response breaks scheduler
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...
Using Vue Calendar component with the Composition API
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} ...
How to disable dynamically an item in Context Menu in Scheduler?
Answered: You can disable menu items dynamically using the onShow event handler: https://api.daypilot.org/daypilot-menu-onshow/
Different cell splitting for different events in same scheduler
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...
Angular Gantt chart row header expand collapse not working.
Answered: 1. Unfortunately, I'm not able to reproduce the first issue. In Angular, it's important to remember that the expanded/collapsed state is stored in the data source. If you load the Gantt chart tasks u...
how to find how many events we have in single cell (Scheduler)?
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...
How can show Scheduler event text without wrapping ?
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...
how to connect function keys with functionalities?
Answered: You handle shortcuts by adding a simple "keydown" event handler to your application:
document.addEventListener("keydown", e => {
if (e.key === "F2") {
// do something
}
});
TypeError: Cannot read properties of undefined (reading 'parent')
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.
how to wrap the text in the cell while printing the scheduler?
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...
How to handle object data inside html property in the Scheduler?
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...