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

How to add multiple images to a date cell in syncfusion sfcalendar in xamarin forms


I want to have a customized date cell in which it's capable of holding multiple images(Like the image which I have attached herewith). I want to know whether if I am capable enough to customize the cell according to my requirements, and if it is how am I able to implement it using xamarin forms.


Attachment: Customcalendarcell_8db839a2.zip

3 Replies

SP Subburaj Pandian Veluchamy Syncfusion Team February 15, 2019 10:00 AM UTC

Hi Shehan, 
Thank you for contacting Syncfusion support. 
Based on the provided information, your requirement of “Customizing the Calendar month cell with the images” in Xamarin.Forms can be achieved using CellTemplate property of MonthViewSettings and OnMonthCellLoaded event of Calendar. Using this event, you can get the Date and appointment details of the particular cell and you can set your desired customized view in the View property in MonthCellLoadedEventArgs argument. 
We have prepared sample based on your requirement, 
Sample link: CalendarCellTemplate 
In the sample, we have set customized view using CellTemplate and get the values from OnMonthCellLoaded event. We have loaded date, icon to indicate appointment availability and appointments count in the particular date. 
You can use either CellTemplate property of MonthViewSettings or View property of MonthCellLoadedEventArgs in OnMonthCellLoaded event of Calendar to set the customized view instead of date in month cell. 
We hope this helps. 
Subburaj Pandian V  

FL FEDERICA LAZZERI March 8, 2019 03:22 PM UTC

Hi, having a similar target i need to apply your suggested solution but I have a further difficulty:
The data i need to use to populate the cell template are coming from a "web service" (called asynchronous) so when the OnMonthCellLoaded fires the server has not yet sent the data back to me, so i can't put in the template the right values.

I could i solve this?
Is there a way to modify the calendar's cells AFTER they have been loaded in the event you are referring?


SP Subburaj Pandian Veluchamy Syncfusion Team March 11, 2019 10:45 AM UTC

Hi Federica, 
We have checked your query “Is there a way to modify the calendar's cells AFTER they have been loaded in the event you are referring”. Since OnMonthCellLoaded event is synchronous process, using this in asynchronous way is not recommended one. So, we suggest you to populate the async data from the server, once got the required data populate the template to OnMonthCellLoaded approach. 
Though, you can achieve your requirement by calling Refresh method in calendar to update the template for month view once the view rendered but we suspect it may cause performance delay since we are rendering UI twice based on data source.  
Kindly refer the below code example for the same, 
Please let us know, if this help full. 
Subburaj Pandian V 

Live Chat Icon For mobile
Up arrow icon