Quick Start: Display a Calendar Control

This section describes how to add a Calendar control to your Xamarin application and select a date on the calendar at runtime. This topic comprises of two steps:

• Step 1: Add a Calendar Control
• Step 2: Run the Project

The following image shows how the Calendar appears after completing the above steps.

Step 1: Add a Calendar Control

Complete the following steps to initialize a Calendar control in C# or XAML.

In Code

1. Add a new class (say QuickStart.cs) to your Portable or Shared project and include the following references.

   using Xamarin.Forms;
   using C1.Xamarin.Forms.Calendar;
   

2. Instantiate a Calendar control in a new method ReturnMyControl() as illustrated in the code below.

   public static C1Calendar ReturnMyControl()
      {
          C1Calendar calendar = new C1Calendar();
          calendar.MaxSelectionCount = -1;
          calendar.HorizontalOptions = LayoutOptions.FillandExpand;
          calendar.FontSize = 20;
          return calendar;
      }
   

In XAML

1. Add a new Content Page (for example QuickStart.xaml) to your Portable or Shared project and modify the <ContentPage> tag to include the following references:

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:c1="clr-namespace:C1.Xamarin.Forms.Calendar;assembly=C1.Xamarin.Forms.Calendar"
   x:Class="CalendarQuickStart.QuickStart"
   Padding="20">
   </ContentPage>
   

2. Initialize a Calendar control by adding the following markup inside the <ContentPage></ContentPage> tags as illustrated below.

   <Grid>
       <Label Text="{Binding MainText}" HorizontalOptions="Center" Font="Large" />
       <c1:C1Calendar x:Name="calendar" MaxSelectionCount="-1"/>
   </Grid>
   

Step 2: Run the Project

1. In the Solution Explorer, double-click App.xaml.cs file to open it.

2. Complete the following steps to display the Calendar control.

   • To return a C# class: In the class constructor App(), set a new ContentPage as the MainPage and assign the control to the ContentPage's Content by invoking the ReturnMyControl() method in Step 2 above. The following code shows the class constructor App() after completing this step.

     public App()
       {
          // The root page of your application
          MainPage = new ContentPage
            {
              Content = QuickStart.ReturnMyControl()
             };
       }
     

   • To return a Content Page: In the constructor App(), set the Content Page QuickStart as the MainPage. The following code shows the class constructor App(), after completing this step.

     public App()
       {
          // The root page of your application
          MainPage = new QuickStart();
        }
     

3. Some additional steps are required to run iOS and UWP apps:

   • iOS App:

     1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project to open it.

     2. Add the following code to the FinishedLaunching() method.

        C1.Xamarin.Forms.Calendar.Platform.iOS.C1CalendarRenderer.Init();
        

   • UWP App:

     1. In the Solution Explorer, expand the MainPage.xaml inside YouAppName.UWP project.

     2. Double click the MainPage.xaml.cs to open it and add the following code to the class constructor.

        C1.Xamarin.Forms.Calendar.Platform.UWP.C1CalendarRenderer.Init();
        

     3. (Optional) In case you compile your UWP application in Release mode, you need to explicitly add the following code to the OnLaunched method in your App.xaml.cs to include the correct assemblies with your application.

        var assembliesToInclude = new List<Assembly>();
        assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Calendar.Platform.UWP.C1CalendarRenderer)
        .GetTypeInfo().Assembly);
        assembliesToInclude.Add(typeof(C1.UWP.Calendar.C1Calendar).GetTypeInfo().Assembly);
        Xamarin.Forms.Forms.Init(e, assembliesToInclude);