This configuration seems to work fine for me (horizontal orientation, selecting a range over months, DayPilot Pro for JavaScript 2024.3.5981). Angular 16, but that shouldn’t make any difference.
import {Component, ViewChild} from "@angular/core";
import {
DayPilot,
DayPilotCalendarComponent,
DayPilotNavigatorComponent
} from "daypilot-pro-angular";
@Component({
selector: 'calendar-component',
template: `
<div class="container">
<div class="navigator">
<daypilot-navigator [config]="configNavigator" [events]="events" #navigator></daypilot-navigator>
</div>
<div class="content">
<daypilot-calendar [config]="configCalendar" [events]="events" #calendar></daypilot-calendar>
</div>
</div>
`,
styles: [`
.container {
display: flex;
flex-direction: row;
}
.navigator {
margin-right: 10px;
}
.content {
flex-grow: 1;
}
`]
})
export class CalendarComponent {
@ViewChild("calendar") calendar!: DayPilotCalendarComponent;
@ViewChild("navigator") nav!: DayPilotNavigatorComponent;
events: DayPilot.EventData[] = [];
configNavigator: DayPilot.NavigatorConfig = {
showMonths: 3,
cellWidth: 25,
cellHeight: 25,
selectMode: "Day",
orientation: "Horizontal",
freeHandSelectionEnabled: true,
onVisibleRangeChanged: args => {
},
onTimeRangeSelected: args => {
this.configCalendar.viewType = "Days";
this.configCalendar.startDate = args.start;
this.configCalendar.days = args.days;
}
};
configCalendar: DayPilot.CalendarConfig = {
viewType: "Days",
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
const dp = args.control;
dp.clearSelection();
if (!modal.result) { return; }
dp.events.add(new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
text: modal.result
}));
}
};
}