Group CalendarInLineEvent

Question

Hi,I am using the SfCalendar component on a Xamarin Forms app with some CalendarInlineEvents.Some of these events have the same color, so I'd like to show only one distinct color at the header, below the Day number. Otherwise, I need to show all the events/appointments when one day is tapped on the inline event.Is it possible to set this header? Please look at the attached image.Thanks & Regards,Daniel AmorimAttachment: SfCalendar_878225ad.zip

Vigneshkumar Ramasamy · Answer

Hi Daniel Amorim,  
 
Thank you for contacting Syncfusion Support.  
 
Based on the provided information, we have checked your requirement and we have prepared the sample, please find the sample from the below link.  
 
Sample Link: http://www.syncfusion.com/downloads/support/forum/140348/ze/Appointments37050254.zip  
 
Code Snippet to set Different color to Appointments indicator:  




                 calendarInlineEvents.Add(  
                  new CalendarInlineEvent()  
                  {  
                      Subject = "Goto Meeting",  
                      StartTime = calendar.MoveToDate.AddDays(i).AddHours(9),  
                      EndTime = calendar.MoveToDate.AddDays(i).AddHours(10),  
                      Color = Color.Green  
                  });  
   
                calendarInlineEvents.Add(  
                  new CalendarInlineEvent()  
                  {  
                      Subject = "Goto Conference",  
                      StartTime = calendar.MoveToDate.AddDays(i).AddHours(11),  
                      EndTime = calendar.MoveToDate.AddDays(i).AddHours(12),  
                      Color = Color.Blue  
                  });  
   
                calendarInlineEvents.Add(  
                 new CalendarInlineEvent()  
                 {  
                     Subject = "Goto Lunch",  
                     StartTime = calendar.MoveToDate.AddDays(i).AddHours(13),  
                     EndTime = calendar.MoveToDate.AddDays(i).AddHours(14),  
                     Color = Color.Fuchsia  
                 });  
   
                calendarInlineEvents.Add(  
                new CalendarInlineEvent()  
                {  
                    Subject = "Goto Meeting",  
                    StartTime = calendar.MoveToDate.AddDays(i).AddHours(15),  
                    EndTime = calendar.MoveToDate.AddDays(i).AddHours(16),  
                    Color = Color.Red  
                });  
   
                calendarInlineEvents.Add(  
                new CalendarInlineEvent()  
                {  
                    Subject = "Goto Conference",  
                    StartTime = calendar.MoveToDate.AddDays(i).AddHours(16),  
                    EndTime = calendar.MoveToDate.AddDays(i).AddHours(17),  
                    Color = Color.Brown  
                });  
   
Code Snippet to Customize DayHeader:  




            // Customize the DayHeader using MonthView Settings  
            MonthViewSettings monthViewSettings = new MonthViewSettings();  
            monthViewSettings.DayHeaderBackgroundColor = Color.FromRgb(53, 122, 160);  
            monthViewSettings.DayHeaderTextColor = Color.White;  
            calendar.MonthViewSettings = monthViewSettings;  
   
If the given solution doesn’t meet your requirement, could you please revert to with more information about your requirement in detail, it will be helpful for us to check on it and provide you the better solution.  
 
Please let us know if this helpful. 
 
Regards,  
Vigneshkumar R.