Questions Tagged javascript
Is it possible to create a calendar with 6 month views
Answered: Unfortunately, this kind of view is not available at the moment.
How to display child resources in modal form list
Answered: The HTML5 Scheduler tutorial (https://code.daypilot.org/87166/html5-scheduler) uses a flatten() function which does essentially the same that you are doing:
function flatten(resources, result) {
...
How to add a database and script to handle public holidays.
Answered: There is a tutorial available that shows how to display holidays (by setting a custom scheduler cell background color): https://code.daypilot.org/93068/javascript-scheduler-displaying-holidays I beli...
Parent resource in front of the child resources
Answered: This is not possible at the moment but it's in the queue and it should be available within 1-2 months.
Hourly range covering two consecutive days
Answered: OK, thanks for the update. In the Scheduler, there are two ways to achieve that: 1. You can define the timeline manually by adding individual cells: https://doc.daypilot.org/scheduler/timeline/ 2. Yo...
Event text displaying
Answered: You can make the text smaller using CSS but this will not ensure that every possible text will be displayed in full. I recommend using the bubble component which can display additional details using ...
Custom CSS class for a resource
Answered: You can use onBeforeRowHeaderRender event handler to add a custom CSS class: https://doc.daypilot.org/scheduler/row-header-customization/ Example: JavaScript
dp.onBeforeRowHeaderRender = function(a...
How to disable previous dates in calendar
Answered: At this moment, blocking selected dates is only supported in the Pro version. Please see the following tutorial: https://code.daypilot.org/88013/javascript-calendar-blocking-selected-dates
Daypilot is creating Empty DIVS on dp.events.update(event) and when expanding/collapsing group resources
Answered: These issues should be fixed now in the latest sandbox build (2022.1.5209): https://javascript.daypilot.org/sandbox/ Please let me know if there is any problem. And thanks for reporting the issues!
daypilot-pro-react package is free for React Calender Component?
Answered: Yes, the "daypilot-pro-react" package is paid. If you are looking for the free package, take a look at "@daypilot/daypilot-lite-react": https://www.npmjs.com/package/@daypilot/daypilot-lite-react The...
Disable Group Availability Row
Answered: The purpose of the invalidate() method (https://api.daypilot.org/daypilot-cellarray-invalidate/) is to ask for a fresh result of onBeforeCellRender event callback. It is useful if you display calcula...
Displaying Group Availability
Answered: This issue has been fixed in version 2020.3.4547: https://javascript.daypilot.org/daypilot-pro-for-javascript-2020-3-4547/ I recommend switching to the latest version though - which is now 2022.1.518...
How to set custom border color on business days in scheduler?
Answered: The cell borders are rendered using long 1px elements that are displayed at the cell boundaries. The color is set using "background-color" style. The horizontal lines are marked with .scheduler_defau...
Is it possible to have resources on the vertical axis for the calendar?
Answered: Unfortunately, this is not possible. You might be able to mimic this arrangement in the Scheduler using a combination of custom start/end values and eventStackingLineHeight (https://doc.daypilot.org/...
Are we able to change the bar width?
Answered: You can change the bar width using CSS:
<style>
.wider-bar .calendar_default_event_bar,
.wider-bar .calendar_default_event_bar_inner {
width: 12px;
}
</style>
And add the "wider-bar" CSS c...
Autorefresh not working for > 10sec
Answered: It's important to remember that the timeout gets reset after the component is updated. Normally, this doesn't happen too often and you usually load the current data set from the server. If you see th...
scheduler expand collapse animation control
Answered: You can disable the animation using treeAnimation property: https://api.daypilot.org/daypilot-scheduler-treeanimation/
Update keyboard focus on clicking cells or events of frozen rows
Referring to this ticket: https://forums.daypilot.org/question/5478/keyboard-navigation-from-last-cell The following example will update the keyboard focus during time range selection (cell clicks): ...
Is autoscroll supposed to work on fixed/sticky rows?
Answered: This should be fixed now in the latest sandbox build (2022.1.5176): https://release.daypilot.org/changes/js/ The Scheduler will scroll if you reach the top or bottom border of the main grid (excludin...
Strange behaviour when navigating using keyboard API after entering inline editing mode
Answered: Thanks for the sample project. This issue should be fixed now in the latest sandbox build (2022.1.5180): https://release.daypilot.org/changes/js/ In the latest release, you can work around the issue ...
StartTime indicator when moving an event
Answered: You can do that using onEventMoving event handler:
dp.onEventMoving = args => {
args.top.enabled = true;
args.top.html = args.start.toString("HH:mm");
};
See also: https://api.daypilot.org...
Multicolumn in week Calendar
Answered: When you switch the calendar viewType to "Resources", you can define custom columns. Take a look at the following documentation page: https://doc.daypilot.org/calendar/column-header-hierarchy/ Exampl...
How to show custom loading indicator during rendering
Answered: Usually, you'll want to display the loading indicator when you initiate an HTTP call that loads the data. This way it will cover the whole waiting time.
Scheduler TypeError when right-clicking on a link between events
Answered: This issue should be fixed now in the latest release (2021.4.5165): https://javascript.daypilot.org/daypilot-pro-for-javascript-2021-4-5165/ Please let me know if there is any problem.
Angular - Add buttons with click event inside cornerHtml
Answered: Unfortunately, it's not possible to use Angular templates in the cornerHtml property. However, it is possible to create a custom Angular component and add it to the upper-left corner - please see the...
Separator in context menu not visible
Answered: It looks like you are using a custom CSS theme - you'll need to add styles for the separator which is created using two nested divs (div > div). Standard items are created using a div and an anchor e...
Multi select events on multiple resources at once
Answered: Yes, it is possible - please take a look at the following tutorial: https://code.daypilot.org/85404/javascript-scheduler-select-a-time-range-over-multiple-rows
Disable TimeRangeSelected over events
Answered: In the Scheduler, you can enable it using allowEventOverlap property: https://doc.daypilot.org/scheduler/event-overlaps/ In the Month component, it isn't available at the moment. You can check for ov...
Recurrence in Vue
Answered: There is no built-in recurrence support in the JavaScript version. The recurrence needs to be implemented on the server side and the implementation will be platform-specific. If you only work with a ...
How to adjust the width of the bubble automatically to the width of the content?
Answered: The bubble content width is not changed by the bubble. It works like this: 1. The content is first rendered in an absolute layer. It will respect the content and use the CSS from the theme. 2. The re...