We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147766 Sep 23,2019 02:05 PM UTC Sep 26,2019 08:37 AM UTC Xamarin.Forms 3
loading
Tags: SfSchedule
Krunal
Asked On September 23, 2019 02:05 PM UTC

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 [Syncfusion]
Replied On September 24, 2019 01:22 PM UTC

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
Replied On September 25, 2019 03:56 PM UTC

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 [Syncfusion]
Replied On September 26, 2019 08:37 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon