Questions Tagged how-to
Is database connectivity available in Demo version
Answered: Yes, the database connectivity is available in the trial version as well. Please take a look at the ASP.NET Scheduler tutorial which shows how to use DayPilot with SQL Server: https://code.daypilot.o...
Daypilot Scheduler in ipad (Safari browser)
I'm accessing the web on iPad with a safari browser. Day-Pilot scheduler horizontal scroll works fine on the web(chrome) as using mouse scroll, But on iPad(Safari), I'm unable to scroll with a touch ...
How can I improve data load in vue js
Answered: All main components (Calendar, Month, Scheduler) provide visibleStart() and visibleEnd() methods that you can use to get the start and end of the current date segment (calculated from startDate/days)...
how to apply css (font-weight) for cell?
Answered: The Scheduler cells are marked with "scheduler_default_cell" CSS class (when using the default theme):
.scheduler_default_cell {
font-weight: bold;
}
See also: https://doc.daypilot.org/schedu...
Trigger collapseAll and expandAll on clicking header
Answered: You can add the icon using an active area which lets you specify an onClick handler. Active areas are supported in time headers, row headers, events, and cells. Here you can find an example of a row ...
I need to add an event listener on collapse name.
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...
How to prevent event move
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/
using hours on X-Axys, resources on Y-axys, and a second metric on Y-asyx
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...
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
Hi, As you can see in the attached video, I can't change the width of the last column in the resources areas. Is there a way to change this behaviour?
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...
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...
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...
Questions 1-30 of 2674
Next