sfCalendar CellView does not have enough properties for customisations

[Buddhima]

I want to show a custom cell view if the cell's date is the current date (inside a circle). And when the user taps on a cell, it should change the border colour of the circle. I tried it using  calendar_OnMonthCellLoaded event. I was able to customize the cell view. But after that, the selected cell highlight feature was disabled.

So I went to try It using a converter. 

<DataTrigger

                                                                 TargetType="border:SfBorder" Binding="{Binding Day, Converter={StaticResource IsTodayConverter},ConverterParameter={Binding Date}}"

                                                                 Value="false">

                                                                    <Setter Property="BorderColor" Value="Transparent"/>

                                                                    <Setter Property="BorderWidth" Value="0"/>

                                                                </DataTrigger>

The converter receives the date as an integer. But, it does not pass the whole datetime object.

Here is my converter.

 public class IsTodayConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            bool result = false;

            try

            {

                if (value is DateTime day)

                {

                    if (day.ToString("ddMMyyyy") == DateTime.Now.ToString("ddMMyyyy"))

                    {

                        result = true;

                    }

                }

            }

            catch (Exception ex)

            {

                

            }

            return result;

        }

So, I want to know how to do it.

[Muniappan Subramanian]

Hi Buddhima,  

 

Thank you for contacting Syncfusion support.  

 

We have checked your reported issue “show a custom cell view and when the user taps on a cell, it should change the border colour of the circle”. You can achieve your requirement by customizing the month cell with a custom selection by using the CellTemplate property of MonthViewSettings and OnMonthCellLoaded event of SfCalendar in Xamarin.Forms. You can change the selection border color based on the date selection using BorderColor property from viewmodel. we have prepared a simple sample for the same, please find the sample link form below, 

 

Code snippet: 

<calendar:MonthViewSettings.CellTemplate> 

    <DataTemplate> 

        <AbsoluteLayout BackgroundColor="Transparent" 

                                        Margin="0" 

                                        Padding="0"> 

            <Frame IsVisible="{Binding IsSelected}" 

                                    BackgroundColor="Transparent" 

                                    BorderColor="{Binding BorderColor}" 

                                    HasShadow="false" 

                                    AbsoluteLayout.LayoutBounds="0.5,0.5,30,30" 

                                    AbsoluteLayout.LayoutFlags="PositionProportional" 

                                    CornerRadius="15" 

                                    HeightRequest="30" 

                                    WidthRequest="30" 

                                    VerticalOptions="Center" 

                                    HorizontalOptions="Center"> 

            </Frame> 

            <Label FontSize="13" 

                                    FontAttributes="None" 

                                    LineBreakMode="TailTruncation" 

                                    HorizontalTextAlignment="Center" 

                                    VerticalTextAlignment="Center" 

                                    AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" 

                                    AbsoluteLayout.LayoutFlags="All" 

                                    Text="{Binding DayNumber}" 

                                    TextColor="{Binding DateTextColor}" 

                                    /> 

        </AbsoluteLayout> 

    </DataTemplate> 

</calendar:MonthViewSettings.CellTemplate> 

 

 

private void Calendar_OnMonthCellLoaded(object sender, MonthCellLoadedEventArgs e) 

{ 

    var model = new ViewModel(); 

    model.DayNumber = e.Date.Day.ToString(); 

 

    if (Convert.ToDateTime(calendar.SelectedDate).Day == e.Date.Day && Convert.ToDateTime(calendar.SelectedDate).Month == e.Date.Month && Convert.ToDateTime(calendar.SelectedDate).Year == e.Date.Year) 

    { 

        model.IsSelected = true; 

        if (e.Date.Date == DateTime.Now.Date) 

        { 

            model.BorderColor = Color.Orange; 

        } 

    } 

 

    e.CellBindingContext = model; 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CalendarXamarin2136594205 

 

Please find the output for the same, 

 

 

We hope that this helps you, kindly revert us if you have any concern.  

 

Regards, 

Muniappan S. 

[Buddhima]

Thank you! 

I was able to solve it by extracting the cell view to a custom template view and modify its properties dynamically on 

calendar_OnMonthCellLoaded

[Muniappan Subramanian]

Hi Buddhima, 

 

Thank you for the update. 

 

We are glad that our solution meets your requirement. Please let us know if you need any further update. As always, we are happy to help you out. 

 

Regards, 

Muniappan S.