Appointment colors remain same despite of setting different colors through AppointmentTemplate binding

[Krunal]

Code snippets :

        <sfSchedule:SfSchedule x:Name="sfSchedule" IsVisible="{Binding ShowMainView}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"

            ScheduleView="{Binding ScheduleView}" ShowResourceView="{Binding ShowResourceView}" ShowAppointmentsInline="True" TimeInterval="30" TimeIntervalHeight="80"

            DataSource="{Binding Appointments}" SelectedResources="{Binding SelectedResources}" ScheduleResources="{Binding Resources}" MinDisplayDate="{Binding MinDisplayDate}"

            MaxDisplayDate="{Binding MaxDisplayDate}" CellDoubleTappedCommand="{Binding CellDoubleTappedCommand}">

            <sfSchedule:SfSchedule.HeaderStyle>

                <sfSchedule:HeaderStyle BackgroundColor="DarkGray"/>

            </sfSchedule:SfSchedule.HeaderStyle>

            <sfSchedule:SfSchedule.AppointmentTemplate>

                <DataTemplate>

                    <Frame BackgroundColor="{Binding Color}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" CornerRadius="2">

                        <Label Text="{Binding ServiceName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>

                    </Frame>

                </DataTemplate>

            </sfSchedule:SfSchedule.AppointmentTemplate>

            <sfSchedule:SfSchedule.AppointmentMapping>

                <sfSchedule:ScheduleAppointmentMapping ColorMapping="Color" EndTimeMapping="To" StartTimeMapping="From" ResourceIdsMapping="Resources" SubjectMapping="ServiceName"/>

            </sfSchedule:SfSchedule.AppointmentMapping>

            <sfSchedule:SfSchedule.ResourceMapping>

                <sfSchedule:ResourceMapping Name="Name" Id="ID" Color="Color" Image="Image"/>

            </sfSchedule:SfSchedule.ResourceMapping>

            <sfSchedule:SfSchedule.ResourceViewSettings>

                <sfSchedule:ResourceViewSettings SelectionMode ="Single"/>

            </sfSchedule:SfSchedule.ResourceViewSettings>

            <sfSchedule:SfSchedule.DayViewSettings>

                <sfSchedule:DayViewSettings WorkStartHour="{Binding StartHour}" WorkEndHour="{Binding EndHour}" StartHour="{Binding StartHour}" EndHour="{Binding EndHour}" 

                    TimeSlotBorderColor="Black" VerticalLineColor="Black">

                    <sfSchedule:DayViewSettings.DayLabelSettings>

                        <sfSchedule:DayLabelSettings TimeFormat="hh mm a"/>

                    </sfSchedule:DayViewSettings.DayLabelSettings>

                </sfSchedule:DayViewSettings>

            </sfSchedule:SfSchedule.DayViewSettings>

            <sfSchedule:SfSchedule.WorkWeekViewSettings>

                <sfSchedule:WorkWeekViewSettings NonWorkingsDays="{Binding NonWorkingDaysWeekView}" WorkStartHour="{Binding StartHour}" WorkEndHour="{Binding EndHour}"

                        StartHour="{Binding StartHour}" EndHour="{Binding EndHour}" TimeSlotBorderColor="Black" TimeSlotBorderStrokeWidth="1" VerticalLineColor="Black" VerticalLineStrokeWidth="1">

                    <sfSchedule:WorkWeekViewSettings.WorkWeekLabelSettings>

                        <sfSchedule:WorkWeekLabelSettings TimeFormat="hh mm a"/>

                    </sfSchedule:WorkWeekViewSettings.WorkWeekLabelSettings>

                </sfSchedule:WorkWeekViewSettings>

            </sfSchedule:SfSchedule.WorkWeekViewSettings>

            <sfSchedule:SfSchedule.Behaviors>

                <prismBehaviors:EventToCommandBehavior EventName="ResourceItemTapped" Command="{Binding HideScheduleTypeSelector}"/>

                <prismBehaviors:EventToCommandBehavior EventName="ViewHeaderTapped" Command="{Binding HideScheduleTypeSelector}"/>

            </sfSchedule:SfSchedule.Behaviors>

        </sfSchedule:SfSchedule>

===================================================

        public void GenerateDummyAppointments()

        {

            Appointments.Clear();

            Random randomTime = new Random();

            Random randomService = new Random();

            List<Point> randomTimeCollection = new List<Point>();

            randomTimeCollection.Add(new Point(9, 10));

            randomTimeCollection.Add(new Point(10, 11));

            randomTimeCollection.Add(new Point(11, 12));

            randomTimeCollection.Add(new Point(12, 14));

            randomTimeCollection.Add(new Point(14, 16));

            randomTimeCollection.Add(new Point(16, 18));

            var duration = new List<double> { 0.5, 1, 1.5, 2 };

            DateTime date;

            DateTime dateFrom = DateTime.Now;

            DateTime dateTo = DateTime.Now.AddDays(40);

            DateTime dateRangeStart = DateTime.Now;

            DateTime dateRangeEnd = DateTime.Now.AddDays(40);

            var services = new List<string> { "Activity 1", "Activity 2", "Activity 3" };

            foreach (var resource in Resources)

            {

                for (date = dateFrom; date < dateTo; date = date.AddDays(1))

                {

                    var randomCount = randomTime.Next(2, 5);

                    for (int additionalAppointmentIndex = 0; additionalAppointmentIndex < randomCount; additionalAppointmentIndex++)

                    {

                        var rnd = randomService.Next(0, 2);

                        Appointment appointment = new Appointment();

                        int hour = randomTime.Next((int)randomTimeCollection[additionalAppointmentIndex].X, (int)randomTimeCollection[additionalAppointmentIndex].Y);

                        appointment.From = new DateTime(date.Year, date.Month, date.Day, randomTime.Next((int)StartHour, (int)EndHour), 0, 0);

                        appointment.To = appointment.From.AddHours(duration[randomTime.Next(0, 3)]);

                        appointment.Color = colorCollection[rnd];

                        appointment.ServiceName = services[rnd];

                        var coll = new ObservableCollection<object>

                            {

                                (resource as AppointmentResource).ID

                            };

                        appointment.Resources = coll;

                        Appointments.Add(appointment);

                    }

                }

            }

        }

