Change font

[Ian]

How does one change the font family used by the calendar?

[Lance | Manager Technical Support]

Hi Ian,

Currently, there isn't a FontFamily property available in the CalendarCellStyle or AppointmentStyle accessible from Xamarin.Forms (you can set the TextColor, FontSize and FontAttribute properties).

You would  have access to the native control if you build a custom renderer and override the native properties. See the following articles on how to build custom renderers.

- Android (see native docs here)
- iOS (see native docs here)
- UWP (see native docs here)

Once in the custom renderer, you'll need to apply the native platform's approach for setting font family. For example, in UWP, you have access to the CellStyle and set FontFamily in using a UWP style setter.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Ian]

So how would I obtain a reference to TKCalendar in the renderer on iOS?

[Lance | Manager Technical Support]

Hello Ian,

Any custom renderer gives you the control's instance in the renderer itself. The pattern usually follows "this.Control" as the reference to the native control being rendered. Be sure to make sure Control isn't null before working with it.

If you're not familiar with writing custom renderers in general, I recommend following this Xamarin tutorial (do at least the first 3 parts, up until "Customizing an Entry") It's a quick tutorial and gives you a good starting point before digging into more advanced Custom Renderers scenarios for Telerik native controls.

You can also take a look at our demos where we have some custom renderers for the RadCalendar. Review both the SDKBroswer and QSF demos as each has slightly different implementations (see the Developer Focused Examples article).

I hope this information helps!

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Ian]

Hi Lance, thanks. I think I knew that once!

Still, I can't find a font family property. Do I need to fish around inside of the views looking for labels?

[Lance | Manager Technical Support]

Hello Ian,

The XamainForms Label control isn't available on the native platforms, rather it's a wrapper for the native platform's Text rendering control. You'll need to use the appropriate native way to set the font family. You'll find a lot of resources online on how to do this by searching with "Xamarin.iOS", "Xamarin.Android" or "UWP" identifiers.

For example, let me show you how to do this on UWP with the Bauhaus 93 font. I've attached the demo, but a little walk through will help call out some important distinctions. 

Demo

In UWP, the control that renders text is called a TextBlock. The TextBlock actually has a FontFamily property, which you can set on any TextBlock instance or use a globally available Style.

UWP Project App.xaml

In the following TextBlock Style I assign the FontFamily to Bauhaus 93, along with a couple other properties, and give it an x:Key so we can reference it later.

<Style x:Key="BauhausTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Bauhaus 93" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="TextAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
</Style>

Custom Calendar Styling

Now that we have the TextBlock style defined, the next important thing is find out how to customize the native RadCalendar control.  The UI for UWP RadCalendar control is what we render for UWP applications, you can find the documentation on how to set a custom cell styling the following article. UI for UWP RadCalendar Documentation Custom Cell Styling.

Following the guidance there, it explains you can create a CalendarCellStyle object and then use your custom TextBlock style for the ContentStyle. This is because the content of a CalendarCell is essentially a TextBlock.

Here's what I now have defined in the UWP app's App.xaml, notice the following:

- Be sure you don't accidentally use the Xamarin.Forms namespace for the CalendarCelStyle, this style needs to explicitly target the UWP control:
- I use my custom TextBlock Style's x:Key to set the CalendarCellStyle's ContentStyle property

<Application x:Class="CustomStyleInCustomRenderer.UWP.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="using:CustomStyleInCustomRenderer.UWP"
         xmlns:input="using:Telerik.UI.Xaml.Controls.Input"
         RequestedTheme="Light">

    <Application.Resources>
        <Style x:Key="BauhausTextBlockStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Bauhaus 93" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="TextAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>

        <input:CalendarCellStyle x:Key="BauhausCellStyle" ContentStyle="{StaticResource BauhausTextBlockStyle}" >
            <input:CalendarCellStyle.DecorationStyle>
                <Style TargetType="Border">
                    <Setter Property="Background" Value="LightCoral" />
                    <Setter Property="BorderBrush" Value="DarkRed"/>
                </Style>
            </input:CalendarCellStyle.DecorationStyle>
        </input:CalendarCellStyle>

    </Application.Resources>
</Application>

UWP Project Custom Renderer

Finally, in our custom renderer, you have access to the native RadCalendar instance. You can then get the custom style from the Application resources and set it to the calendar:

using Windows.UI.Xaml;
using CustomStyleInCustomRenderer.UWP.CustomRenderers;
using Telerik.XamarinForms.InputRenderer.UWP;
using Xamarin.Forms.Platform.UWP;

// You need to declare the custom renderer to override the default one
[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Input.RadCalendar), typeof(CustomCalendarRenderer))]
namespace CustomStyleInCustomRenderer.UWP.CustomRenderers
{
    public class CustomCalendarRenderer : CalendarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Telerik.XamarinForms.Input.RadCalendar> e)
        {
            base.OnElementChanged(e);

            // e.NewElement is the XamarinForms RadCalendar control
            if (e.NewElement != null)
            {
                // this.Control is the native UWP calendar control, which is what you want to customize
                if (Control != null)
                {
                    // get a reference to the style in the XAML
                    var bauhausCellStyle = Application.Current.Resources["BauhausCellStyle"] as Telerik.UI.Xaml.Controls.Input.CalendarCellStyle;

                    // set that custom style to the native calendar
                    (Control as Telerik.UI.Xaml.Controls.Input.RadCalendar).SelectedCellStyle = bauhausCellStyle;
                }
            }
        }
    }
}

Here's the result at runtime, notice that the SelectedCell is using my custom Bauhaus style!





For the other projects you'll need to research a little further on how those platforms render text and how to set their FontFamily.


To give you a head start, please visit the custom renderer articles I shared earlier, but here is some additional guidance to help further:

iOS

On iOS you use the Xamarin.iOS UIFont class: https://developer.xamarin.com/api/type/UIKit.UIFont/, then to use it on the TKCalendar's DayCell:




Android

The native android control's documentation on customization is here: RadCalendarView Customization. Note that for the C# version of the API, we use C# conventions instead of Java conventions.

For example: cellStyle.setFontName(" ") is actually cellStyle.FontName = " " in C#.




Further Assistance with the native controls

If you need assistance with the native controls themselves, open a ticket under the native control's category; UI for Xamarin.Android or UI for Xamarin.iOS so that you can get help from the developers of the native controls.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Ian]

I've tried iOS and it's working. Great, thanks.