{"id":13713133,"url":"https://github.com/lilcodelab/Xamarin.Plugin.Calendar","last_synced_at":"2025-05-06T23:30:43.058Z","repository":{"id":34859506,"uuid":"184479750","full_name":"lilcodelab/Xamarin.Plugin.Calendar","owner":"lilcodelab","description":"Calendar plugin for Xamarin.Forms","archived":false,"fork":false,"pushed_at":"2022-05-26T09:19:19.000Z","size":3377,"stargazers_count":258,"open_issues_count":38,"forks_count":61,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-02T11:09:58.192Z","etag":null,"topics":["calendar","calendar-component","calendar-events","calendar-plugin","calendar-view","xamarin","xamarin-forms","xamarin-plugin","xamarinforms"],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lilcodelab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-01T20:49:31.000Z","updated_at":"2025-04-15T07:15:09.000Z","dependencies_parsed_at":"2022-09-25T04:21:40.963Z","dependency_job_id":null,"html_url":"https://github.com/lilcodelab/Xamarin.Plugin.Calendar","commit_stats":null,"previous_names":["lilcodelab/xamarinforms-calendar"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilcodelab%2FXamarin.Plugin.Calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilcodelab%2FXamarin.Plugin.Calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilcodelab%2FXamarin.Plugin.Calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lilcodelab%2FXamarin.Plugin.Calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lilcodelab","download_url":"https://codeload.github.com/lilcodelab/Xamarin.Plugin.Calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252787171,"owners_count":21804211,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","calendar-component","calendar-events","calendar-plugin","calendar-view","xamarin","xamarin-forms","xamarin-plugin","xamarinforms"],"created_at":"2024-08-02T23:01:28.135Z","updated_at":"2025-05-06T23:30:40.263Z","avatar_url":"https://github.com/lilcodelab.png","language":"C#","funding_links":[],"categories":["UI"],"sub_categories":[],"readme":"## Calendar Plugin for Xamarin.Forms\n[![Build Status](https://dev.azure.com/lilcodelab/Xamarin.Plugin.Calendar/_apis/build/status/lilcodelab.Xamarin.Plugin.Calendar?branchName=master)](https://dev.azure.com/lilcodelab/Xamarin.Plugin.Calendar/_build/latest?definitionId=20\u0026branchName=master) \n[![Nuget](https://img.shields.io/nuget/v/Xamarin.Plugin.Calendar.svg?label=nuget)](https://www.nuget.org/packages/Xamarin.Plugin.Calendar/)\n[![Issues](https://img.shields.io/github/issues/lilcodelab/Xamarin.Plugin.Calendar.svg)](https://github.com/lilcodelab/Xamarin.Plugin.Calendar/issues)\n[![Chat](https://img.shields.io/badge/Telegram-chat-blue.svg)](https://t.me/XamarinPluginCalendar)\n[![License](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://github.com/lilcodelab/Xamarin.Plugin.Calendar/blob/master/LICENSE)\n\nSimple cross platform plugin for Calendar control featuring:\n- Displaying events by binding EventCollection\n- Localization support with System.Globalization.CultureInfo\n- Customizable colors, day view sizes/label styles, custom Header/Footer template support\n- UI reactive to EventCollection, Culture and other changes\n\nWe are open to any suggestions and feedback, and we got our community telegram group [here](https://t.me/XamarinPluginCalendar) :)   \n\n\n## Simple Implementation\n| Android | iPhone |\n| ------- | ------ |\n| ![Android Calendar Screenshot](https://github.com/lilcodelab/Xamarin.Plugin.Calendar/blob/master/art/android-simple.png) | ![iPhone Calendar Screenshot](https://github.com/lilcodelab/Xamarin.Plugin.Calendar/blob/master/art/iphone-simple.png) |\n\n## Advanced implementation\n| Android | iPhone |\n| ------- | ------ |\n| ![Android Custom Calendar Screenshot](https://github.com/lilcodelab/Xamarin.Plugin.Calendar/blob/master/art/android-advanced.png) | ![iPhone Custom Calendar Screenshot](https://github.com/lilcodelab/Xamarin.Plugin.Calendar/blob/master/art/iphone-advanced.png) |\n\n## Range implementation\n| Android | iPhone |\n| ------- | ------ |\n| ![Android Custom Calendar Screenshot](https://github.com/lilcodelab/Xamarin.Plugin.Calendar/blob/master/art/android-range.png) | ![iPhone Custom Calendar Screenshot](https://github.com/lilcodelab/Xamarin.Plugin.Calendar/blob/master/art/iphone-range.png) |\n\n\n### Setup\n* Available on NuGet \n  * https://www.nuget.org/packages/Xamarin.Plugin.Calendar/\n\n#### Supported versions\n| Platform | Version |\n| -------- | ------- \n| Xamarin.Forms | 4.8+ |\n| Xamarin.Android | 10.0+ |\n| Xamarin.iOS | 9.0+ |\n\n### Usage\nTo get started just install the package via Nuget into your shared and client projects.\nYou can take a look on the sample app to get started or continue reading.\n\nReference the following xmlns to your page:\n```xml\nxmlns:controls=\"clr-namespace:Xamarin.Plugin.Calendar.Controls;assembly=Xamarin.Plugin.Calendar\"\n```\n\nBasic control usage:\n```xml\n\u003ccontrols:Calendar\n        Day=\"14\"\n        Month=\"5\"\n        Year=\"2019\"\n        VerticalOptions=\"FillAndExpand\"\n        HorizontalOptions=\"FillAndExpand\"\u003e\n```\n\nBindable properties:\n* `Culture` _CultureInfo_ calender culture/language\n* `Day` _int_ currently viewing day\n* `Month` _int_ currently viewing month\n* `Year` _int_ currently viewing year\n* `Events` _EventCollection_ (from package) your events for calender\n* Custom colors, fonts, sizes ...\n\n\n__Remark: You can use `ShownDate` as an alternative to `Year`, `Month` and `Day`__\n```xml\n\u003ccontrols:Calendar\n        ShownDate=\"2019-05-14\"\n        VerticalOptions=\"FillAndExpand\"\n        HorizontalOptions=\"FillAndExpand\"\u003e\n```\n\n#### Binding events:\nIn your XAML, add the data template for events, and bind the events collection, example:\n```xml\n\u003ccontrols:Calendar\n    Events=\"{Binding Events}\"\u003e\n    \u003ccontrols:Calendar.EventTemplate\u003e\n        \u003cDataTemplate\u003e\n            \u003cStackLayout\n                Padding=\"15,0,0,0\"\u003e\n                \u003cLabel\n                    Text=\"{Binding Name}\"\n                    FontAttributes=\"Bold\"\n                    FontSize=\"Medium\" /\u003e\n                \u003cLabel\n                    Text=\"{Binding Description}\"\n                    FontSize=\"Small\"\n                    LineBreakMode=\"WordWrap\" /\u003e\n            \u003c/StackLayout\u003e\n        \u003c/DataTemplate\u003e\n    \u003c/controls:Calendar.EventTemplate\u003e\n\u003c/controls:Calendar\u003e\n```\n\nIn your ViewModel reference the following namespace:\n```csharp\nusing Xamarin.Plugin.Calendar.Models;\n```\n\nAdd property for Events:\n```csharp\npublic EventCollection Events { get; set; }\n```\n\nInitialize Events with your data:\n```csharp\nEvents = new EventCollection\n{\n    [DateTime.Now] = new List\u003cEventModel\u003e\n    {\n        new EventModel { Name = \"Cool event1\", Description = \"This is Cool event1's description!\" },\n        new EventModel { Name = \"Cool event2\", Description = \"This is Cool event2's description!\" }\n    },\n    // 5 days from today\n    [DateTime.Now.AddDays(5)] = new List\u003cEventModel\u003e\n    {\n        new EventModel { Name = \"Cool event3\", Description = \"This is Cool event3's description!\" },\n        new EventModel { Name = \"Cool event4\", Description = \"This is Cool event4's description!\" }\n    },\n    // 3 days ago\n    [DateTime.Now.AddDays(-3)] = new List\u003cEventModel\u003e\n    {\n        new EventModel { Name = \"Cool event5\", Description = \"This is Cool event5's description!\" }\n    },\n    // custom date\n    [new DateTime(2020, 3, 16))] = new List\u003cEventModel\u003e\n    {\n        new EventModel { Name = \"Cool event6\", Description = \"This is Cool event6's description!\" }\n    }\n};\n```\n\nInitialize Events with your data and a different dot color per day:\n```csharp\nEvents = new EventCollection\n{\n    //2 days ago\n    [DateTime.Now.AddDays(-2)] = new DayEventCollection\u003cEventModel\u003e( Color.Purple, Color.Purple)\n    {\n        new EventModel { Name = \"Cool event1\", Description = \"This is Cool event1's description!\" },\n        new EventModel { Name = \"Cool event2\", Description = \"This is Cool event2's description!\" }\n    },\n    // 5 days ago\n    [DateTime.Now.AddDays(-5)] = new DayEventCollection\u003cEventModel\u003e(Color.Blue, Color.Blue)\n    {\n        new EventModel { Name = \"Cool event3\", Description = \"This is Cool event3's description!\" },\n        new EventModel { Name = \"Cool event4\", Description = \"This is Cool event4's description!\" }\n    },\n};\n//4 days ago\nEvents.Add(DateTime.Now.AddDays(-4), new DayEventCollection\u003cEventModel\u003e(GenerateEvents(10, \"Cool\")) { EventIndicatorColor = Color.Green, EventIndicatorSelectedColor = Color.Green });\n```\n\nWhere `EventModel` is just an example, it can be replaced by any data model you desire.\n\n`EventsCollection` is just a wrapper over `Dictionary\u003cDateTime, ICollection\u003e` 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.\n\n`DayEventCollection` is just a wrapper over `List\u003cT\u003e` exposing custom properties `EventIndicatorColor` and `EventIndicatorSelectedColor` for assigning a custom color to the dot.\n\n#### Set up culture\n\nIn your ViewModel add property for Culture:\n```csharp\npublic CultureInfo Culture =\u003e new CultureInfo(\"hr-HR\")\n```\n\nIn XAML add Culture binding\n```xml\n\u003ccontrols:Calendar\n    Culture=\"{Binding Culture}\"\u003e\n\u003c/controls:Calendar\u003e\n```\n\n#### Available color customization\nSample properties:\n```xml\nMonthLabelColor=\"Red\"\nYearLabelColor=\"Blue\"\nEventIndicatorColor=\"Red\"\nEventIndicatorSelectedColor=\"White\"\nDaysTitleColor=\"Orange\"\nDeselectedDayTextColor=\"Blue\"\nOtherMonthDayColor=\"Gray\"\nSelectedDayTextColor=\"Cyan\"\nSelectedDayBackgroundColor=\"DarkCyan\"\nSelectedDateColor=\"Red\"\nSelectedTodayTextColor=\"Green\"\nTodayOutlineColor=\"Blue\"\nTodayFillColor=\"Silver\"\nTodayTextColor=\"Yellow\"\n```\n\n#### Available customization properties\n\n##### Calendar Layout customizations\nYou can set the layout of the calendar with property `CalendarLayout`\n\n- Available layouts are: \n\n    `OneWeek` - only one week is shown\n\n    `TwoWeeks` - two weeks are shown\n\n    `Month` - whole month is shown (default value)\n\n```xml\nCalendarLayout=\"Month\"\n```\n\nYou can also choose to display the shown week number instead of month name\n\n```xml\nCalendarLayout=\"Week\"\nWeekViewUnit=\"WeekNumber\"\n```\n\n##### Event indicator customizations\nYou can customize how will look event indication with property `EventIndicatorType`\n\n- Available indicator are: \n`BottomDot` - event indicator as dot bellow of date in calendar (default value)\n`TopDot` - event indicator as dot on top of date in calendar\n`Background` - event indicator as colored background in calendar\n`BackgroundFull` // event indicator as larger size colored background in calendar\n\n```xml\nEventIndicatorType=\"Background\"\n```\n##### Calendar swipe customizations\nYou can write your own customizations commands for swipe. \n```xml\nSwipeLeftCommand=\"{Binding SwipeLeftCommand}\"\nSwipeRightCommand=\"{Binding SwipeRightCommand}\"\nSwipeUpCommand=\"{Binding SwipeUpCommand}\"\n```\n\nYou can also disable default swipe actions.\n```xml\nSwipeToChangeMonthEnabled=\"False\"\nSwipeUpToHideEnabled=\"False\"\n```\n\n##### Selection type of calender\n\nYou can either use the `Calender` class implementation for single selection mode or `RangeSelectionCalendar` for range selection mode.\n\n```xml\n    \u003cplugin:Calendar\n        SelectedDate=\"{Binding SelectedDate}\"/\u003e\n```\nOn the `RangeSelectionCalendar` you can use binding for start date `SelectedStartDate` and end date `SelectedEndDate` or get list of selected dates with `SelectedDates`.\n```xml\n    \u003cplugin:RangeSelectionCalendar\n        x:Name=\"rangedCalendar\"\n        SelectedDates=\"{Binding SelectedDates}\"\n        SelectedEndDate=\"{Binding SelectedEndDate}\"\n        SelectedStartDate=\"{Binding SelectedStartDate}\"\u003e\n```\n__Remark: Don't use both `SelectedDates` and `SelectedStartDate`/`SelectedEndDate`__\n\n##### Other customizations\nEnable/Disable animation when calendar is loaded or refreshed\nSample properties:\n```xml\nAnimateCalendar=\"False\"\n```\n\n#### Section templates\nThere are several templates that can be used to customize the calendar. You can find an example for each one in the AdvancedPage.xaml.\nYou can create your own custom control file or you can also write customization directly inside of Templates.\n\n##### Calendar control sections\nThese sections provide customization over appearance of the controls of the calendar, like showing the selected month and year, month selection controls etc.\n\n###### HeaderSectionTemplate\nCustomize the header section (top of the calendar control). Example from AdvancedPage.xaml\n```xml\n\u003cplugin:Calendar.HeaderSectionTemplate\u003e\n    \u003ccontrols:CalendarHeader /\u003e\n\u003c/plugin:Calendar.HeaderSectionTemplate\u003e\n```\n\n###### FooterSectionTemplate\nCustomize the footer section (under the calendar part, above the events list). Example from AdvancedPage.xaml\n```xml\n\u003cplugin:Calendar.FooterSectionTemplate\u003e\n    \u003cDataTemplate\u003e\n        \u003ccontrols:CalendarFooter /\u003e\n    \u003c/DataTemplate\u003e\n\u003c/plugin:Calendar.FooterSectionTemplate\u003e\n```\n\n###### BottomSectionTemplate\nCustomize the bottom section (at the bottom of the calendar control, below the events list). Example from AdvancedPage.xaml\n```xml\n\u003cplugin:Calendar.BottomSectionTemplate\u003e\n    \u003ccontrols:CalendarBottom /\u003e\n\u003c/plugin:Calendar.BottomSectionTemplate\u003e\n```\n\n##### Event templates\nThese templates provide customization for the events list.\n\n###### EventTemplate\nCustomize the appearance of the events section. Example from AdvancedPage.xaml\n```xml\n\u003cplugin:Calendar.EventTemplate\u003e\n    \u003cDataTemplate\u003e\n        \u003ccontrols:CalenderEvent CalenderEventCommand=\"{Binding BindingContext.EventSelectedCommand, Source={x:Reference advancedCalendarPage}}\" /\u003e\n    \u003c/DataTemplate\u003e\n\u003c/plugin:Calendar.EventTemplate\u003e\n```\n\n###### EmptyTemplate\nCustomize what to show in case the selected date has no events. Example from AdvancedPage.xaml\n```xml\n\u003cplugin:Calendar.EmptyTemplate\u003e\n    \u003cDataTemplate\u003e\n        \u003cStackLayout\u003e\n            \u003cLabel Text=\"NO EVENTS FOR THE SELECTED DATE\" HorizontalTextAlignment=\"Center\" Margin=\"0,5,0,5\" /\u003e\n        \u003c/StackLayout\u003e\n    \u003c/DataTemplate\u003e\n\u003c/plugin:Calendar.EmptyTemplate\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flilcodelab%2FXamarin.Plugin.Calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flilcodelab%2FXamarin.Plugin.Calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flilcodelab%2FXamarin.Plugin.Calendar/lists"}