Need help with Xamarin.Plugin.Calendar?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

lilcodelab
152 Stars 37 Forks MIT License 161 Commits 18 Opened issues

Description

Calendar plugin for Xamarin.Forms

Services available

!
?

Need anything else?

Contributors list

Calendar Plugin for Xamarin.Forms

Build Status Nuget Issues Chat License

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.

Simple Implementation

| Android | iPhone | | ------- | ------ | | Android Calendar Screenshot | iPhone Calendar Screenshot |

Advanced implementation

| Android | iPhone | | ------- | ------ | | Android Custom Calendar Screenshot | iPhone Custom Calendar Screenshot |

Setup

  • Available on NuGet
    • https://www.nuget.org/packages/Xamarin.Plugin.Calendar/

Supported versions

| Platform | Version | | -------- | ------- | Xamarin.Forms | 3.3+ | | Xamarin.Android | 8.1+ | | Xamarin.iOS | ? |

Usage

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: *

Culture
CultureInfo *
Month
int *
Year
int *
Events
EventCollection (from package) * Custom colors, fonts, sizes ...

Binding events:

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

EventModel
is just an example, it can be replaced by any data model you desire.

EventsCollection
is just a wrapper over
Dictionary
exposing custom
Add
method and
this[DateTime]
indexer which internally extracts the
.Date
component of
DateTime
values and uses it as a key in this dictionary.

DayEventCollection
is just a wrapper over
List
exposing custom properties
EventIndicatorColor
and
EventIndicatorSelectedColor
for assigning a custom color to the dot.

Available color customization

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"

Available customization properties

Event indicator customizations

You can customize how will look event indication with property

EventIndicatorType
  • Available indicator are:
    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"
Calender swipe customizations

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"
Other customizations

Enable/Disable animation when calendar is loaded or refreshed Sample properties:

xml
AnimateCalendar="False"

Section templates

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.

Calendar control sections

These sections provide customization over appearance of the controls of the calendar, like showing the selected month and year, month selection controls etc.

HeaderSectionTemplate

Customize the header section (top of the calendar control). Example from AdvancedPage.xaml

xml

    

FooterSectionTemplate

Customize the footer section (under the calendar part, above the events list). Example from AdvancedPage.xaml

xml

    
        
    

BottomSectionTemplate

Customize the bottom section (at the bottom of the calendar control, below the events list). Example from AdvancedPage.xaml

xml

    

Event templates

These templates provide customization for the events list.

EventTemplate

Customize the appearance of the events section. Example from AdvancedPage.xaml

xml

    
        
    

EmptyTemplate

Customize what to show in case the selected date has no events. Example from AdvancedPage.xaml

xml

    
        
            
        
    

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.