Questions Tagged how-to
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);
});
How to Hide Context Menu Item
Answered: You can do this in onShow event handler - it's called before the menu is displayed and you can use it to modify the context menu items. You can find an example here: https://api.daypilot.org/daypilot...
Resource label vertical alignment on concurrent event
Answered: Unfortunately, this is not possible at the moment. You can modify the CSS and show the row header title at the top of the cell (the middle position may not work well for large heights).
How to get resource name instead of ID
Answered: You can get the row object (DayPilot.Row) using rows.find():
dp.onEventMove = function(args) {
var row = dp.rows.find(args.newResource);
// ...
};
It's also possible to use onEventMoving i...
Add/edit events with in-place editor
Answered: The keyboard navigation tutorial is now available: https://code.daypilot.org/29708/javascript-scheduler-keyboard-navigation
ScrollToResourse() in dynamic event rendering
Answered: It looks like the onAfterRender event handler wasn't fired properly if args.clearEvents was set to true in onScroll (and that is the default value). It should be fixed now in the latest sandbox build...
Daypilot Scheduler - Bubble shown on different page
Answered: There is a static DayPilot.Bubble.hide() method that will hide the current bubble immediately: https://api.daypilot.org/daypilot-bubble-hide/
Event counter per day
Hello, I'm building a scheduler with 3 different possible events for each resource and I would like to get the number of these events for all the resources per day. Do you think there is a solution? ...
Change color on header click
Answered: Please take a look at the following tutorial: https://code.daypilot.org/68382/javascript-calendar-selecting-and-highlighting-columns
findByPixels returns cell with incorrect date
Answered: And what's the use case? The purpose of onGridMouseDown is to modify the click + shift/ctrl/meta behavior before the actual events are fired, not to handle clicks on events and cells. Normally you wo...
Why after deploying in iis, IE11 doesn't show calendar?
Answered: Sometimes, the intranet site is configured (by group policy or in IE settings) to use IE compatibility mode which is not supported by DayPilot. This is the most common problem of different behavior w...
Hotel Room Booking Tutorial with infinite scrolling
Answered: The infinite scrolling is only supported for timelines generated automatically (scale !== "Manual"). However, it's possible to adjust the generated time cells using onIncludeTimeCell to achieve the s...
onScroll infinite loop
Answered: Unfortunately, I'm not able to reproduce the problem with args.clearEvents = true. Which version of DayPilot do you use? In Angular, it's necessary to avoid changes to the watched objects ([config] a...
Rowheader columns background-color
Answered: You can set the background color for the whole row header using e.BackgroundColor in BeforeResHeaderRender:
protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, DayPilot.Web.Ui.Ev...
infinity horizontal scroll
Answered: It seems i was to early with my post. i came across this documentation. https://doc.daypilot.org/scheduler/infinite-scrolling/ Going to try this out first.
Popup menu (contextmenu) behind modal
Answered: You can set the z-index of both components using zIndex property: https://api.daypilot.org/daypilot-modal-zindex/ https://api.daypilot.org/daypilot-menu-zindex/
DayPilot.Row.events.all()
Answered: You can access the original data object like this:
var data = events[0].data;