MBCalendarKit is a calendar control written in Objective-C with modern best practices and Swift interoperability in mind.
It offers a flexible calendar control, with support for displaying any calendar system supported by NSCalendar. It also includes an API to customize the calendar cells. It also ships with a prebuilt view controller, inspired by the original iOS calendar.
- Interactive Calendar Control
- Autolayout Support
- Dynamic Framework for iOS 8+
- Custom Cell API with Default Implementation
- Calendar Event Display
- Custom First Weekday
- Clamp Dates to Minimum and/or Maximum Values
- Display for Any Locale or Calendar Identifier
- Display Modes: Month, Week, and Day
- Localization Support, Including Right-to-Left and Date Formatting
- Pre-built View Controller inspired by the original iOS Calendar App
- Sample App With Various Demo Implementations
You'll need to target iOS 8+. There are three four ways to integrate MBCalendarKit:
- Cocoapods:
pod 'MBCalendarKit', '~> 5.0.0' - Carthage:
github MosheBerman/MBCalendarKit ~> 5.2.0 - Drag this Xcode project in to your own, and add the framework as a dependency.
- If you really want to drag the raw source in, the framework code is in
MBCalendarKit/CalendarKit.
If there are any problems, please head over to issue #48 and leave a comment.
MBCalendarKit is written in Objective-C. To use MBCalendarKit with Swift, just link against and use import MBCalendarKit. MBCalendarKit 5.0.0 includes a number of Swift enhancements.
The examples here are in Swift, for berevity. Note that when writing Objective-C, MBCalendarKit prefixes its classes and enums with CK. CalendarView in Swift is CKCalendarView in Objective-C, etc.
For specifics, check out the Migration Guide.
You have two choices for showing a calendar using MBCalendarKit.
- You can show an instance of
CKCalendarView. Use this if you want to manually manage your view hierarchy or just want a calendar view without the events table view.
/// Here's how you'd show a CalendarView from within a view controller.
/// Import the framework, then it's just three easy steps.
import MBCalendarKit
// 1. Instantiate a CKCalendarView
let calendar = CalendarView()
// 2. Present the calendar
self.view.addSubview(calendar)
// 3. Add positioning constraints:
self.calendarView.translatesAutoresizingMaskIntoConstraints = false
calendarView.topAnchor.constraint(equalTo:self.topLayoutGuide.bottomAnchor).isActive = true
calendarView.centerXAnchor.constraint(equalTo:self.view.centerXAnchor).isActive = true- Your second option is to create an instance of
CalendarViewController. Using a CKCalendarViewController gives you the added benefit of a "today" button and a segmented control in the toolbar, which allows you to select the display mode. In MBCalendarKit 5.0.0 and later, you also useCalendarViewControllerif you'd like an events table view.
/// Here's how you'd show a CalendarViewController from
/// within a view controller. It's just three easy steps, including the framework import.
// 1. Import MBCalendarKit:
import MBCalendarKit
// 2. Instantiate a CalendarViewController
let calendar = CalendarViewController()
// 3. Present the calendar
self.present(calendar animated:true completion:nil)
With both CalenderView and CalendarViewController, you can use the dataSource and delegate properties to display events, and get information about user interation.
Note: In older versions of MBCalendarKit, CKCalendarViewController used to subclass UINavigationViewController, so it couldn't be installed inside of another navigation controller. In 5.0.0, this is no longer the case. If you wish to embed your calendar inside a UINavigationViewController, you must now install it on your own. See the Migration Guide for details.
In MBCalendarKit 5.0.0, there's a new property on CalendarView called customCellProvider, which can be used to customize the display of the cells in a really powerful way. Keep reading to learn more about setting up events
The CKCalendarDataSource protocol defines a method, which supplies an array of CKCalendarEvent objects. The calendar view automatically shows an indicator in cells that represent dates that have events.
func calendarView(_ calendarView: CalendarView, eventsFor date: Date) -> [CalendarEvent]In your data source, implement this method and return the events matching the date being passed in.
Here's an example of adding a few events to the calendar:
func adEventsToCalendar() {
let title : NSString = NSLocalizedString("Add Swift Demo", comment: "") as NSString
if let date : Date = NSDate(day: 9, month: 1, year: 2015) as Date?
{
let event : CalendarEvent = CalendarEvent(title: title as String, andDate: date, andInfo: nil)
self.data[date] = [event]
}
let title2 : NSString = NSLocalizedString("Release MBCalendarKit 5.0.0", comment: "") as NSString
if let date2 : Date = NSDate(day: 15, month: 8, year: 2017) as Date?
{
let event2 : CalendarEvent = CalendarEvent(title: title2 as String, andDate: date2, andInfo: nil)
self.data[date2] = [event2]
}
}Now, implement the data source:
// MARK: - CalendarDataSource
override func calendarView(_ calendarView: CalendarView, eventsFor date: Date) -> [CalendarEvent]
{
let eventsForDate = self.data[date] ?? []
return eventsForDate
}Note: The dates used as keys must match the dates passed into the data source method exactly. One way to ensure this is to use the NSCalendar's isDate:equalToDate:toUnitGranularity:, passing in the two dates and .day as the third argument, to create the dates you pass to your events.
You can also see this code in CKDemoViewController.m or SwiftDemoViewController.swift in the demo app.
These methods, defined in the CalendarViewDelegate protocol, are called on the delegate when the used selects a date. A date is considered selected when either an arrow in the header is tapped, or when the user lifts their finger from a cell.
func calendarView(_ calendarView: CalendarView, willSelect date: Date)
func calendarView(_ calendarView: CalendarView, didSelect date: Date) This method is called on the delegate when a row is selected in the events table. You can use to push a detail view, for example.
func calendarView(_ calendarView: CalendarView, didSelect event: CalendarEvent) MBCalendarKit 5.0.0 brings a brand new way to customize cells, so that you can add your own data to the cells, or even do a completely design. By building on top of UICollectionView, MBCalendarKit provides a really simple API. First, you need to implement CustomCellProviding in your code. This is composed of two parts: First, telling MBCalendarKit which UICollectionViewCell subclass to use for the cells, and second, implementing a method callback which will be your opportunity to customize the cell based on its context.
Let's look at an implementation based on the default implementation:
// Step 1. Formally adopt the `CustomCellProviding` protocol
Class MyCustomCellProvider: NSObject, CustomCellProviding {
// Step 2. Inform the framework of your `UICollectionViewCell` subclass, so it knows to use it.
var customCellClass: AnyClass
{
return CKCalendarCell.self
}
// Step 3. Implement the custom cell delegate callback
func calendarView(_ calendarView: CalendarView, willDisplay cell: UICollectionViewCell, in context: CalendarCellContext) {
// It's reasonable to cast to whatever class is in `customCellClass`.
guard let cell = cell as? CustomCalendarCell else
{
return
}
// Customize the cell's contents and display here.
}
}Now, simply tell the calendar view that your object is providing custom cells:
// 0. Assume an existing calendarView
// 1. Instantiate your custom cell provider.
let myCustomCellProvider = MyCustomCellProviderClass()
// 2. Assign the custom cell provider to the calendar view's customCellProvider.
calendarView.customCellProvider = myCustomCellProviderThat's it. The demo app and the migration guide have more information.
Note: Prior to MBCalendarKit, customization of the cell's appearance was limited to properties accessible via UIAppearance. Those UIAppearance methods are still available in MBCalendarKit 5.0.0.
If you want to know which date the cell represents, or what scope the cell is being displayed in, look at the context object. CKCalendarCellContext has a few interesting properties:
To see the date represented by the cell, use the date property.:
var date: DateTo see if the cell represents today, is out of the month, or even out of range of the calendar's minimum and maximum dates, use the context's identifier property, which is one of several CalendarCellContextIdentifier values.
var identifier: CKCalendarCellContextIdentifierThe context identifier is based on several other flags, also available on CalendarCellContext. Check out the CocoaDocs generated documentation, or the class header for more.
CalendarEvent is a simple data structure class which holds a title, a date, and an info dictionary. The calendar view will display automatically display CalendarEvent objects as passed to it by its data sourcee. If you have custom information that you want to show in a detail view, you can attach it to the event's info property.
As of MBCalendarKit 2.1.0, there's a color property as well. Setting it will cause the cell to display a colored "tag" in the cell. This feature should be considered experimental for now.
Version 2.2.0 adds support for the firstWeekday property of NSCalendar. If the currentCalendar (or whichever you set) has some day other than Sunday set as the first day of the week, the calendar view will respect that.
/// Instantiate a CalendarViewController or CalendarView.
let calendarViewController = CKCalendarViewController()
/// Set the first day of the week to Monday.
calendarViewController.calendarView.firstWeekDay = 2
About the firstWeekDay property: Use integers 1-7 to set a weekday from Sunday through Saturday. NSCalendar doesn't say what happens if you use another number, so you're on your own if you do that.
As of MBCalendarKit 5.0.0, CalendarView has a animatesWeekTransitions property which can be turned on to enable animated transitions in week mode.
Dave DeLong, for being an invaluable reference. Thanks to the folks on the iOS Folks Slack team for guidance on nullability and input on working around floating point division precision.
Thank you to the various contributors for patches and reporting issues.
Learn more about contributing by clicking here.
MBCalendarKit adopts the Contributor Covenant Code of Conduct. Read it here.
MBCalendarKit is hereby released under the MIT License. See LICENSE for details.
If you like MBCalendarKit, check out some of my other projects:
- MBPlacePickerController, a one stop shop for all of your CoreLocation needs, including a fallback UI for offline location setup.
- MBTileParser, a cocos-2d compatible game engine written in UIKit.
- MBTimelineViewController, a scrolling timeline based on UICollectionView.
- MBMenuController, a UIActionSheet clone with some nice effects.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent