Questions Tagged how-to
How to get the text from upper left corner in the cell?
Answered: The default theme uses "display: flex" and "align-items: center" to center the Scheduler event content vertically. You can override it using the following CSS:
.scheduler_default_event_inner {
a...
How to show allday Event in Schedular
Answered: Unfortunately, all-day events are only supported in the Pro version of the calendar: https://doc.daypilot.org/calendar/all-day-events/
How to provide the header for scheduler and how to change the today's cell color?
Answered: Instead of using the Scheduler time header to display the navigation, it's better to create your own toolbar and place it above the Scheduler. To learn how to implement the next/previous/today button...
Event test
Answered: The event text gets HTML-encoded (as a protection against XSS attacks) and then it is treated as HTML. That means ASCII line breaks will be ignored. If you need to insert a line break, you'll have to...
Uncaught ReferenceError: module is not defined
Answered: If you want to include the library directly using <script> element you need to download the zip package and include daypilot-all.min.js file instead of using NPM: Pro version: https://javascript.dayp...
How to change the font color while changing the back color for event?
Answered: Please see the documentation for "event customization": https://doc.daypilot.org/scheduler/event-customization/ You can also change the color globally (for all events) using a custom CSS theme: https...
how to change the time format
Answered: You can customize the hour header cell content using onBeforeTimeHeaderRender event handler: https://doc.daypilot.org/calendar/time-header-customization/
How change the height of all-day-event's row
Answered: The height of the row with all-day events depends on the content. It will stretch automatically to fit all events. You can change the all-day event height using allDayEventHeight property: https://ap...
cell to into two lines or below the current line
Answered: The events will be displayed in a single horizontal line if they don't overlap. If the end date/time of the first event and the start date/time are the same the events are still considered non-overla...
show all day events side by side
Answered: Unfortunately, the all-day events can't be displayed side-by-side. They are always arranged vertically.
All-day events in Resources view
Answered: Yes, it is possible. There is no live demo available but you can try this example:
<div id="dp"></div>
<script type="text/javascript">
var dp = new DayPilot.Calendar("dp");
dp.startD...
Date wise Header but data rows breaks into two lines.
Answered: Thank you for posting the screenshot: https://forums.daypilot.org/question/5744/cell-to-into-two-lines-or-below-the-current-line
How to wrap the text in Modal input box?
Answered: You can use the "textarea" form item:
import {Modal} from '@daypilot/modal';
// ...
const form = [
{
type: 'textarea',
id: 'textarea1',
name: 'Multi-line text',
},
];
c...
How to show Monday to Friday in calender?
Answered: You can control the days displayed using startDate and days properties: https://api.daypilot.org/daypilot-scheduler-startdate/ https://api.daypilot.org/daypilot-scheduler-days/ You'll need to set "st...
how to increase the size of cell if we have long text?
Answered: The event height is always fixed. You can increase it globally using the "eventHeight" property (https://api.daypilot.org/daypilot-scheduler-eventheight/) or per event using the "height" property of ...
How to wrap the text within the event if we have long text?
Answered: You can enable text wrapping using the "eventTextWrappingEnabled" property: https://api.daypilot.org/daypilot-scheduler-eventtextwrappingenabled/ You can also use HTML line breaks (<br>) in the event...
How to install DayPilot Pro & use in React code
Answered: Hi Shruti, Thank you for choosing DayPilot Pro! You can get a NPM link for a trial version here: https://npm.daypilot.org/ The following documentation page describes how to start using the Scheduler ...
How to hide non working hours for each users?
Answered: This is not possible. You can't hide just one cell of a column. You can either hide a full column (if the non-business hours are the same) or use a special background color for non-business hours tha...
Use html on rowheader
Answered: The onBeforeRowHeaderRender event lets you set custom HTML for each row header cell (args.rows.cells[].html). See also: https://doc.daypilot.org/scheduler/row-header-customization/
profile picture in rowheader
Answered: You can add a picture to the Scheduler row header using onBeforeRowHeaderRender event. Please see an example here: https://doc.daypilot.org/scheduler/row-header-icons/
How to check if there are no rows visible to display another component.
Answered: This logic destroys the component when noRows if false and makes the scheduler instance invalid. You can try using the "visible" attribute instead, something like this:
<DayPilotScheduler {...confi...
dropbox with multiple choices
Answered: Unfortunately, this is not supported in the modal dialog forms (https://modal.daypilot.org/) at the moment. You can only add checkboxes at the top level (always visible). However, it might be a good ...
How to Detect Changes for Input Field?
Answered: This is not supported at the moment - but you can use the "searchable" element which is a drop-down list with items filtered by the text you type.
Dragging events out of loaded date range leads to errors or losing duration
Hi everyone, I have trouble with my Scheduler when dragging events out of the loaded time range using infinite scrolling. So I'm starting with a range of multiple months around "today" loaded and dra...
how i can change the slots to be 15 min replace of 60 min ?
Answered: You'll need to change the "SlotDurationMinutes" value in the Timeline class.
using Project.Models;
namespace Project.Service
{
public class Timeline
{
public static int Slo...
How to disable cells in monthly calendar
Answered: Since version 2022.2.5287 (now available in the sandbox), you can disable selected cells using onBeforeCellRender event handler: https://doc.daypilot.org/month/disabled-cells/
Scheduler - Add text at the bottom of a day
Answered: Yes, you can add it using onBeforeCellRender. Try something like this:
onBeforeCellRender: args => {
args.cell.areas = [
{
left: 0,
right: 0,
bottom: 0,
text: "...
Scheduler - How to show tooltip on hover over active area
Answered: This syntax is correct and it seems to work fine. However, the screenshot doesn't correspond to the sample code - "left: 0, right: 0, top: 0, bottom: 0" will fill the whole cell. So you might want to...
Where do the args of the onBeforeTimeHeaderRender method come from?
Hi everyone, I'm working on a project that loads events dynamically, also using the onScroll method. In addition to this there is a zoom that allows, depending on the selected level, to view the peri...
Loading events from multiple sources (onto Scheduler)
Answered: You need to make two requests manually and merge the results into a single array. The following example uses two parallel requests, waits until both return a result and update the Scheduler:
const ...