All Projects → lilcodelab → Xamarin.plugin.calendar

lilcodelab / Xamarin.plugin.calendar

Licence: mit
Calendar plugin for Xamarin.Forms

Projects that are alternatives of or similar to Xamarin.plugin.calendar

GCCalendar
A customizable calendar view for iOS 9+ written in Swift.
Stars: ✭ 53 (-66.67%)
Mutual labels:  calendar, calendar-component, calendar-view
Customizablecalendar
CustomizableCalendar is a library that allows you to create your calendar, customizing UI and behaviour
Stars: ✭ 214 (+34.59%)
Mutual labels:  calendar, calendar-view, calendar-component
Calendar Ios
Calendar View
Stars: ✭ 154 (-3.14%)
Mutual labels:  calendar, calendar-view, calendar-component
Yycalendar
Simple and Clear Calendar
Stars: ✭ 46 (-71.07%)
Mutual labels:  calendar, calendar-view, calendar-component
Calendarview
An Easy to Use Calendar for iOS (Swift 5.0)
Stars: ✭ 429 (+169.81%)
Mutual labels:  calendar, calendar-view, calendar-component
Primedatepicker
PrimeDatePicker is a tool that provides picking a single day, multiple days, and a range of days.
Stars: ✭ 292 (+83.65%)
Mutual labels:  calendar, calendar-view, calendar-component
Eventscalendar
Events Calendar is a user-friendly library that helps you achieve a cool Calendar UI with events mapping. You can customise every pixel of the calendar as per your wish and still achieve in implementing all the functionalities of the native android calendar in addition with adding dots to the calendar which represents the presence of an event on the respective dates. It can be done easily, you are just a few steps away from implementing your own badass looking Calendar for your very own project!
Stars: ✭ 188 (+18.24%)
Mutual labels:  calendar, calendar-view, calendar-component
Cvcalendar
A custom visual calendar for iOS 8+ written in Swift (>= 4.0).
Stars: ✭ 3,435 (+2060.38%)
Mutual labels:  calendar, calendar-view, calendar-component
Calendarview
Android上一个优雅、万能自定义UI、仿iOS、支持垂直、水平方向切换、支持周视图、自定义周起始、性能高效的日历控件,支持热插拔实现的UI定制!支持标记、自定义颜色、农历、自定义月视图各种显示模式等。Canvas绘制,速度快、占用内存低,你真的想不到日历居然还可以如此优雅!An elegant, highly customized and high-performance Calendar Widget on Android.
Stars: ✭ 7,998 (+4930.19%)
Mutual labels:  calendar, calendar-view, calendar-component
Recyclercalendarandroid
A simple DIY library to generate your own custom Calendar View using RecyclerView, written in Kotlin
Stars: ✭ 83 (-47.8%)
Mutual labels:  calendar, calendar-view, calendar-component
Graphicscontrols
Experimental GraphicsControls - Build drawn controls (Cupertino, Fluent and Material)
Stars: ✭ 149 (-6.29%)
Mutual labels:  xamarin, xamarin-forms
Htmllabelplugin
Use this Xamarin.Forms plugin to display HTML content into a label.
Stars: ✭ 119 (-25.16%)
Mutual labels:  xamarin, xamarin-forms
Xdtoxf
Adobe XD Plugin to export assets to Xamarin.Forms XAML Styles and Resources
Stars: ✭ 118 (-25.79%)
Mutual labels:  xamarin, xamarin-forms
Xamarin Forms Perf Playground
Xamarin.Forms Performance Playground (Layouts, Bindings, XAMLC, etc)
Stars: ✭ 119 (-25.16%)
Mutual labels:  xamarin, xamarin-forms
Crossplatformdisktest
Windows, macOS and Android storage (HDD, SSD, RAM) speed testing/performance benchmarking app
Stars: ✭ 123 (-22.64%)
Mutual labels:  xamarin, xamarin-forms
Plugin.localnotification
The local notification plugin provides a way to show local notifications from Xamarin Forms apps .
Stars: ✭ 124 (-22.01%)
Mutual labels:  xamarin, xamarin-forms
Xamarin.forms.breadcrumb
This is a breadcrumb navigation control that is complete automatic and uses the Navigation stack and page titles to generate the breadcrumbs.
Stars: ✭ 130 (-18.24%)
Mutual labels:  xamarin, xamarin-forms
Simpleauth
The Simplest way to Authenticate and make Rest API calls in .Net
Stars: ✭ 148 (-6.92%)
Mutual labels:  xamarin, xamarin-forms
Awesome Fabulous
A hand-curated list of awesome resources when using Fabulous 📱
Stars: ✭ 117 (-26.42%)
Mutual labels:  xamarin, xamarin-forms
Arcgis Toolkit Dotnet
Toolkit for ArcGIS Runtime SDK for .NET
Stars: ✭ 125 (-21.38%)
Mutual labels:  xamarin, xamarin-forms

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

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:

