Styling in RadCalendar

[Nik]

I am working on Xamarin UWP project and have used the following code mentioned below for calendar cell styling. I am not able to change text color of specific dates in other month, it always display other month dates as gray,  can you please provide me a solution.

private CalendarCellStyle EvaluateCellStyle(CalendarCell cell)
{
    Color background = default(Color);
    Color selectedCellForegroundColor = default(Color);
    Color todayBorderColor = Color.FromRgb(115, 174, 239);
    double dayNamesFontSize = default(double);
    double fontSize = default(double);
    Thickness todayBorderThickness = default(Thickness);

    switch (Device.RuntimePlatform)
    {
        case "iOS":
            background = Color.White;
            selectedCellForegroundColor = Color.White;
            fontSize = 14;
            dayNamesFontSize = 14;
            todayBorderThickness = new Thickness(2);
            break;
        case "Android":
            background = Color.White;
            selectedCellForegroundColor = Color.FromHex("FF0066CC");
            fontSize = 15;
            dayNamesFontSize = 15;
            todayBorderThickness = new Thickness(1);
            break;
        case "UWP":
            background = Color.FromRgb(30, 30, 30);
            selectedCellForegroundColor = Color.White;
            fontSize = 17;
            dayNamesFontSize = 17;
            todayBorderThickness = new Thickness(2);
            break;
    }

    if (cell.Type == CalendarCellType.DayName)
    {
        return new CalendarCellStyle
        {
            BackgroundColor = Color.LightGray,
            FontSize = dayNamesFontSize,
            FontAttributes = FontAttributes.Bold,
            TextColor = Color.FromRgb(0, 122, 255)
        };
    }

    var defaultStyle = new CalendarCellStyle
    {
        BackgroundColor = background,
        FontSize = fontSize,
        FontAttributes = FontAttributes.None,
        TextColor = Color.FromRgb(139, 209, 0)
    };

    if (cell is CalendarDayCell dayCell)
    {
        if (dayCell.IsFromCurrentMonth)
        {
            if (dayCell.IsToday)
            {
                defaultStyle.TextColor = Color.FromRgb(0, 122, 255);
                defaultStyle.FontAttributes = FontAttributes.Bold;
                defaultStyle.BorderColor = todayBorderColor;
                defaultStyle.BorderThickness = todayBorderThickness;
            }
        }
        else
        {
            if (dayCell.IsToday)
            {
                defaultStyle.TextColor = todayBorderColor;
                defaultStyle.BorderColor = todayBorderColor;
                defaultStyle.BorderThickness = todayBorderThickness;
            }
            else
            {
                
                  if (dayCell.Date.DayOfWeek == DayOfWeek.Sunday || dayCell.Date.DayOfWeek == DayOfWeek.Saturday)
                  {
                           defaultStyle.TextColor = Color.Red;
                  }
                  else
                  {
                           defaultStyle.TextColor = Color.Gray;
                  }

            }
        }

        if (dayCell.IsSelected)
        {
            defaultStyle.TextColor = selectedCellForegroundColor;
            defaultStyle.BorderColor = Color.FromHex("FF0066CC");
        }

        return defaultStyle;
    }

    return null; // default style
}

[Didi]

Hi Nikhil,

In order to style the other month cells, you have to use the OtherMonthCellStyle property

    <Grid>
        <input:RadCalendar>
            <input:RadCalendar.TitleCellStyle>
                <input:CalendarCellStyle BackgroundColor="LightBlue" 
                                 TextColor="Yellow" 
                                 FontSize="20"/>
            </input:RadCalendar.TitleCellStyle>

            <input:RadCalendar.OtherMonthCellStyle>
                <input:CalendarCellStyle TextColor="Blue" />
            </input:RadCalendar.OtherMonthCellStyle>
        </input:RadCalendar>
    </Grid>

Review all available styling options for Telerik Xamarin.Forms Calendar here: https://docs.telerik.com/devtools/xamarin/controls/calendar/styling/calendar-styling-cell 

In addition, if you want to further customize the calendar and the styles are not available in Xamarin.Forms, you can use custom renderers. Example for Android here: https://docs.telerik.com/devtools/xamarin/controls/calendar/styling/custom-renderers/calendar-customrenderers-android 

For UWP, you have to review the UI for UWP Calendar customization options: https://docs.telerik.com/devtools/universal-windows-platform/controls/radcalendar/styling/customcellstyling 

Regards,
Didi
Progress Telerik