{"id":30966,"date":"2017-04-18T11:39:15","date_gmt":"2017-04-18T18:39:15","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=30966"},"modified":"2017-04-18T11:39:15","modified_gmt":"2017-04-18T18:39:15","slug":"adding-calendar-xamarin-forms-apps-telerik-calendar","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/adding-calendar-xamarin-forms-apps-telerik-calendar\/","title":{"rendered":"Guest Post: Adding a Calendar to Your Xamarin.Forms Apps with the Telerik Calendar"},"content":{"rendered":"

\t\t\t\tThis is a special guest post from the Progress team at Telerik, the makers of the Telerik UI suites. Speaking on behalf of these awesome engineers of developer tooling is Sam Basu, a Developer Advocate for Telerik products and Xamarin aficionado. You may find him on Twitter as @samidip<\/em><\/a>.<\/em><\/p>\n

\"Celendar<\/p>\n

Are you already building cross-platform native mobile apps using Xamarin.Forms? If so, great job picking your technology stack! After all, where else could you reuse your skills in C#\/XAML to make apps that run on every platform with a truly unified single codebase? While Xamarin provides a vast array of frameworks, IDEs, and integrations, apps may sill need controls outside of those included in Xamarin.Forms. Rather than building your own custom control, developers may prefer to grab a well-engineered, performant UI control out-of-the-box from a service such as Telerik to help ship apps faster. Think of a polished UI as your must-have “wow” factor; that’s what you’ll get with Telerik UI for Xamarin<\/a>.<\/p>\n

Calendars keep our lives organized and productive; everyone uses them and increasingly so in digitally, so it’s no surprise that your mobile app may need to display a calendar and manage events. Turns out, however, calendar UI is tricky business, and the little details make all the difference.<\/p>\n

The Telerik Calendar<\/a> in UI for Xamarin is designed so you can offer your users the ultimate in productivity in your apps with various calendar scenarios. Yes, these are truly native calendars on every mobile platform, simply rendered through the Xamarin.Forms abstraction. The Telerik Calendar not only capitalizes on all of the innate benefits provided by native UI, it also exposes properties\/events in C# to allow developers full customization and flexibility. This post introduces Telerik UI for Xamarin and then dives head first into leveraging the Telerik Calendar to explore all of the available customization options for developers.<\/p>\n

Telerik UI for Xamarin<\/h2>\n

Telerik UI for Xamarin is a collection of Xamarin.Forms controls and Xamarin bindings built on top of the native Telerik UI for iOS and UI for Android suites. The Xamarin.Forms controls also utilize controls and features from the Telerik UI for UWP, providing a common API that allows the developer to use the native Telerik components on all three mobile platforms (iOS \/ Android \/ Windows) using a single shared code base. UI for Xamarin provides rich and performant UI controls out-of-the-box, so that you can focus on delivering app features using functional UI components.<\/p>\n

We know developers don’t always trust high-octane words, though, right? You can play around with the Telerik UI for Xamarin suite yourself and see if it fits your needs. You’re able to check out the performance and interactivity of each of the controls before deciding if it’s right for your Xamarin app. There are beautiful showcase apps that highlight UI for Xamarin controls for each mobile platform, along with the sample code to achieve the same results. Find the apps in respective app stores, including the iOS App Store<\/a> and Google Play<\/a>.<\/p>\n

Getting Started <\/h2>\n

So, how do you incorporate Telerik UI for Xamarin in your Xamarin project? A simple trial download may be the easiest way to get started. Simply head to the download site<\/a> and pull down the bits. Once downloaded, you’ll find examples, templates, and binaries specific to each platform as swell as shared ones. <\/p>\n

If you have the luxury of starting work on greenfield projects, Telerik UI for Xamarin offers several handy project templates\/wizards. The goal is to give developers a great starting point with their Xamarin projects, both on Visual Studio<\/a> and Xamarin Studio<\/a>.<\/p>\n

Be it on Windows or Mac, one of the easiest way for developers to integrate UI for Xamarin in their Xamarin projects is the Telerik NuGet Server. The first step is to configure your IDE’s Package Manager to point to the Telerik NuGet feed. This is in your Preferences\/Options<\/em> and works the same way in Visual Studio and Xamarin Studio. Simply set up a new NuGet source to point to the Telerik gallery at https:\/\/nuget.telerik.com\/nuget<\/code>, authenticate yourself for the first time, and done!<\/p>\n

\"Adding<\/p>\n

Here’s how you use NuGet to pull in UI for Xamarin bits into an existing project, shown here for Xamarin Studio for brevity, though Visual Studio has the same workflow. Once you pull in the Telerik UI for Xamarin package, NuGet does the rest of the magic; you’ll have the required UI for Xamarin references in your shared PCL as well as all the platform specific projects. One big advantage of the NuGet route is that not only do you get an easy way to pull in UI for Xamarin references into your existing project, you also get easy updates too.<\/p>\n

\"Add<\/p>\n

Several of the UI for Xamarin controls gain their polish, behavior, and performance from the fact that they are truly native UI controls customizable for each platform. Accordingly, to render them from a Xamarin.Forms abstraction requires custom renderers<\/a>. No worries, though, everything comes ready out-of-the-box, you just need to register the renderers in your app. The docs<\/a> will show you how to register the renderers for each control when using them on iOS, Android, and UWP platforms. Here’s a sample of what you need when using the Telerik Calendar control in iOS apps. The following code goes in the AppDelegate.cs<\/code> file in your iOS-specific project:<\/p>\n

\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing Foundation;\nusing Xamarin.Forms;\n\t    \n[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Input.RadCalendar), typeof(Telerik.XamarinForms.InputRenderer.iOS.CalendarRenderer))]\n\t    \nnamespace MyApp.iOS\n{\n    [Register(\"AppDelegate\")]\n    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate\n    {\n        public override bool FinishedLaunching(UIApplication app, NSDictionary options)\n        {\n            global::Xamarin.Forms.Forms.Init();\n\t    \n            Telerik.XamarinForms.Common.iOS.TelerikForms.Init();\n            LoadApplication(new App());\n\t    \n            return base.FinishedLaunching(app, options);\n        }\n    }\n}\n<\/pre>\n
Once you have all of the bits referenced and renderers registered, you’re ready to roll with the Telerik Calendar control. Fire up any XAML view and this simple markup renders the Calendar for you:<\/p>\n
\n\t... xmlns:TelerikInput=\"clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input\" ...\n\t\n\n<\/pre>\n
Calendar Visual Structure<\/h2>\n
The Telerik Calendar control is a calendar for sure, just rendered with painstaking accuracy for your app with a many customization options and catered to the unique UI paradigms of each mobile platform. Before we start tweaking things, it helps to see the overall, big-picture control—the simple rendering of the Telerik Calendar with all visual elements explained. The labels should be self-explanatory:<\/p>\n
\"Telerik<\/p>\n
You also get some control to show or hide specific details to suit your needs. By default, the day names show up and the week numbers don’t, but here’s some code to flip both (along with the resulting calendar on each mobile platform):<\/p>\n
\nvar calendar = new RadCalendar();\ncalendar.WeekNumbersDisplayMode = DisplayMode.Show;\ncalendar.DayNamesDisplayMode = DisplayMode.Hide;\n<\/pre>\n
\"Telerik<\/p>\n
Calendar ViewMode<\/h2>\n
The Telerik Calendar has several supported *View Modes* that control how the calendar is initially rendered, namely:<\/p>\n