The Ultimate Patient Appointment Manager App in .NET MAUI
Tags: dotnetmaui, development, mobile, desktop
Published: 2023-09-14 10:13:18

---
title: The Ultimate Patient Appointment Manager App in .NET MAUI
published: true
date: 2023-09-12 14:59:41 UTC
tags: dotnetmaui, development, mobile, desktop
canonical_url: https://www.syncfusion.com/blogs/post/patient-appointment-app-dotnet-maui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5p8435905kta8sdo0yqd.png
---
An appointment calendar can efficiently manage and organize patient appointments in healthcare organizations. It allows healthcare professionals and staff members to easily view, track, and manage patient appointments.

In our previous blog, “[Creating a .NET MAUI Hospital Appointment Booking App](https://www.syncfusion.com/blogs/post/dotnet-maui-hospital-appointment-booking-app.aspx "Blog: Creating a .NET MAUI Hospital Appointment Booking App"),” we saw how to enable patients to book appointments with their preferred doctors. In this blog, we’ll see how to create a patient appointment manager app for doctors to easily keep track of their scheduled appointments using [Syncfusion .NET MAUI controls](https://www.syncfusion.com/maui-controls/ ".NET MAUI controls").

The app will contain the following pages:

- **Login:** To enter the app using credentials.
- **Profile** : To view the doctor’s contact details for members of the organization.
- **Scheduler** : To display the appointments booked for a day.
- **Appointments** : To summarize upcoming and past appointments.
- **Logout** : To log out of the app.

Let’s see the steps to design the patient appointment manager app using Syncfusion .NET MAUI controls!

## Step 1: Designing the Login page

First, we need to create a login page to allow healthcare professionals (doctors) and staff members of the organization to access the app. Refer to the following code example to create a login model to get the credentials. 

**LoginFormModel.cs**

```csharp
public class LoginFormModel
{
   [Display(Prompt = "example@mail.com", Name = "Email")]
   [EmailAddress(ErrorMessage = "Enter your email - example@mail.com")]
   public string Email { get; set; }

   [Display(Name = "Password")]
   [DataType(DataType.Password)]
   [Required(ErrorMessage = "Enter the password")]
   public string Password { get; set; }
}
```

Then, initialize the login details.

**ProfileViewModel.cs**

```csharp
public ProfileViewModel() 
{         
    this.LoginFormModel = new LoginFormModel();
}
```

Now, add the [Syncfusion .NET MAUI DataForm control](https://www.syncfusion.com/maui-controls/maui-dataform ".NET MAUI DataForm") to create the login form.

**LoginPage.xaml**

```xml
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm"
<ContentPage.BindingContext>
 <local:ProfileViewModel/>
</ContentPage.BindingContext>
<dataForm:SfDataForm x:Name="loginForm" LayoutType="TextInputLayout" Grid.Row="1" DataObject="{Binding LoginFormModel}" TextInputLayoutSettings="{dataForm:TextInputLayoutSettings FocusedStroke=#a64dff}" ValidationMode="PropertyChanged">
</dataForm:SfDataForm>
```

Then, register the handler for **Syncfusion**  **Core** in the **MauiProgram.cs** file.

**MauiProgram.cs**

```csharp
public static MauiApp CreateMauiApp()
{
   var builder = MauiApp.CreateBuilder();
   builder.ConfigureSyncfusionCore();
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Login-Page-in-.NET-MAUI-Patient-Appointment-Manager-App.png" alt="Login Page in .NET MAUI Patient Appointment Manager App" style="width:100%">

  <figcaption>Login Page in .NET MAUI Patient Appointment Manager App</figcaption>

</figure>

Refer to the following code example to validate the user credentials when selecting the **LOGIN** button.

**LoginPage.xaml.cs**

```csharp
private async void loginButton_Clicked(object sender, EventArgs e)
{
   if (this.loginForm != null && App.Current?.MainPage != null)
   {
       if (this.loginForm.Validate())
       {
           App.Current.MainPage = new NavigationPage();
           App.Current.MainPage.Navigation.PushAsync(new AppShell());
       }  
   }  
}
```

**Note:** For more details, refer to the blog “[Create and Validate a Login Form in .NET MAUI](https://www.syncfusion.com/blogs/post/login-form-in-net-maui.aspx "Blog: Create and Validate a Login Form in .NET MAUI").”

Once we enter the credentials and select the **LOGIN** button, the user credentials will be validated. Then, the validated users will be directed to the shell page containing details of the **Profile** , **Scheduler** , **Appointments** , and **Logout** pages. We can add these pages into the shell page with the help of **FlyoutItem**.

Refer to the following code example.

**AppShell.xaml**

```xml
<Shell
 …..
 <FlyoutItem Title="Profile" Icon="profilepage.png">
  <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}">
  </ShellContent>
 </FlyoutItem>
 <FlyoutItem Title="Scheduler" Icon="scheduler.png">
  <ShellContent ContentTemplate="{DataTemplate local:CalendarPage}"/>
 </FlyoutItem>

 <FlyoutItem Title="Appointments" Icon="appointments.png">
  <ShellContent ContentTemplate="{DataTemplate local:AppointmentsPage}"/>
 </FlyoutItem>

 <MenuItem Clicked="MenuItem_Clicked" IconImageSource="logout.png" Text="Logout"/>
```

## Step 2: Designing the doctor’s profile page

After entering the credentials and clicking the **LOGIN** button, the user will be directed to the doctor’s **Profile** page to view the doctor’s contact information.

Refer to the following code example to design the doctor profile model.

**Profile.cs**

```csharp
public class ProfileDetails
{
    [DataFormDisplayOptions(ShowLabel =false)]
    public string Image { get; set; }
    public string Name { get; set; }    
    public DateTime DOB { get; set; }
    public string Gender { get; set; }

    [Display(Name = "Blood Group")]
    public string BloodGroup { get; set; }  
    public string Email { get; set; }   
    public string Phone { get; set; }

    [DataType(DataType.MultilineText)]
    public string Address { get; set; } 
    public string City { get; set; }    
    public string State { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }

    [Display(Name = "Emergency Contact Name")]
    public string EmergencyContactName { get; set; }

    [Display(Name = "Emergency Contact Number")]
    public string EmergencyContactNumber { get; set; }
}
```

Let’s initialize the doctor’s profile details like in the following code example.

**ProfileViewModel.cs**

```csharp
public ProfileViewModel() { 
   this.ProfileDetails = new ProfileDetails(); 
}
```

Here, we’re going to display the doctor’s profile using the Syncfusion .NET MAUI DataForm control.

**ProfilePage.xaml**

```xml
xmlns:dataform="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm"
<ContentPage.BindingContext>
 <local:ProfileViewModel/>
</ContentPage.BindingContext>
<dataform:SfDataForm x:Name="dataForm" IsReadOnly="True" Background="#f8f7ff" VerticalOptions="Fill" DataObject="{Binding ProfileDetails}"/>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Doctor-Profile-Page.png" alt="Doctor Profile Page" style="width:100%">

  <figcaption>Doctor Profile Page</figcaption>

</figure>

## Step 3: Designing the scheduler page

Then, create the **Scheduler** page to view or edit the scheduled appointments using the Syncfusion [.NET MAUI Scheduler](https://www.syncfusion.com/maui-controls/maui-scheduler ".NET MAUI Scheduler") control.

To do so, first, create an event model for the scheduler.

**Appointment.cs**

```csharp
public class Appointment
{
    /// <summary>
    /// Gets or sets the value to display the start date.
    /// </summary>
    public DateTime From { get; set; }

    /// <summary>
    /// Gets or sets the value to display the end date.
    /// </summary>
    public DateTime To { get; set; }

    /// <summary>
    /// Gets or sets the value indicating whether the appointment is all-day.
    /// </summary>
    public bool IsAllDay { get; set; }

    /// <summary>
    /// Gets or sets the value to display the subject.
    /// </summary>
    public string EventName { get; set; }

    /// <summary>
    /// Gets or sets the value to display the background.
    /// </summary>
    public Brush Background { get; set; }

    public string Location { get; set; }

}
```

Then, create the events, as seen in the following code example.

**SchedulerViewModel.cs**

```csharp
private void IntializeAppoitments()
{
    this.Events = new ObservableCollection<Appointment>();
    Random random = new();
    List<int> randomTimeCollection = this.GettingTimeRanges();

    DateTime date;
    DateTime dateFrom = DateTime.Now.AddDays(-2);
    DateTime dateTo = DateTime.Now.AddDays(3);
    int i = 0;
    for (date = dateFrom; date < dateTo; date = date.AddDays(1))
    {
        var meeting = new Appointment();
        int hour = randomTimeCollection[random.Next(randomTimeCollection.Count)];
        meeting.From = new DateTime(date.Year, date.Month, date.Day, hour, 0, 0);
        meeting.To = meeting.From.AddHours(2);
        meeting.EventName = this.subjects.ElementAt(i);
        meeting.Background = this.GetColor(meeting.EventName);
        meeting.Location = this.GetImage(meeting.EventName);
        meeting.IsAllDay = false;
        this.Events.Add(meeting);
        i++;
    }
}
```

Now, [bind the scheduler events](https://help.syncfusion.com/maui/scheduler/appointments#creating-business-objects "How to bind the Scheduler Events") to the **AppointmentSource** property.

**CalendarPage.xaml**

```xml
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"

<ContentPage.BindingContext>
 <local:SchedulerViewModel/>
</ContentPage.BindingContext>

<scheduler:SfScheduler View="Week" AppointmentsSource="{Binding Events}" DisplayDate="{Binding DisplayDate}">
 <scheduler:SfScheduler.AppointmentMapping>
  <scheduler:SchedulerAppointmentMapping Subject="EventName" StartTime="From" EndTime="To" Background="Background" IsAllDay="IsAllDay"/>
 </scheduler:SfScheduler.AppointmentMapping>
</scheduler:SfScheduler>
```

We can also customize the appearance of the scheduler appointments by adding images, customizing the text color, font size, and more. Refer to the following code example.

```xml
<ContentPage.Resources>
 <DataTemplate x:Key="dayAppointmentTemplate">
  <Grid RowDefinitions="0.35*,0.65*" Background="{Binding DataItem.Background}">
   <Label Text="{Binding DataItem.EventName}" VerticalOptions="Start" TextColor="White" LineBreakMode="WordWrap" Margin="5,0" FontSize="12"/>
   <Image Aspect="AspectFit" VerticalOptions="Start" Grid.Row="1" HorizontalOptions="Center" HeightRequest="30" WidthRequest="30" Source="{Binding DataItem.Location}"/>
  </Grid>
 </DataTemplate>
      
</ContentPage.Resources>
…
<scheduler:SfScheduler.DaysView>
 <scheduler:SchedulerDaysView AppointmentTemplate="{StaticResource dayAppointmentTemplate}"/>
</scheduler:SfScheduler.DaysView>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Scheduler-Page-in-.NET-MAUI-patient-appointment-manager-app.png" alt="Scheduler page in .NET MAUI patient appointment manager app" style="width:100%">

  <figcaption>Scheduler page in .NET MAUI patient appointment manager app</figcaption>

</figure>

## Step 4: Listing upcoming and past appointments

Let’s design the **Appointments** page to list and track the upcoming and previous appointments. Refer to the following code example.

Here, we’ll add appointments in an agenda view using the [Syncfusion .NET MAUI Scheduler’s agenda view.](https://help.syncfusion.com/maui/scheduler/agenda-view "Agenda view in .NET MAUI Scheduler")

**AppointmentsPage.xaml**

```xml
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"

<ContentPage.BindingContext>
 <local:SchedulerViewModel/>
</ContentPage.BindingContext>
    
<scheduler:SfScheduler View="Agenda" x:Name="Scheduler" AppointmentsSource="{Binding Events}" DisplayDate="{Binding DisplayDate}">
 <scheduler:SfScheduler.AppointmentMapping>
  <scheduler:SchedulerAppointmentMapping Subject="EventName" StartTime="From" EndTime="To" Background="Background" IsAllDay="IsAllDay"/>
 </scheduler:SfScheduler.AppointmentMapping>
 <scheduler:SfScheduler.AgendaView>
  <scheduler:SchedulerAgendaView MonthHeaderTemplate="{StaticResource AgendaHeaderTemplate}"/>
 </scheduler:SfScheduler.AgendaView>
</scheduler:SfScheduler>
```

Then, design the Scheduler to display the past and future appointments based on the user’s choice.

```csharp
private void Button_Clicked(object sender, EventArgs e)
{
    var button = sender as Button;
    var upcomingAppointmentBorder = this.FindByName("UpcomingBorder") as BoxView;
    var pastAppointmentBordeer = this.FindByName("PastBordeer") as BoxView;

    if (button != null && button.Text == "Upcoming appointments")
    {
       var upcomingEvents = (this.BindingContext as SchedulerViewModel).Events.Where(x=>(x as Appointment).From > DateTime.Now).ToList();
       if(upcomingAppointmentBorder !=null)
       {
          upcomingAppointmentBorder.Color = Color.FromArgb("#512BD4");	
       }
       if(pastAppointmentBordeer != null)
       {
          pastAppointmentBordeer.Color = Colors.Transparent;
       }
       this.Scheduler.AppointmentsSource = upcomingEvents;
       this.Scheduler.MinimumDateTime = DateTime.Now;
       this.Scheduler.MaximumDateTime = DateTime.Now.AddDays(30);
   }
   else if (button != null && button.Text == "Past appointments")
   {
       var pastAppointments = (this.BindingContext as SchedulerViewModel).Events.Where(x => (x as Appointment).From < DateTime.Now).ToList();

        if (pastAppointmentBordeer != null)
        {
           pastAppointmentBordeer.Color = Color.FromArgb("#512BD4");
        }
        if(upcomingAppointmentBorder != null)
        {
           upcomingAppointmentBorder.Color = Colors.Transparent;
        }
        this.Scheduler.AppointmentsSource = pastAppointments;
        this.Scheduler.MinimumDateTime = DateTime.Now.AddDays(-30);
        this.Scheduler.MaximumDateTime = DateTime.Now;
   }

}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Listing-Upcoming-Appointments.png" alt="Listing Upcoming Appointments" style="width:100%">

  <figcaption>Listing Upcoming Appointments</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Listing-Past-Appointments.png" alt="Listing Past Appointments" style="width:100%">

  <figcaption>Listing Past Appointments</figcaption>

</figure>

## Step 5: Designing the logout page

Finally, let’s create a logout module to exit the application.

**AppShell.xaml**

```xml
<MenuItem Clicked="MenuItem_Clicked" IconImageSource="logout.png" Text="Logout"/>
```

Refer to the following code example to navigate to the login page by clicking the **Logout** option in the flyout item.

**AppShell.xaml.cs**

```csharp
private void MenuItem_Clicked(object sender, EventArgs e)
{
   App.Current.MainPage = new NavigationPage();
   App.Current.MainPage.Navigation.PushAsync(new LoginPage());
}
```

## GitHub reference

Also, check out the complete example for [creating a .NET MAUI patient appointment manager app on GitHub](https://github.com/SyncfusionExamples/create-patient-appointment-manager-application-in-.NET-MAUI "Creating patient appointment manager app in .NET MAUI GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to create a patient appointment manager app using [Syncfusion .NET MAUI controls](https://www.syncfusion.com/maui-controls/ ".NET MAUI controls"). We’d love to hear your thoughts, so try out the steps and please leave any feedback or specific requirements in the comments section below.

If you’re not already a Syncfusion customer, you can download a free trial of [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads "Get the free evaluation of the Essential Studio products") and start evaluating its controls immediately. You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/maui "Syncfusion Feedback Portal"). We’re always here to assist you!

## Related blogs

- [Mastering Globalization: Utilizing Calendar Types in .NET MAUI Calendar Control](https://www.syncfusion.com/blogs/post/globalization-in-dotnet-maui-calendar.aspx "Blog: Mastering Globalization: Utilizing Calendar Types in .NET MAUI Calendar Control")
- [Chart of the Week: Creating a .NET MAUI Horizontal Bar Chart to Compare Grocery Prices Between Two Countries](https://www.syncfusion.com/blogs/post/dotnet-maui-horizontal-bar-chart-compare-grocery-prices.aspx "Blog: Chart of the Week: Creating a .NET MAUI Horizontal Bar Chart to Compare Grocery Prices Between Two Countries")
- [Replicating a Storage UI in a .NET MAUI App](https://www.syncfusion.com/blogs/post/storage-ui-in-dotnet-maui.aspx "Blog: Replicating a Storage UI in a .NET MAUI App")
- [Easily Build ChatGPT-like App in .NET MAUI using OpenAI APIs](https://www.syncfusion.com/blogs/post/dotnet-maui-chatgpt-like-app-using-openai.aspx "Blog: Easily Build ChatGPT-like App in .NET MAUI using OpenAI APIs")