mjc

MJCalendar

Extremely customizable calendar component written in Swift. Supports month, 3 week, 2 week and 1 week view.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

41

Maintenance

Last Commit

5yrs ago

Contributors

3

Package

Dependencies

2

License

MIT

Categories

Readme

MJCalendar

[![CI Status](http://img.shields.io/travis/Michał Jackowski/MJCalendar.svg?style=flat)](https://travis-ci.org/Michał Jackowski/MJCalendar) Version License Platform

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Installation

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

pod "MJCalendar"

##Calendar View##

Customization

MJConfiguration class is responsible for all customizable attributes. To commit all configuration changes use method reloadView().

// Set displayed period type. Available types: Month, ThreeWeeks, TwoWeeks, OneWeek
self.calendarView.configuration.periodType = .Month

// Set shape of day view. Available types: Circle, Square
self.calendarView.configuration.dayViewType = .Circle

self.calendarView.reloadView()

Configuration

KeyTypeDefault value
periodTypeenum [.Month, .ThreeWeeks, .TwoWeeks, .OneWeek].Month
dayViewTypeenum [.Square, .Circle].Circle
startDayTypeenum [.Monday, .Sunday].Monday
selectedDayTypeenum [.Filled, .Border].Border
rowHeightCGFloat30
dayViewSizeCGSizeCGSizeMake(24,24)
dayTextFontUIFontUIFont.systemFontOfSize(12)
otherMonthBackgroundColorUIColorUIColor.clearColor()
otherMonthDayViewBackgroundColorUIColorUIColor.clearColor()
otherMonthTextColorUIColorUIColor.clearColor()
dayBackgroundColorUIColorUIColor.clearColor()
dayDayViewBackgroundColorUIColorUIColor.clearColor()
dayTextColorUIColorUIColor.clearColor()
selectedDayBackgroundColorUIColorUIColor.clearColor()
selectedDayTextColorUIColorUIColor.clearColor()
selectedBorderWidthCGFloat1
weekLabelFontUIFontUIFont.systemFontOfSize(12)
weekLabelTextColorUIColorUIColor.clearColor()
weekLabelHeightCGFloat25
minDateNSDate?nil
maxDateNSDate?nil
outOfRangeDayBackgroundColorUIColorUIColor.clearColor()
outOfRangeDayTextColorUIColorUIColor.clearColor()
selectDayOnPeriodChangeBooltrue

Delegates

Apart from setting colors in calendar configuration, it might be set in delegates methods. Returning nil means that the color from configuration will be displayed.

func calendar(calendarView: MJCalendarView, textColorForDate date: NSDate) -> UIColor? {
    return self.dayColors[date]?.textColor
}

func calendar(calendarView: MJCalendarView, backgroundForDate date: NSDate) -> UIColor? {
    return self.dayColors[date]?.backgroundColor
}

Once displayed period of time is changed either by left right swipe or by select date method, method didChangePeriod is triggered. Usage example.

func calendar(calendarView: MJCalendarView, didChangePeriod periodDate: NSDate, bySwipe: Bool) {
    // Sets month name according to presented dates
    self.setTitleWithDate(periodDate)
    
    // bySwipe diffrentiate changes made from swipes or select date method
    if bySwipe {
        // Scroll to relevant date in tableview
        self.scrollTableViewToDate(periodDate)
    }
}

When user selects date by tapping on particular day, method didSelectDate is triggered. Usage example.

func calendar(calendarView: MJCalendarView, didSelectDate date: NSDate) {
    self.scrollTableViewToDate(date)
}

Date Range

Variables minDate and maxDate from MJConfiguration are responsible for setting range of available dates. To define UI use properties: outOfRangeDayBackgroundColor, outOfRangeDayTextColor.

Public methods

To select date from code use method selectDate. Usage example.

func scrollViewDidScroll(scrollView: UIScrollView) {
    // Prevent changing selected day when non user scroll is triggered.
    if !self.isScrollingAnimation {
        // Get all visible cells from tableview
        if let visibleCells = self.tableView.indexPathsForVisibleRows {
            if let cellIndexPath = visibleCells.first {
                // Get day by indexPath
                let day = self.dateByIndex(cellIndexPath.row)
                
                //Select day according to first visible cell in tableview
                self.calendarView.selectDate(day)
            }
        }
    }
}

Period change animations

To change displayed period on runtime use method animateToPeriod. Method params:

  • periodType: available types: Month, ThreeWeeks, TwoWeeks, OneWeek. If type is same as one already displayed no animation is being performed.
  • duration: duration of animation in seconds
  • animation block: optional block to add custom animation while period is being animated Usage example.
self.calendarView.animateToPeriodType(period, duration: 0.2, animations: { (calendarHeight) -> Void in
    // In animation block you can add your own animation. To adapat UI to new calendar height you can use calendarHeight param
    self.calendarViewHeight.constant = calendarHeight
    self.view.layoutIfNeeded()
}, completion: nil)

Requirements

Xcode 7+, Swift 2.0+

Author

Michał Jackowski, mk.jackowski@gmail.com

License

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100