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

Remarks

The following example shows appointments in the AgendaView:

XAML

<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>

[Agenda View](#agenda-view)

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:

XAML

<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);
        }
    }
}

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.

XAML

<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) {
    }
    // ...
}

[Agenda View](#agenda-view)

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.