===================================

With above code, I'm facing following issues :

1. As you can see that I have given different colors to different appointment object still it gives the same color to all appointments in SfSchedule view upon running the app. I'm not able to figure out what is the issue with colors in above code.

2. I have added label in appointment template but label appears only in daily view and not in weekly view. I want label to appear in both daily and weekly view.

3. I don't want adjoining time slot appointments to look like single appointment hence I want that frame inside the SfSchedule cell should take some margin but despite setting the margin on Frame inside template it is not reflecting in view. How I can give some 1-2 pixel space between the adjoining time slot appointments.

I'm attaching herewith my views for both daily and weekly view. Kindly provide some fix for above 

     

[Karthikraja Arumugam]

Hi Krunal, 

 

Thank you for contacting Syncfusion support. 

 

Query 1: Regarding Appointments display in the same color 

As per Schedule Resource view implementation if an appointment mapped to single Resource it will be displayed in Resource color and if an appointment mapped to multiple resources then it will be displayed in default appointment color. So, here appointments mapped to a resource, display in respective Resource color, which is the behavior of Schedule Resource view. 

 

Query 2: Label in AppointmentTemplate does not display in WeekView 

You are using Label inside Frame, in WeekView and WorkWeekView Label doesn’t get required width from parent Frame so the label is not visible. You can use Label inside Grid to achieve your requirement, here label will get width from Grid and will show the subject text. 

 

Please refer the following code example for the same, 

 

[XAML] 

<Grid BackgroundColor="{Binding Color}"> 

                            <Label Text="{Binding ServiceName}" /> 

  </Grid> 

 

Query 3: Set Margin for Appointments with AppointmentTemplate 

As per Schedule implementation appointments will be positioned with 1px margin in default, so if you set Margin for parent view in Template it doesn’t affect in Appointment view, but you can achieve your requirement by placing AppointmentTemplate inside another layout or view and set Margin for inner view. 

 

Please refer the following code example for the same, 

 

[XAML] 

<DataTemplate> 

           <Grid BackgroundColor="Transparent"> 

                        <Grid  Margin="3" BackgroundColor="{Binding Color}"> 

                            <Label Text="{Binding ServiceName}" /> 

                        </Grid> 

           </Grid> 

 </DataTemplate> 

 

We have prepared a simple sample for your requirement, 

 

Sample link: ScheduleResource 

 

We hope this helps. Please let us know, if need any further assistance. 

 

Regards, 

Karthik Raja A 

[Krunal]

Regarding Query 1

You mentioned that I can't change the background color of the label as per color binding. Hence, I thought of changing the TextColor by binding appointment object's Color property to TextColor. But by doing so I'm not able to see the text at all. I wonder what's wrong? Following is my code :

                    <Grid BackgroundColor="Transparent">

                        <Grid BackgroundColor="LightGreen" Margin="2">

                            <Label Text="{Binding ServiceName}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="{Binding Color}"/>

                        </Grid>

                    </Grid>

Kindly revert back how I can show some kind of differentiation for different service types in Schedule view.

[Karthikraja Arumugam]

Hi Krunal, 

 

Thank you for the update. 

 

We have checked the reported issue “Color binding not working with AppointmentTemplate Label TextColor property” and it is working fine as expected. Text of Label in AppointmentTemplate display in the color the of resource. 

 

Your requirement of displaying Appointments in a different color with Resource can be achieved by using the additional color property in custom ScheduleAppointment class to store appointment color. Schedule Appointment’s BindingContext is custom ScheduleAppointment class so if you have a color property in addition, you can directly bind that property to AppointmentTemplate. 

 

Please refer the following code example for the same, 

 

[c#] 

//Custom ScheduleAppointment class 

public class Appointments 

{ 

        public string ServiceName { get; set; } 

        public DateTime From { get; set; } 

        public DateTime To { get; set; } 

        public Color Color { get; set; } 

        public Color AppointmentColor { get; set; } 

        public ObservableCollection<object> Resources { get; set; } 

} 

 

//Assign Color of appointment to AppointmentColor property 

appointment.Color = colorCollection[rndColor]; 

appointment.AppointmentColor = appointment.Color; 

 

//Bind AppointmentColor to DataTemplate Background 

<DataTemplate> 

         <Grid BackgroundColor="Transparent"> 

                   <Grid  Margin="3" BackgroundColor="{Binding AppointmentColor}"> 

                            <Label Text="{Binding ServiceName}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="{Binding Color}"/> 

                     </Grid> 

          </Grid> 

 </DataTemplate> 

 

We have prepared a simple sample based on your requirement, 

 

Sample link: ScheduleResource 

 

We hope this helps. Please let us know if you need any further assistance. 

 

 

Regards, 

Karthik Raja A