devexpressmauischedulersyncfusionsyncfusion-calendar

How to use one property for two different purposes in one appointment Syncfusion SfScheduler .NET MAUI (or DevExpress Scheduler)?


Problem: I am using SfScheduler in my .NET MAUI application to display a schedule. I have an appoinment template where I want to set different backgrounds for different parts of the appoinment. For example, I want to use the background color obtained from the Background property for one part and the status color defined via the AppointmentStatusColor property for another part. However, I am facing a problem as I cannot use the Background property twice in the template. How can I solve this problem and set different backgrounds for different parts of the appointment? Similar problem with other Notes properties etc....

I have a destination template created where I use Background="{Binding Background}" for the overall background of the Appointment. I also have BoxView Background="#8239BC" where instead of a hard-coded color I have to use the background color from the received data:

<ContentPage.Resources>
    <DataTemplate x:Key="dayAppointmentTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <BoxView Background="#8239BC" WidthRequest="4" VerticalOptions="FillAndExpand" Grid.Column="0"/>
            <StackLayout Background="{Binding Background}" Grid.Column="1">
                <Label Text="{Binding Subject}" TextColor="#3B3E45" LineBreakMode="TailTruncation" FontSize="14" FontFamily="Noto Sans" Margin="8,2,0,0" HorizontalOptions="Start" VerticalOptions="Start"/>
                <Label Text="{Binding Notes}" TextColor="#666E7D" LineBreakMode="TailTruncation" FontSize="10" FontFamily="Noto Sans" Margin="8,0,5,5" HorizontalOptions="Start" VerticalOptions="Start"/>
            </StackLayout>
        </Grid>
    </DataTemplate>
</ContentPage.Resources>

Background="UserColor" here we already use Background to display the background UserColor, but we need to get another color StatusColor, but we can't use Background for the second time.

<scheduler:SfScheduler.AppointmentMapping>
    <scheduler:SchedulerAppointmentMapping StartTime="EventStartDateTime"
                       EndTime="EventEndDateTime"
                       Subject="PatientName"
                       Background="UserColor"
                       Notes="AppointmentStatus"
                       />
</scheduler:SfScheduler.AppointmentMapping>

Similar problem with other properties, as my appointment design uses two different background colors, added more than two icons and descriptions.

Is there any solution for this? Or is it still impossible to bypass the property limitation for Appointment?

I might also consider the DevExpress scheduler


Solution

  • If you use Scheduler appointment source mapping, you may find there is only limited Properties. So, you cannot define another Property such as StatusColor, etc.

    As a workaround, you could customize your own SchedulerAppointment and do not use source mapping.

    Here I define a CustomAppointment class which subclasses SchedulerAppointment and has a new Property named AnotherColor.

    public class CustomAppointment : SchedulerAppointment
    {
        public SolidColorBrush AnotherColor { get; set; } = new SolidColorBrush(Color.FromArgb("#FFFF0000"));
    
    }
    

    In ViewModel, generate the appointments,

    public class SchedulerViewModel
    {
      
        ...
        public ObservableCollection<CustomAppointment> Events { get; set; }
        private void GenerateAppointments()
        {
            this.Events = new ObservableCollection<CustomAppointment>();
            //Adding the schedule appointments in the schedule appointment collection.
            this.Events.Add(new CustomAppointment
            {
                StartTime = DateTime.Now.Date.AddHours(10),
                EndTime = DateTime.Now.Date.AddHours(11),
                Subject = "Client Meeting",
                Background = new SolidColorBrush(Color.FromArgb("#FF8B1FA9")),
                AnotherColor = new SolidColorBrush(Color.FromArgb("#FFFF0000")),
            });
            this.Events.Add(new CustomAppointment
            {
                StartTime = DateTime.Now.Date.AddDays(1).AddHours(13),
                EndTime = DateTime.Now.Date.AddDays(1).AddHours(14),
                Subject = "GoToMeeting",
                Background = new SolidColorBrush(Color.FromArgb("#FFD20100")),
                AnotherColor = new SolidColorBrush(Color.FromArgb("#FFFF0000")),
            });
        }
    }
    

    Consume it in XAML, and no need to use source mapping,

    <scheduler:SfScheduler x:Name="Scheduler" 
                           ...                     
                           AppointmentsSource="{Binding Events}"
                           >
        <scheduler:SfScheduler.DaysView>
            <scheduler:SchedulerDaysView AppointmentTemplate="{StaticResource dayAppointmentTemplate}"/>
        </scheduler:SfScheduler.DaysView>
    </scheduler:SfScheduler>
    

    In DataTemplate, just simply use Bindings for different Colors, such as, <BoxView Background="{Binding AnotherColor}" or <StackLayout Background="{Binding Background}".

    Hope it helps!