Skip to content
A calendar based heatmap which presenting a time series of data points in colors.
Swift Ruby
Branch: master
Clone or download

Latest commit

Zacharysp Feat selection (#2)
* feat: add selection on calendar grid

* fix: fix an issue that cannot scroll to end after load.

* update readme with selection on date
Latest commit 0637aaf Apr 1, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CalendarHeatmap Feat selection (#2) Apr 1, 2020
Example Feat selection (#2) Apr 1, 2020
Resources
.gitignore
.travis.yml update document Mar 6, 2020
CalendarHeatmap.podspec add code files Mar 3, 2020
LICENSE
README.md Feat selection (#2) Apr 1, 2020
_Pods.xcodeproj Initial commit Mar 3, 2020

README.md

Calendar Heatmap

CalendarHeatmap Title

CI Status Version License Platform

example

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

// color for date
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
}

// selection at date
func didSelectedAt(dateComponents: DateComponents) {
    guard let year = dateComponents.year,
    let month = dateComponents.month,
    let day = dateComponents.day else { return }
    // do something here
}

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.

You can’t perform that action at this time.