Skip to content

5.1 Built in themes

Jump to bottom
Ione Souza Junior edited this page Mar 8, 2021 · 4 revisions

Built-in themes are an easy way to start using the calendar view without effort. When we use the Xalendar without specify any theme to use, the default theme is applied. We call this default theme Classic.

Classic theme

XAML Layout 
<ContentPage
    Title="Your Page"
    x:Class=“YourNamespace.YourPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:xal="http://xalendar.com/schemas/xaml">
    <ContentPage.Content>
        <xal:CalendarView />
    </ContentPage.Content>
</ContentPage>

Xalendar has other themes too. Let's know them.

Planning theme

The theme called Planning has a clean and beautiful design. We found it on Dribbble, and we use it as inspiration to built this theme in Xalendar. Thanks to Afterglow Studio, creator of the design.

To use it, import the theme in the resources and add a name for it. To reference in the calendar, add the resource using the Theme property.

XAML Layout 
<ContentPage
    Title="Your Page"
    x:Class=“YourNamespace.YourPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:xal="http://xalendar.com/schemas/xaml">
    <ContentPage.Resources>
        <ResourceDictionary>
            <xal:Planning 
                x:Key="PlanningTheme" 
            />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <xal:CalendarView 
            Theme="{StaticResource PlanningTheme}" 
        />
    </ContentPage.Content>
</ContentPage>

Task Management theme

The Task Management theme was another layout found on Dribbble. We use it as an inspiration to built this theme into Xalendar. Thanks to Shahin Srowar, creator of the design.

XAML Layout 
<ContentPage
    Title="Your Page"
    x:Class=“YourNamespace.YourPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:xal="http://xalendar.com/schemas/xaml">
    <ContentPage.Resources>
        <ResourceDictionary>
            <xal:TaskManagement 
                x:Key="TaskManagementTheme" 
            />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <xal:CalendarView 
            Theme="{StaticResource TaskManagementTheme}" 
        />
    </ContentPage.Content>
</ContentPage>

Amazonas theme

The Amazonas theme was a layout found on this GitHub issue in the Xamarin Community Toolkit repository.

Thank you to Pedro Jesus for the theme name suggestion.

XAML Layout 
<ContentPage
    Title="Your Page"
    x:Class=“YourNamespace.YourPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:xal="http://xalendar.com/schemas/xaml">
    <ContentPage.Resources>
        <ResourceDictionary>
            <xal:Amazonas 
                x:Key="AmazonasTheme" 
            />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <xal:CalendarView 
            Theme="{StaticResource AmazonasTheme}" 
        />
    </ContentPage.Content>
</ContentPage>
Clone this wiki locally