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
close icon

Custom SFCalendar

Dear All,

I want to ask is it possible to make the Calendar UI like this (http://imgur.com/ZjK4P7M) using SFCalendar in Xamarin.Forms ?

Thank you.


14 Replies

RK Rathana Kumar Sekar Syncfusion Team June 19, 2017 11:35 AM UTC

Hi Kenny,

Thanks for contacting Syncfusion Support.

We have attached the sample to meet your requirement and we have passed the Calendar inline view as ListView and bind the CalendarInline event data to ListView. Please find the sample from the below link.

Sample: http://www.syncfusion.com/downloads/support/forum/131002/ze/CalendarSample_2_3840835627 

Please let us know if you have any other query.

Regards,
Rathanakumar S.  



KE Kenny June 19, 2017 12:02 PM UTC

Thank you for your reply Mr. / Ms. Rathanakumar S.  
Sorry for unclear question. What i need is the UI like on that image (remove the grid, change the selected date background into blue, align month's name to the center, also show the < and > sign if possible. 


RK Rathana Kumar Sekar Syncfusion Team June 20, 2017 12:17 PM UTC

Hi kenny,

Thanks for your update.

We have modified the sample as per your requirement and we have provided custom header for SfCalendar. Please find the sample from the below link.

Sample: http://www.syncfusion.com/downloads/support/forum/131002/ze/CalendarSample_2_3-660070183 

Please let us know if you have any other query.

Note: We can customize the selected date background color by using DateSelectionColor API of MonthViewSetting.

Regards,
Rathanakumar S. 



KE Kenny July 2, 2017 03:47 PM UTC

Thank you again for your reply Mr. / Ms. Rathanakumar S.

Really appreciate for the answer (selected date background color and Month title is already as I need) but i still have another question, 

can I really remove the grid in the calendar and make the selected date background rounded exactly like example image in (http://imgur.com/ZjK4P7M) ?



RK Rathana Kumar Sekar Syncfusion Team July 4, 2017 12:40 PM UTC

Hi Kenny,

Thanks for contacting Syncfusion Support.

In our current implementation we do not have rounded selected date background support in Android and we have considered this requirement as a feature request. It will be available any of our upcoming release. Please check our website periodically to know the status of the features that are implemented.

Please let us know if you have any other queries.

Regards,
Rathanakumar S.


KE Kenny July 19, 2017 09:01 AM UTC

Thank for your reply. I have already implemented the sample but I have another question. 

How can we custom inline event cell  if there's no appointment on that day (the one with "No Appointment" text and gray background color) ? (I need to change the background color and the text)

I already try some method using OnInlineLoaded event but still didn't get what i need. Really appreciate for another help.



RK Rathana Kumar Sekar Syncfusion Team July 20, 2017 12:34 PM UTC

Hi Kenny,

Thanks for your update.

Query : Change the background color and "No Appointments" Text

We can customize the Inlineview background color by using InlineBackgroundColor API of SfCalendar MonthViewSetting. We have attached the sample which we have changed the “No Appointments” text by changing the “sfcalendar_inlineviewnoappointmenttext” string text in resource and added the new xml file in Android project values folder. Please find the sample from the below link.

Sample: http://www.syncfusion.com/downloads/support/forum/131002/ze/CalendarSample_2_3-1205603288 

Please let us know if you have any other query.

Regards,
Rathanakumar S. 



KE Kenny July 21, 2017 04:03 AM UTC

Thank you very much for your help and fast assist.



RK Rathana Kumar Sekar Syncfusion Team July 24, 2017 12:42 PM UTC

Hi Kenny,

Thanks for the update.

Please let us know if you have any other query.

Regards,
Rathanakumar S.



MJ Melvinder Jit Singh January 24, 2018 09:10 AM UTC

Hi,

I'm actually having a problem with SFCalendar Inline view especially in Android.

I'm doing a Xamarin Cross Platform project that uses SF Calendar.

How can we custom inline event cell to only view the color and subject without the time information when the IsAllDay flag is false for Android as well as in iOS (mainly Android)? 

I've tried few method using OnInlineLoaded but failed where it crashes in Android. Really appreciate for your help and assistance in this.

Thank you.


VA Vinnalan Aravazhi Syncfusion Team January 25, 2018 01:14 PM UTC

Hi Melvinder,

We have checked your requirement "Custom inline event cell without the time information" from our side and we have created a modified sample to achieve your requirement.

In this modified sample we removed the start and end time in ListView. Please find the sample from the below link.

Sample: http://www.syncfusion.com/downloads/support/forum/131002/ze/CalendarSample_2_3840835627-416386351 

Please let us know if you have any other query.

Regards,
Vinnalan K A. 



VS Vadym Stetsyuk September 26, 2018 04:00 PM UTC

Hello. Im trying to make custom visualization for appointments, with this approach


but it does't work. OnInlineLoaded event is occurs first and as result we don't have resolved TempCollection (TempCollection changes only when SelectionChanged event occurs).

Also on iOS InlineEventArgs Appointments property is always empty, but on Android this property contains appropriate `calendar inline events` as expected.


VR Vigneshkumar Ramasamy Syncfusion Team September 27, 2018 11:32 AM UTC

Hi Vadym Stetsyuk,

Thank you for contacting Syncfusion Support.

Query 1: custom visualization for appointments does not work

Based on the provided sample, we have checked your requirement “custom visualization for appointments does not work since OnInlineLoaded event is occurs first and as result we don't have resolved TempCollection”. As per the current implementation the OnInlineLoaded event will be raised before the SelectionChanged event which is an expected behavior of SfCalendar Xamarin.

We are considered to provide support for "DateTime property in InlineEventArgs for OnInlineLoaded event in Xamarin.Forms" and we have logged feature for this. It will be available in any of our upcoming releases and it can be tracked through our Features Management. 
 
Link: https://www.syncfusion.com/support/directtrac/features/XAMARIN-20822

Query 2: InlineEventArgs Appointments property is always empty.

Based on the provided information, we have checked issue with “InlineEventArgs Appointments property is always empty” and it is working fine from our side. We have provided the workaround on sample for the Query 1 to get TempCollection using Appointment`s Start Time (Not applicable for spanning appointments which is started and ends in different date), please find the sample from the below link.

Sample Linkhttp://www.syncfusion.com/downloads/support/forum/131002/ze/CalendarSample868968377.zip

Code snippet to get SelectedDate Appointment details and Today Date Details:

 
 
        void HandleSelectionEventHandler(object sender, SelectionChangedEventArgs args) 
        { 
            vm.Today = (sender as SfCalendar).SelectedDate.ToString("yy-MMM-dd ddd"); 
        } 
 
  void HandleDrawInlineEventHandler(object sender, InlineEventArgs args) 
        { 
            if (args.appointments == null || args.appointments.Count == 0) 
                return; // Not applicable For spanning appointments (Started From Different Date) 
            TempCollection = GetSelectedDateAppointments(args.appointments[0].StartTime); 
            for (int i = 0; i < TempCollection.Count; i++) 
            { 
                vm.Collection.Add(new Model() { Subject = TempCollection[i].Subject, Start = TempCollection[i].StartTime.ToString("t"), End = TempCollection[i].EndTime.ToString("t"), Location = TempCollection[i].Location }); 
            } 
            CustomInlineView inlineView = new CustomInlineView(this) { BindingContext = vm }; 
            StackLayout stk = new StackLayout(); 
            stk.HeightRequest = 150; 
            stk.Children.Add(inlineView); 
            args.View = stk; 
        } 
 
 


If the given information doesn’t meet your requirement, could you please revert us with more information about your requirement in detail, it will be helpful for us to check on it and provide you the better solution. 

Regards,
Vigneshkumar R 



SP Subburaj Pandian Veluchamy Syncfusion Team April 30, 2019 01:23 PM UTC

Hi Vadym, 
 
Thank you for your patience. 
  
The “DateTime property in InlineEventArgs for OnInlineLoaded event in Xamarin.Forms” feature has been included in our Essential Studio 2019 Volume 1 Release version 17.1.0.38 and is available for download under the following link.  
   
  
Please refer the following code snippet for example, 
  
private void Calendar_OnInlineLoaded(object sender, Syncfusion.SfCalendar.XForms.InlineEventArgs e) 
        { 
            var date = e.DateTime; 
        } 
 
We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance.  
  
Regards,
Subburaj Pandian V  
 


Loader.
Live Chat Icon For mobile
Up arrow icon