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. Image for the cookie policy date

change how an appointment looks like


I'm making an application where I use the SfCalendar control, but instead of the tiny dot at the bottom of the day I'd like to have my day colored so that it is clearer on which day I have something going on. 
I can't use the blacked out dates here because this already has another purpose and than I wouldn't be able to see my appointment.

Is there anyway to do is?
If that is not possible: maybe there is a way to highlight a timeperiod without using select, something for special dates?

Thank you in advance!

5 Replies

SP Subburaj Pandian Veluchamy Syncfusion Team August 9, 2019 11:20 AM UTC

Hi Jens, 
Thank you for contacting Syncfusion support. 

Your requirement of customizing Calendar MonthView in Xamarin.Forms can be achieved by setting Custom view to the month cell using OnMonthCellLoadedEvent or setting CellTemplate of Calendar MonthViewSettings. Based on your requirement, you can customize the calendar UI elements, using the same. 
If your requirement is just to customize the Text and Background, you can use MonthViewSettings properties, you can refer our User Guide documentation regarding the same by the following link.

Month Cell customization using properties: https://help.syncfusion.com/xamarin/sfcalendar/display-modes#month-view-customization

Month Cell customization using Custom view: https://help.syncfusion.com/xamarin/sfcalendar/how-to?cs-save-lang=1&cs-lang=csharp#create-your-own-custom-calendar-month-cell-view 
We have Customization sample in our Calendar Sample browser sample and it is in MVVM pattern. you can download and refer the same by the following GitHub link. 
We hope this helps. Please let us know, if you would require any further assistance.  
Subburaj Pandian V 

JD jens de rijcke August 12, 2019 12:11 PM UTC


Already a big thanks for the help, I'm using OnMonthCellLoaded for changing the layout of certain cells as asked before and that works fine.
But I'm working with a toggle to put this highlight on and off and I'm not seeing a way to do this. Is there a way that this can be achieved as well? I'm thinking in the same was as before, maybe there is a way to get a certain date and edit the specific field.

Underneath is the xaml layout that needs to be toggled. The dates that need to be toggled are in a collection.

            <DataTemplate x:Key="scheduleTemplate">
                <Grid HorizontalOptions="Center" BackgroundColor="{Binding bgColor}" >
                    <Image Source="{Binding imageSource}" Margin="2"/>
                    <Label Text="{Binding Date.Day}" HorizontalOptions="Center" TextColor="{Binding lblColor}" HorizontalTextAlignment="Center" VerticalOptions="Center" VerticalTextAlignment="Center" FontSize="16"/>


GC Ganeshamoorthy Chandramoorthy Syncfusion Team August 13, 2019 02:49 PM UTC

Hi Jens,


You can add or remove the highlight of certain cells by refreshing the calendar by using Refresh method. By calling the refresh method, each month cell UI will be updated and by using MonthCellLoaded event you can customize the specific set of dates.  Kindly refer the below code snippet.


        private bool isToggled = false;
        public MainPage()
            calendar.OnMonthCellLoaded += Calendar_OnMonthCellLoaded;

        private void Handle_Clicked(object sender, System.EventArgs e)
            this.isToggled = !this.isToggled;

        private void Calendar_OnMonthCellLoaded(object sender, MonthCellLoadedEventArgs e)
            if ((e.Date.Date.Day == 10 || e.Date.Date.Day == 11 || e.Date.Date.Day == 13) && this.isToggled)
                var button = new Button();
                button.Text = e.Date.Day.ToString();
                e.View = button;


Sample link: GettingStartedCalendar


We hope this helps to achieve your requirement. Please let us know, if you would require any further assistance.



Ganeshamoorthy C

JD jens de rijcke August 14, 2019 07:58 AM UTC

Hi Ganeshamoorthy,

That works, thank you! I was actually looking for a way to refresh certain cells, just the ones in the collection, so that I don't have to reload the whole calendar to change two or three cells. That is probably not possible, if not i'm out of questions for this thread.


FP Farjana Parveen Ayubb Syncfusion Team August 14, 2019 11:34 AM UTC

Hi Jens, 
Thanks for the update. As per the implementation, each cell in the month view will be refreshed by calling Refresh method. So, it is not possible to to refresh the certain cells in month view 
Farjana Parveen A 

Live Chat Icon For mobile
Up arrow icon