This post will walk you through setting up a Xamarin Platform Effect and show you how to wire up an event handler so you can leverage native APIs in the case that the Xamarin.Forms wrapper doesn’t yet have. For this example, I’ll use the Telerik UI for Xamarin RadCalendar.
tl;dr Full source code on GitHub here.
I get frequently asked how to enable RangeSelection (aka Multiple Selection) for the RadCalendar. The native platform calendar controls all have Range Selection available, so we only need to create a Platform Effect to access that native feature.
Note: If you’re not familiar with Effects, I recommend visiting this article first to understand the fundamentals (it’s a quick tutorial).
The main things I need are:
- DateTime StartDate
- DateTime EndDate
- DateRangeChangedEventArgs (class)
- DateRangeChanged (event)
- DateRangeChanged (delegate)
First, let’s get the event args out of the way because we’ll need this defined before writing the Effect.
Now we can move on to the Effect definition that lives in the class library project. The class defines the rest of items I listed above, I’ve called out how the event is invoked, thus subscribers to the vent will have their event handlers executed.
With this set up , we can add the Effect to the Xamarin.Forms XAML RadCalendar instance:
Code behind, this is just to set the start and end dates to test the Effect:
But we can’t run it just yet. It’s time to implement the native Effect classes., it’s where the magic happens. I’ll go through each platform separately instead of hitting you over the head with it all at once.
The next thing to consider is how to actually set the date range. This is done using the SelectedDateRange property to an instance of
CalendarDateRange. This is what we needed the event for! You’ll see that when the Effect is Attached to the control
Notice we need to use the native control’s selection property and convert from DateTime to NSDate
And finally, the same approach is used for the native Android calendar, UI for Xamarin.Android RadCalendarView.
Notice we need to use the native control’s selection property and convert from DateTime to Java Calendar
And that’s it! All three platform’s Calendar control now will show range selection.
This isn’t production-ready code, it’s proof of concept and there are no defensive techniques in place (i.e. try/catch). I wanted to keep it as simple as possible to focus on the concepts.
If you want to use the code for your app, I’m happy I could help (MIT license). Just please don’t copy-paste it all and call it a day, then ping me on Twitter later and say “it’s broken!”. The native platform logic should be inside try catch blocks and I would make sure the DateTime conversions are accurate for your needs.