AgendaView Class
A view that lists appointments by day.
Namespace: DevExpress.Maui.Scheduler
Assembly: DevExpress.Maui.Scheduler.dll
NuGet Package: DevExpress.Maui.Scheduler
Declaration
public class AgendaView :
DXViewBase,
ISchedulerViewBase,
IAgendaViewProperties,
IAppearanceOwner
Related API Members
The following members return AgendaView objects:
Remarks
The following example shows appointments in the AgendaView:
<dxsch:AgendaView Start="{Binding Start, Mode=TwoWay}">
<dxsch:AgendaView.DataStorage>
<dxsch:SchedulerDataStorage>
<dxsch:SchedulerDataStorage.DataSource>
<dxsch:DataSource AppointmentsSource="{Binding Appointments}">
<dxsch:DataSource.AppointmentMappings>
<dxsch:AppointmentMappings Type="AppointmentType"
AllDay="AllDay"
Start="Start"
End="End"
Id="Id"
Description="Description"
Location="Location"
RecurrenceInfo="RecurrenceInfo"
StatusId="Status"
Subject="Subject"
LabelId="Label"
Reminder="Reminder" />
</dxsch:DataSource.AppointmentMappings>
</dxsch:DataSource>
</dxsch:SchedulerDataStorage.DataSource>
</dxsch:SchedulerDataStorage>
</dxsch:AgendaView.DataStorage>
</dxsch:AgendaView>
Handle Taps
You can define an action on Tap, DoubleTap, and LongPress events.
The following code sample opens the appointment edit page on appointment tap:
<dxsch:AgendaView x:Name="agendaView" Start="{Binding Start, Mode=TwoWay}" Tap="OnTap">
<dxsch:AgendaView.DataStorage>
<!-- ... -->
</dxsch:AgendaView.DataStorage>
</dxsch:AgendaView>
using DevExpress.Maui.Scheduler;
using Microsoft.Maui.Controls;
// ...
public partial class AgendaView : ContentPage {
bool inNavigation;
public AgendaView() {
InitializeComponent();
}
protected override void OnAppearing() {
base.OnAppearing();
this.inNavigation = false;
}
async void OnTap(object sender, SchedulerGestureEventArgs e) {
if (this.inNavigation)
return;
Page appointmentPage = storage.CreateAppointmentPageOnTap(e, true);
if (appointmentPage != null) {
inNavigation = true;
await Navigation.PushAsync(appointmentPage);
}
}
}
Date Navigation
Use the MaxDate and MinDate properties to customize the maximum and minimum dates visible in the AgendaView.
Use the Start property to specify the displayed date when you open the AgendaView.
You can also set ShowEmptyDays to true
to display days that do not contain appointments.
The following code snippet sets MinDate and MaxDate to fixed dates. The Start property uses today’s date.
<ContentPage ...
xmlns:dxsch="clr-namespace:DevExpress.Maui.Scheduler;assembly=DevExpress.Maui.Scheduler"
xmlns:vm="clr-namespace:SchedulerApp.ViewModels">
<ContentPage.BindingContext>
<vm:EmployeeCalendarViewModel/>
</ContentPage.BindingContext>
<dxsch:AgendaView Start="{Binding Start, Mode=TwoWay}" MinDate="03/10/2024" MaxDate="03/30/2024">
<dxsch:AgendaView.DataStorage>
<!-- ... -->
</dxsch:AgendaView.DataStorage>
</dxsch:AgendaView>
</ContentPage>
public class EmployeeCalendarViewModel : NotificationObject {
DateTime start;
public EmployeeCalendarViewModel(DateTime startDate) {
Start = startDate;
// ...
}
public EmployeeCalendarViewModel() : this(TeamData.Start) {
}
public DateTime Start {
get => this.start;
set {
this.start = value;
NotifyPropertyChanged(nameof(Start));
}
}
protected void NotifyPropertyChanged(string propertyName) {
OnPropertyChanged(propertyName);
}
}
public class DailyEmployeeCalendarViewModel : EmployeeCalendarViewModel {
// ...
public DailyEmployeeCalendarViewModel() : base(DateTime.Today) {
}
// ...
}
New Appointment Button
Set ShowNewAppointmentButton to true
to display the new appointment button.
You can use the NewAppointmentButtonClicked event to define the action on button tap.
Use the NewAppointmentButtonCommand to set an action that occurs when a user taps the New Appointment button. The NewAppointmentButtonCommandParameter property allows you to pass data to the Command.
Customize Appearance
Refer to the following sections for more information on how to customize the appearance of AgendaView elements: