Questions Tagged how-to
Customizing time header cell after binding
Answered: If you load the events using one of the optimized methods, e.g. events.load(); or update({events: [...]}); the Scheduler will only update the events. You'll need to force a full refresh to re-render ...
text-align: right does not work for *_event_inner class
Answered: You can override "display: flex" if needed. It is only used to enable vertical centering within the event box. You can also keep "display: flex" and use "justify-content" to align the event text to t...
Scheduler scroll event
Answered: You may want to take a look at the "frozen rows" feature that may help with some scenarios: https://doc.daypilot.org/scheduler/frozen-rows/ If that doesn't work, you can use the addEventListener sync...
Scheduler scrollbar in Chrome is thin
Answered: The Scheduler theme doesn't define the scrollbar appearance. It will use the default styles (defined by the browser or by your global styles). If you want to modify the default scrollbar appearance, ...
OnTimeRangeSelected
Answered: You can access the time range boundaries using args.start and args.end in onTimeRangeSelected event handler. Please see also: https://api.daypilot.org/daypilot-scheduler-ontimerangeselected/ You can ...
Scroll to a specific time in the day
Answered: The scrollTo() call only works if the grid is already displayed and has non-zero dimensions. Since you define no resources before init() it can't scroll until the resources are loaded. There are two ...
Server Side Rendered React throws `navigator is not defined`
Answered: Unfortunately, server-side React rendering is not supported.
Issue when rendering the scheduler
Answered: I recommend checking the data - it may contain invalid items which break the view. You can also check the JavaScript console to see if there are any errors.
Real-Time Updates
Answered: Yes, but it requires some work. 1. First, you need to keep track of individual changes on the server side, and store them as a sequence. Each change would be something like add/remove/update action w...
External drag and drop to existing event
Answered: Hi Dan, The simpler solution was to follow your idea: keepElement: true DayPilot makes no attempt to remove elements during any of it's callbacks then. I then manage the list of external draggable it...
double click on cell areas results in two invocations
I defined an area in scheduler cells and a javascript handler for the click event. If I double click on the cell area the javascript handler is called twice, once for the first click, and once for th...
Scroll to hour on button click
Answered: Changing the ScrollPositionHour value would only work on the server side, during the initial page load or during a PostBack. If you want to change the scrollbar position on the client side you'll nee...
Highlighting dates in scheduler
Answered: In the Scheduler, you can use onBeforeCellRender to highlight selected cells. In that event handler, you can use args.cell.events() to get a list of events that overlap with the cell. See also: https...
forcing mousedown after calling scheduler's selectTimeRange method
Answered: This is probably a follow up on this question: https://forums.daypilot.org/question/5177/ignoring-left-click-behaviour-for-events You should be able to use onGridMouseDown, rectangleSelectHandling an...
Business Begins/Ends
Answered: Yes, it is possible using onBeforeCellRender: https://api.daypilot.org/daypilot-scheduler-onbeforecellrender/ This will change the status of the cell and the associated background color but it will n...
Showing event versions in the same 'row'
Answered: You can do this by creating a single version (with a transparent background) and adding the two active areas inside:
onBeforeEventRender: function(args) {
args.data.versions = [
{
...
rowHeaderColumnResizedHandling - What event is triggered?
Answered: It fires onRowHeaderColumnResized event: https://api.daypilot.org/daypilot-scheduler-onrowheadercolumnresized/
time header
Answered: You can use a special frozen row at the top which will let you select a time range and expand it to the full column. Please see the following tutorial: https://code.daypilot.org/50252/javascript-sche...
XSS Cross Site Scripting issue
Answered: DayPilot lets you specify raw HTML in many places to allow adding rich content and defining your own functionality. You need to make sure that any user-entered data that you use when adding custom HT...
How to set cell width per column?
Answered: The Scheduler lets you define column widths if you use a custom timeline: https://doc.daypilot.org/scheduler/timeline/ The Calendar and Month components don't allow specifying individual columns widt...
Drag and Drop event from one calendar to another
Answered: Unfortunately, drag and drop between components is not supported by the Calendar (only by the Scheduler).
Extending the separator to the timeheaders
Answered: You shouldn't add borders to the main time header div (.scheduler_default_timeheader_cell) because it changes its dimensions (it uses the default "box-sizing: content-box" style). The borders are def...
How can i add image in in second row or in first row?
Answered: You can use onBeforeRowHeaderRender event to insert custom HTML and/or active areas: https://doc.daypilot.org/scheduler/row-header-customization/
Ignoring left click behaviour for events
Answered: There is an event that lets you override the standard mouse behavior but it works on the grid layer only (below events): https://api.daypilot.org/daypilot-scheduler-ongridmousedown/ If these events a...
Change locale from mm/dd/yyyy to dd/mm/yyyy
Answered: The ASP.NET WebForms version of the DatePicker always used the default date format of the current locale. However, there is now a new property called "Pattern" available in the latest sandbox build (...
Set event in multiple days
Answered: I recommend checking the date values. The Scheduler doesn't shorten events and the start and and date/time will correspond to the calculated timeline position. You can see that multi-day events are d...
How can add search on second row or child row?
Answered: The rule that determines which rows will be displayed when a row filter is applied is implemented in onRowFilter event handler. You'll need to extend it to include text of the additional rows as well...
How to show results for half an hour in timeHeaders
Answered: Please see this grouping option:
groupBy: "Cell"
https://doc.daypilot.org/scheduler/time-header-groups/
Changing scheduler settings in CSS
Answered: You need to use more specific selectors, e.g.
#dp .scheduler_default_matrix_vertical_line,
#dp .scheduler_default_matrix_horizontal_line {
background-color: #000000;
}
or add "!important"...
Delete events based on ids stored in an array
Answered: array.forEach(function(id) {
dp.events.remove(id);
});