Questions Tagged how-to
Display Context Menu On Touch Device Tap
Hi there, I am trying to display the scheduler event context menu when the user taps on the event from a touch device. I want this behavior to happen only on touch devices (small screens) not on desk...
start date and end date
Answered: You can use "startDate" to change the visible date range: https://doc.daypilot.org/calendar/manual-date-switching/ The end date is calculated automatically, depending on the viewType value (https://d...
How to disable or hide the expand/collapse button on resources
Answered: Sorry for the delay! You can hide it using custom CSS. For the default theme (scheduler_default) you can use something like this:
.scheduler_default_tree_image_no_children,
.scheduler_default_tree...
Format date in timesheet mode (Angular 5)
Answered: By default, the timesheet uses the short date format specified using the current locale for the day headers. You can customize the text using onBeforeRowHeader render event handler:
config: any = {...
How to routing on onEventClicked: function (args) { } ANGULAR
Answered: Try using the TypeScript syntax:
constructor(private router: Router) { }
config: any = {
onEventClicked: args => {
this.router.navigate(.....);
}
}
When using the JavaScript syntax "...
How to use bubblehtml on angular5
Answered: Please make sure that eventHoverHandling property is set to "Bubble":
config: any = {
eventHoverHandling: "Bubble"
};
This is the default value but the current version of the UI Builder (http...
How use Scheduler component on html component
Answered: For Angular 5 Scheduler project please see the Angular 5 Scheduler Quick Start tutorial: https://code.daypilot.org/87636/angular-5-scheduler It includes the basic setup required in Angular 5. You can...
Disabled Cells
Answered: What version of DayPilot Pro are you using? Disabled cells prevent all drag and drop operations, as you can see here: https://javascript.daypilot.org/demo/scheduler/cellsdisabled.html
Book few rooms in one go
Answered: It's possible to select multiple time ranges at once if you enable time range multiselecting as described here: https://doc.daypilot.org/scheduler/time-range-multi-selecting/ See also a demo (MVC ver...
Prevent event card scaling when at view boundry
Answered: You can disable this behavior using floatingEvents property:
dp.floatingEvents = false;
See also: https://doc.daypilot.org/scheduler/floating-events/
Sahred Calendar Month/week/Year view with Reminders
Hi, I have shared calendar working in weekly mode. How can we change the view from Weekly to Monthly / Yearly? Is Also Is there a way we can show reminders of upcoming meetings for that day with Deta...
Angular4 DayPilot question related to click handler
Answered: At this moment Angular templates are not supported in active area HTML. However, a solution is in the works and it will be available within a couple of weeks.
Footer row for Calendar
Answered: Unfortunately, a footer is not supported in the Calendar at the moment. The only option is to create a separate table with matching columns below the component.
Is this source code working with C# winform?
Answered: Unfortunately DayPilot Pro is only available for ASP.NET WebForms. It's possible to run the WebForms version in a WinForms application using an embedded browser (WebControl), but it's just a workarou...
Print Scheduler With Header On Every Page
Answered: With the direct print() method you only have limited control over the result (the browser will simply print the exported image). I recommend exporting the Scheduler to PDF, this way you can specify h...
columnBubble - get Date of Column
Answered: This was a bug which is now fixed in the latest sandbox build (2018.3.3388). You can test it and download the latest build here: https://javascript.daypilot.org/sandbox/calendar/daysresources.html Le...
Read a Shared Calendar Appointments
Answered: You should be able to get connect to a shared calendar like this. Instead of:
// load the default calendar
CalendarFolder calendar = CalendarFolder.Bind(Service, WellKnownFolderName.Calendar, new ...
Scheduler tree
Answered: This icon is defined using CSS. You can override it using ".scheduler_default_tree_image_no_children" selector (for the default CSS theme):
.scheduler_default_tree_image_no_children {
background...
Navigator: Get first and last date that is displayed
Answered: You can use visibleStart() and visibleEnd() methods: https://api.daypilot.org/daypilot-navigator-visiblestart/ https://api.daypilot.org/daypilot-navigator-visibleend/ Just note that both methods retu...
How to display time range of resource e.g. to show unavailability
I`m familiar with selecting cells to achieve that, but unavailability time range may not be rounded on cell duration.
I want syntax get a day when I click to daypilot-navigator in angularjs
I want syntax get a day when I click to daypilot-navigator in angularjs: <article> <div style="float:left; width:160px"> <daypilot navigator id="navigator" daypilot-config="navigatorConfig" daypilot-...
Hide RowHeaderColumns
Answered: Generally, if you want to change the Scheduler appearance, simply change the config as needed (i.e. remove the item from the array in this case) and call update(). This applies to row header column, ...
How to hide the X (Delete) Button on an Event
Answered: You can use deleteDisabled property to disable the delete icon for selected events. You can add it to the raw event data object on the server side or you can set it using onBeforeEventRender:
dp.on...
How to combine filter by events with filter by rows
Answered: The latest sandbox build now extends the filtering API (both events and rows) so it doesn't force an update during the filter() call. Both methods have been extended with a second parameter (dontUpda...
Overlapping events side by side instead of overlapping
Answered: Hi Thomas, Yes, that's possible. Just use:
dp.eventArrangement = "SideBySide":
See also: https://doc.daypilot.org/calendar/event-arrangement-mode/
How to render component in event areas's html?
I have tried loading a component (<tw-popover-teams></tw-popover-teams> ) in 'html' of event areas but could not achieve. Please suggest. args.e.areas.push({ right: 6, bottom: 0, left: 0, visibility:...
Bubble per event phase?
Bubble is a really nice upgraded tooltip since it allows custom html content. I have seen that bubble is tied to event and tooltip is tied to phases. My events have many phases and every phase has di...
Using Bootstrap modal instead of DayPilot Modal
Answered: Yes, this is no problem. The DayPilot Modal is just an optional helper. This example shows how you can use DayPilot.Modal to ask for description when creating a new event:
onTimeRangeSelected: fu...
Hightlight cell or display tooltip with time range of cell on mouse hover on a cell
Answered: I'm not sure if this is what you are looking for but you can show a tooltip during time range selecting that will display the start and end of the selection (or any other text, it's fully customizabl...