xmlns:controls="clr-namespace:Xamarin.Plugin.Calendar.Controls;assembly=Xamarin.Plugin.Calendar"

Basic control usage:

<controls:Calendar
        Month="5"
        Year="2019"
        VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand">

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:

<controls:Calendar
        Events="{Binding Events}">
    <controls:Calendar.EventTemplate>
        <DataTemplate>
            <StackLayout
                Padding="15,0,0,0">
                <Label
                    Text="{Binding Name}"
                    FontAttributes="Bold"
                    FontSize="Medium" />
                <Label
                    Text="{Binding Description}"
                    FontSize="Small"
                    LineBreakMode="WordWrap" />
            </StackLayout>
        </DataTemplate>
    </controls:Calendar.EventTemplate>
</controls:Calendar>

In your ViewModel reference the following namespace:

using Xamarin.Plugin.Calendar.Models;

Add property for Events:

public EventCollection Events { get; set; }

Initialize Events with your data:

Events = new EventCollection
{
    [DateTime.Now] = new List<EventModel>
    {
        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<EventModel>
    {
        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<EventModel>
    {
        new EventModel { Name = "Cool event5", Description = "This is Cool event5's description!" }
    },
    // custom date
    [new DateTime(2020, 3, 16))] = new List<EventModel>
    {
        new EventModel { Name = "Cool event6", Description = "This is Cool event6's description!" }
    }
};

Initialize Events with your data and a different dot color per day:

Events = new EventCollection
{
    //2 days ago
    [DateTime.Now.AddDays(-2)] = new DayEventCollection<EventModel>( 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<EventModel>(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<EventModel>(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<DateTime, ICollection> 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<T> exposing custom properties EventIndicatorColor and EventIndicatorSelectedColor for assigning a custom color to the dot.

Available color customization

Sample properties:

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.

SwipeLeftCommand="{Binding SwipeLeftCommand}"
SwipeRightCommand="{Binding SwipeRightCommand}"
SwipeUpCommand="{Binding SwipeUpCommand}"

You can also disable default swipe actions.

SwipeToChangeMonthEnabled="False"
SwipeUpToHideEnabled="False"
Other customizations

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

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

<plugin:Calendar.HeaderSectionTemplate>
    <controls:CalendarHeader />
</plugin:Calendar.HeaderSectionTemplate>
FooterSectionTemplate

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

<plugin:Calendar.FooterSectionTemplate>
    <DataTemplate>
        <controls:CalendarFooter />
    </DataTemplate>
</plugin:Calendar.FooterSectionTemplate>
BottomSectionTemplate

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

<plugin:Calendar.BottomSectionTemplate>
    <controls:CalendarBottom />
</plugin:Calendar.BottomSectionTemplate>
Event templates

These templates provide customization for the events list.

EventTemplate

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

<plugin:Calendar.EventTemplate>
    <DataTemplate>
        <controls:CalenderEvent CalenderEventCommand="{Binding BindingContext.EventSelectedCommand, Source={x:Reference advancedCalendarPage}}" />
    </DataTemplate>
</plugin:Calendar.EventTemplate>
EmptyTemplate

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

<plugin:Calendar.EmptyTemplate>
    <DataTemplate>
        <StackLayout>
            <Label Text="NO EVENTS FOR THE SELECTED DATE" HorizontalTextAlignment="Center" Margin="0,5,0,5" />
        </StackLayout>
    </DataTemplate>
</plugin:Calendar.EmptyTemplate>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].