Calendar plugin for Xamarin.Forms
Simple cross platform plugin for Calendar control featuring: - Displaying events by binding EventCollection - Localization support with System.Globalization.CultureInfo - Customizable colors, day view sizes/label styles, custom Header/Footer template support - UI reactive to EventCollection, Culture and other changes
We are open to any suggestions and feedback, and we got our community telegram group here :)
If you are coming back take a look on the Changelog here.
| Android | iPhone |
| ------- | ------ |
| |
|
| Android | iPhone |
| ------- | ------ |
| |
|
| Platform | Version | | -------- | ------- | Xamarin.Forms | 3.3+ | | Xamarin.Android | 8.1+ | | Xamarin.iOS | ? |
To get started just install the package via Nuget into your shared and client projects. You can take a look on the sample app to get started or continue reading.
Reference the following xmlns to your page:
xml xmlns:controls="clr-namespace:Xamarin.Plugin.Calendar.Controls;assembly=Xamarin.Plugin.Calendar"
Basic control usage:
xml
Bindable properties: *
CultureCultureInfo *
Monthint *
Yearint *
EventsEventCollection (from package) * Custom colors, fonts, sizes ...
In your XAML, add the data template for events, and bind the events collection, example:
xml
In your ViewModel reference the following namespace:
csharp using Xamarin.Plugin.Calendar.Models;
Add property for Events:
csharp public EventCollection Events { get; set; }
Initialize Events with your data:
csharp Events = new EventCollection { [DateTime.Now] = new List { new EventModel { Name = "Cool event1", Description = "This is Cool event1's description!" }, new EventModel { Name = "Cool event2", Description = "This is Cool event2's description!" } }, // 5 days from today [DateTime.Now.AddDays(5)] = new List { new EventModel { Name = "Cool event3", Description = "This is Cool event3's description!" }, new EventModel { Name = "Cool event4", Description = "This is Cool event4's description!" } }, // 3 days ago [DateTime.Now.AddDays(-3)] = new List { new EventModel { Name = "Cool event5", Description = "This is Cool event5's description!" } }, // custom date [new DateTime(2020, 3, 16))] = new List { new EventModel { Name = "Cool event6", Description = "This is Cool event6's description!" } } };
Initialize Events with your data and a different dot color per day:
csharp Events = new EventCollection { //2 days ago [DateTime.Now.AddDays(-2)] = new DayEventCollection( Color.Purple, Color.Purple) { new EventModel { Name = "Cool event1", Description = "This is Cool event1's description!" }, new EventModel { Name = "Cool event2", Description = "This is Cool event2's description!" } }, // 5 days ago [DateTime.Now.AddDays(-5)] = new DayEventCollection(Color.Blue, Color.Blue) { new EventModel { Name = "Cool event3", Description = "This is Cool event3's description!" }, new EventModel { Name = "Cool event4", Description = "This is Cool event4's description!" } }, }; //4 days ago Events.Add(DateTime.Now.AddDays(-4), new DayEventCollection(GenerateEvents(10, "Cool")) { EventIndicatorColor = Color.Green, EventIndicatorSelectedColor = Color.Green });
Where
EventModelis just an example, it can be replaced by any data model you desire.
EventsCollectionis just a wrapper over
Dictionaryexposing custom
Addmethod and
this[DateTime]indexer which internally extracts the
.Datecomponent of
DateTimevalues and uses it as a key in this dictionary.
DayEventCollectionis just a wrapper over
Listexposing custom properties
EventIndicatorColorand
EventIndicatorSelectedColorfor assigning a custom color to the dot.
Sample properties:
xml MonthLabelColor="Red" YearLabelColor="Blue" SelectedDateColor="Red" SelectedDayBackgroundColor="DarkCyan" EventIndicatorColor="Red" EventIndicatorSelectedColor="White" DaysTitleColor="Orange" SelectedDayTextColor="Cyan" DeselectedDayTextColor="Blue" OtherMonthDayColor="Gray" TodayOutlineColor="Blue" TodayFillColor="Silver"
You can customize how will look event indication with property
EventIndicatorType
BottomDot- event indicator as dot bellow of date in calendar (default value)
TopDot- event indicator as dot on top of date in calendar
Background- event indicator as colored background in calendar
BackgroundFull// event indicator as larger size colored background in calendar
EventIndicatorType="Background"
You can write your own customizations commands for swipe.
xml SwipeLeftCommand="{Binding SwipeLeftCommand}" SwipeRightCommand="{Binding SwipeRightCommand}" SwipeUpCommand="{Binding SwipeUpCommand}"
You can also disable default swipe actions.
xml SwipeToChangeMonthEnabled="False" SwipeUpToHideEnabled="False"
Enable/Disable animation when calendar is loaded or refreshed Sample properties:
xml AnimateCalendar="False"
There are several templates that can be used to customize the calendar. You can find an example for each one in the AdvancedPage.xaml. You can create your own custom control file or you can also write customization directly inside of Templates.
These sections provide customization over appearance of the controls of the calendar, like showing the selected month and year, month selection controls etc.
Customize the header section (top of the calendar control). Example from AdvancedPage.xaml
xml
Customize the footer section (under the calendar part, above the events list). Example from AdvancedPage.xaml
xml
Customize the bottom section (at the bottom of the calendar control, below the events list). Example from AdvancedPage.xaml
xml
These templates provide customization for the events list.
Customize the appearance of the events section. Example from AdvancedPage.xaml
xml
Customize what to show in case the selected date has no events. Example from AdvancedPage.xaml
xml