Custom Appointment model for Scheduler

[William]

Hi everyone,

Currently testing MAUI Controls and wondering if I can create a custom midel class for MAUI Scheduler Appointments?

I mean, if I want to add extra data like an appoitment perdonalized guid string or something like that.

Thanks for your help.

[Yana]

Hi William,

To add more properties to the appointment model, create a custom class that derives from Telerik.Maui.Controls.Scheduler.Appointment class and override its Copy and CopyFrom methods, here is a quick example:

public class Task : Appointment 
{ 
    private bool isDone; 

    public bool IsDone
    {
        get => this.isDone;
        set => this.UpdateValue(ref this.isDone, value);
    }

    public override IAppointment Copy() 
    { 
        var task = new Task(); 
        task.CopyFrom(this); 
        return task; 
    }

    public override void CopyFrom(IAppointment other) 
    { 
        var task = other as Task; 
        if (task != null) 
        {
            this.IsDone = task.IsDone; 
        }

        base.CopyFrom(other); 
    } 
} 

In addition, to allow the users to edit that property through the EditAppointmentDialog, you'd need to customize its ControlTemplate. We have such an example in our Controls Samples app, just navigate to Scheduler -> Dialogs Customization. 

I hope this will help you get started. Let me know if you have any additional questions on the approach.

Regards,
Yana
Progress Telerik

[William]

Hello Yana,

Thank you for your support!

I tried but nothing displayed in the XAML view... So, how to tell the Scheduler to display the custom appointments please?

 

I'm using :.  

//My custom model:
public class AppointmentItem: Telerik.Maui.Controls.Scheduler.Appointment
{
    public string Id { get; set; } = string.Empty;
    public string Subject { get; set; } = string.Empty;
    public DateTime End { get; set; }
    public DateTime Start { get; set; }
    public string Email { get; set; } = string.Empty; 
    public string Token { get; set; } = string.Empty; 

    public override IAppointment Copy()
    {
        var task = new Task();
        task.CopyFrom(this);
        return task;
    }

    public override void CopyFrom(IAppointment other)
    {
        var task = other as Task;
        if (task != null)
        {
            this.IsDone = task.IsDone;
        }

        base.CopyFrom(other);
    }
}

//My view model:
public ObservableCollection<AppointmentItem> Appointments { get; set; } = new ObservableCollection<AppointmentItem>();
AppointmentItem appointment1 = new AppointmentItem();
appointment1.Id = "12345798";
appointment1.Subject = "Subject";
appointment1.Email = "[e-mail]";
appointment1.Device = "iOS";
appointment1.Token = "987654321";
Appointments.Add(appointment1);

//In my XAML
scheduler.AppointmentsSource = (IEnumerable<Telerik.Maui.Controls.Scheduler.Appointment>)viewModel.Appointments;

 

 

[William]

Ok issue solved by creating a list of Telerik Appointment in addition of the custom model used for database storage. So, I have 2 collections!

Don’t know if it’scthe best sôution because the custom model won’t display Apoiintments but it’s a kind of workaround…

[Yana]

Hi William,

I am sorry I didn't explain it clearly enough. The custom appointment  class which inherits from our Appointment should contain only the additional properties (in the sample it's just IsDone property) and you'd need to manually copy them inside the CopyFrom method. Here is an example with the custom Email and Token properties:

public class AppointmentItem : Appointment
{
    private string id = string.Empty;

    private string email = string.Empty;
    private string token = string.Empty;

    public string Id
    {
        get => this.id;
        set => this.UpdateValue(ref this.id, value);
    }

    public string Email
    {
        get => this.email;
        set => this.UpdateValue(ref this.email, value);
    }

    public string Token
    {
        get => this.token;
        set => this.UpdateValue(ref this.token, value);
    }

    public override IAppointment Copy()
    {
        var task = new AppointmentItem();
        task.CopyFrom(this);
        return task;
    }

    public override void CopyFrom(IAppointment other)
    {
        var task = other as AppointmentItem;
        if (task != null)
        {
            this.Id = task.Id;
            this.Email = task.Email;
            this.Token = task.Token;
        }

        base.CopyFrom(other);
    }
}

There is not need to use two separate collections. 

You can create a custom AppointmentTemplate to show the additional properties. Here is a quick example with the Token property based on our documentation example:

1. Add the custom DataTemplate to the page's resources:

 

<DataTemplate x:Key="MyCustomAppointmentTemplate">
    <telerik:RadBorder CornerRadius="4"
                    IsClippedToBounds="True"
                    BackgroundColor="#D2C6E6">
        <Grid>
            <BoxView WidthRequest="4"
                    BackgroundColor="#8660C5"
                    HorizontalOptions="Start" />
            <VerticalStackLayout  Margin="6, 0, 4, 0" Spacing="4">
                <Label Text="{Binding Occurrence.Appointment.Subject}"
                    TextColor="Black" />
                <Label Text="{Binding Occurrence.Appointment.Token}"
                    TextColor="Red" />
            </VerticalStackLayout>

        </Grid>
    </telerik:RadBorder>
</DataTemplate>

 

2. Assign it to the AppointmentTemplate property of the Scheduler:

 

<telerik:RadScheduler x:Name="scheduler" 
            AppointmentsSource="{Binding Appointments}"
            AppointmentTemplate="{StaticResource MyCustomAppointmentTemplate}">
    <telerik:RadScheduler.ViewDefinitions>
        <telerik:DayViewDefinition />
        <telerik:WeekViewDefinition Title="Work Week" IsWeekendVisible="False" />
        <telerik:MonthViewDefinition />
    </telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>

I've attached my test app which shows the exact approach for a reference. Please give it a try and let me know how it goes.