Questions Tagged how-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 ...
How to add bubble to event group?
Answered: You can enable a bubble for event groups using the groupBubble property: https://api.daypilot.org/daypilot-scheduler-groupbubble/ There are two ways to specify the bubble content: 1. You can use onBe...
How to select a date range dynamically and highlight it?
Answered: To set the initial date selection, please use the select() method in ngAfterViewInit(): https://api.daypilot.org/daypilot-navigator-select/ When you add the selectionStart, selectionEnd properties to...
Is it possible to use the onRowCreate method in each resources group with childrens to add new rows dynamically?
Answered: At this moment, it's only possible to use the "new row" feature to add rows to the top level. In order to add children, you can use a context menu as demonstrated in this tutorial: https://code.daypi...
how to prevent the daypilot modal from closing when clicked outside?
Answered: You can do it using onClose event handler:
onClose: args => {
if (args.backgroundClick) {
args.preventDefault();
}
}