Questions Tagged how-to
DB Connection data not showing at index
Answered: I recommend checking the HTTP calls to the API (especially work_order_resources.php and work_order_list.php) in the browser developer console (Network tab). Make sure that the response includes the c...
How to execute client side JavaScript function whilst server processing request after user clicks on event blocks? [DayPilot Monthly Event Calendar]
Answered: You can use EventClickHandling='PostBack' and invoke the PostBack manually using eventClickPostBack() from EventClickJavaScript, after executing your code: https://api.daypilot.org/daypilot-scheduler...
Scheduler ResourceHeaderClickJavaScript
Answered: I recommend using RowClickJavaScript instead. It handles the JavaScript onRowClick event: https://api.daypilot.org/daypilot-scheduler-onrowclick/ You can access the resource id using args.row.id ther...
Add line break in text in Event
Answered: Mike, Please see my answer here: https://forums.daypilot.org/question/5750/event-test Please let me know if there is any problem.
room fields update
Answered: You can activate a context menu for the Scheduler row headers: https://doc.daypilot.org/scheduler/row-header-context-menu/ Or you can add an action icon to the header: https://doc.daypilot.org/schedu...
MySQL cannot use just SQlite can use only why?
Answered: In order to switch to MySQL please follow the instructions at the bottom of the article (a section called "Database (MySQL, SQLite)"). You need to edit _db.php and _mysql.php files.
How to show and hide the daypilot navigator ?
Answered: You can use the show() and hide() methods of the DayPilot.Navigator instance: https://api.daypilot.org/daypilot-navigator-show/ https://api.daypilot.org/daypilot-navigator-hide/
How to convert <DaypilotNavigator/> into icon ?
Answered: Here you can find a JavaScript demo that binds a DatePicker popup to a specified target (a <span> element in this case): https://javascript.daypilot.org/demo/calendar/datepicker.html
events are not coming properly in the cell?
Answered: The horizontal position of an event is determined by its "start" and "end" values. Concurrent events stack vertically. To show events side by side you would have to change their start/end value accor...
How to print day and week in scheduler?
Answered: The Scheduler can print (or export as image) the current view or a section of it using the exportAs() method. For more details and an example, please see the documentation: https://doc.daypilot.org/s...
image is not coming properly in Context menu.
Answered: When using the default theme, there is a space for a 16x16 pixel icon on the left side: https://doc.daypilot.org/menu/images/ In your screenshot, this space is not available. It looks like you might ...
How i can add icon with text in context menu?
Answered: Please take a look at the following documentation page for an example: https://doc.daypilot.org/menu/images/
How can i add multiple events in single cell?
Answered: Each event is displayed at a location determined by its start, end and resource id. If you want to display multiple events in the same cell, use the same "start", "end", and "resource" values.
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 ...