Calendar Heatmap

Introduction

CalendarHeatmap is a calendar based heatmap which presenting a time series of data points in colors, inspired by Github contribution chart, and written in Swift.

Installation

CalendarHeatmap is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'CalendarHeatmap'

CalendarHeatmap is also availabel through Carthage, by adding it to your Cartfile:

github "Zacharysp/CalendarHeatmap"

Usage

// minimum usage.
let startDate = Date()
let calendarHeatmap = CalendarHeatmap(startDate: startDate)
calendarHeatmap.delegate = self
view.addSubview(calendarHeatmap)

// provide a range of date.
let formatter = DateFormatter()
formatter.dateFormat = "yyyy-MM-dd"
// calendar will display the whole month of the start date.
let startDate = formatter.date(from: "2019-10-18")
// the end date is the last day in the calendar
let endDate = formatter.date(from: "2020-02-14")
// default endDate is now.
let calendarHeatmap = CalendarHeatmap(startDate: startDate, endDate: endDate)

// you could custom the heatmap by using CalendarHeatmapConfig.
let config = CalendarHeatmapConfig()
let calendarHeatmap = CalendarHeatmap(config: config, startDate: Date())

CalendarHeatmapConfig details.

Config Key	Type	Default
backgroundColor	UIColor	`UIColor.white`
contentRightInset	CGFloat	60
itemColor	UIColor	`UIColor.clear`
itemSide	CGFloat	20
interitemSpacing	CGFloat	4
lineSpacing	CGFloat	4
weekDayColor	UIColor	`UIColor.black`
weekDayStrings	[String]	`DateFormatter().shortWeekdaySymbols.map{ \$0.capitalized }`
weekDayFont	UIFont	`UIFont.systemFont(ofSize: 12, weight: .medium)`
weekDayWidth	CGFloat	30
monthColor	UIColor	`UIColor.black`
monthStrings	[String]	`DateFormatter().monthSymbols`
monthFont	UIFont	`UIFont.systemFont(ofSize: 12, weight: .medium)`
monthHeight	CGFloat	20

Make your ViewController adopts CalendarHeatmapDelegate

func colorFor(dateComponents: DateComponents) -> UIColor {
    guard let year = dateComponents.year,
        let month = dateComponents.month,
        let day = dateComponents.day else { return .clear}
    // manage your color based on date here
    let yourColor = {...}
    return yourColor
}

Demo

Take a look at Example, to run the example project, clone the repo, and run pod install from the Example directory first.

Author

Zacharysp, dongjiezach@gmail.com

License

CalendarHeatmap is available under the MIT license. See the LICENSE file for more info.

leolinoj / CalendarHeatmap