How to control the navigation and view change from code-behind?
This knowledge base explains the way to control the navigation and view change from code-behind in Angular Scheduler.
Step 1: Create an angular scheduler by referring the following User Guide link.
https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/#getting-started
Step 2: Use the following code to render two buttons, date picker, and dropdown above the Angular Scheduler to perform navigation and view change operation. Bind the click event to the Next and Previous date navigation buttons. Assign the selected value of the date picker to the Scheduler selectedDate variable to change the selected date of the Scheduler. Assign the selected value of the dropdown to the scheduleView variable of the Scheduler.
html
<div id="property" class="property-panel-table" title="Properties"> <table id="property" title="Properties"> <tbody> <tr style="height: 50px"> <td> <button ejs-button (click)="clickPrev()">Previous</button> </td> <td> <button ejs-button (click)="clickNext()">Next</button> </td> <td> <div> Current Date </div> </td> <td> <div> <ejs-datepicker #datepicker [(value)]='selectedDate' [showClearButton]=false> </ejs-datepicker> </div> </td> <td> <div>Current View </div> </td> <td> <div> <ejs-dropdownlist id="scheduleview" [dataSource]='data' [(value)]='scheduleView'> </ejs-dropdownlist> </div> </td> </tr> </tbody> </table> </div> <div class="control-section"> <div class="col-lg-9 content-wrapper"> <ejs-schedule #scheduleObj height='550px' [showHeaderBar]="showHeaderBar" [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" [(currentView)]="scheduleView"> </ejs-schedule> </div> </div>
Step 3: Create Schedule object by using the following code.
ts
@ViewChild("scheduleObj", {static: false})
public scheduleObj: ScheduleComponent;
Step 4: Define the data source for the dropdown list as shown below.
ts
public data: string[] = ["Day", "Week", "WorkWeek", "Month"];
Step 5: Use the following code to perform previous/next date navigation operation based on button click.
ts
clickNext(): void {
let currentView: View = this.scheduleObj.currentView;
if (currentView === "Month") {
this.scheduleObj.selectedDate = new Date(
this.scheduleObj.selectedDate.setMonth(
this.scheduleObj.selectedDate.getMonth() + 1
)
);
} else {
this.scheduleObj.selectedDate = new Date(
this.scheduleObj.selectedDate.setDate(
this.scheduleObj.selectedDate.getDate() +
this.scheduleObj.activeView.renderDates.length
)
);
}
}
clickPrev(): void {
let currentView: View = this.scheduleObj.currentView;
if (currentView === "Month") {
this.scheduleObj.selectedDate = new Date(
this.scheduleObj.selectedDate.setMonth(
this.scheduleObj.selectedDate.getMonth() - 1
)
);
} else {
this.scheduleObj.selectedDate = new Date(
this.scheduleObj.selectedDate.setDate(
this.scheduleObj.selectedDate.getDate() -
this.scheduleObj.activeView.renderDates.length
)
);
}
}
}
Step 6: Refer to the following GitHub link for the working example.
Example: https://github.com/SyncfusionExamples/angular-scheduler-navigation
