Calendar

  • FUICalendarView control extends UIView and provides APIs to add calendar functionality in your app with minimal effort. There are four variations of FUICalendarView based on how the data is displayed.

    MonthView

    FUICalendarView

    This is the default view with vertical scrolling enabled. It shows the dates for one entire month at a time, where upon a scrolling action, the previous or next month is displayed on the screen based on the scroll direction.

    The dates for the month are arranged in 7 columns (with a view above denoting the corresponding weekdays) spanning a maximum of five or six rows, based on order of the first day of the week shown in the view displayed above and the total number of days in the month.

    The first day of the week can be set to either sunday, monday or saturday while instantiating the calendar. In addition to showing the dates for the particular month, some dates from the previous month and the next month are also displayed, but appear in a greyed out font color to differentiate them from the current month dates.

    The previous month dates are displayed in beginning of the first row and the next month dates appear on the last row. For example, if the month starts on a wednesday and the weekday display view shows day of week starting from sunday, then in the very first row of the month being displayed, the previous month dates are shown from sunday to tuesday.

    If the month ends on a friday, then the remaining dates in that row (for saturday and sunday) denote the dates of the next month. Only one date can be selected at any time. The default selection behavior is that the first date of every month is automatically selected when the month is displayed.

    If the month contains today’s date, then the current date shows selected instead. When the user clicks on another date, then that date appears selected. When ‘isPersistentSelection’ is set to true, the selection behavior is different from the default selection behavior, where no date appears selected when the calendar is initially displayed (unless developer has set a selected date using selectDate: API). When the user selects a date, that date stays selected regardless of scrolling to another month. In both the isPersistentSelection and default mode, the developer can force a date to be selected at calendar startup by calling the selectDate: API for monthView, weekView and expandableView styles) or selectDateRange: API for multipleSelectionView style.

    WeekView

    FUICalendarView

    This view shows a single row of dates on the screen with 7 columns, one for each day of the week. This view incorporates horizontal scrolling, where the user can scroll left or right, displaying the set of dates for the particular week being displayed. In this mode, the previous month dates are displayed only for the very first month in the entire calendar range.

    The default selection behavior is that the first date of every month is automatically selected and if the user chooses another date, then that date appears selected. In addition, when the user scrolls, in the next set of 7 dates shown after the scroll, the date corresponding to the day of the week of the previously selected date appears automatically selected. For example, if the user selects date 22 of the month and it falls on a wednesday, then after a forward scroll, date 29 is selected since it will be the next Wednesday.

    If isPersistentSelection is set to true, then When the user selects a date, that date stays selected regardless of scrolling. In both the isPersistentSelection and default mode, the developer can force a date to be selected at calendar start up or after a scroll by calling the selectDate: or selectDateRange: API , after calendar init or from within the calendarView(_:didChangeVisibleDatesTo:) delegate.

    ExpandableView

    FUICalendarView

    FUICalendarView

    This view is a combination of monthview and week view. The user can toggle between the two modes using a handle which animates the transition between the modes.

    MultipleSelectionView

    FUICalendarView

    This view displays the dates similar the monthview, but takes the entire screen space. Hence dates for more than one month can be displayed at a time. Also, this is the only view where multiple dates can be selected at the same time. isPersistentSelection is always set to true in multiplSelectionView, the selected dateRange stays selected regardless of scrolling to another month.

    The FUICalendar can be instantiated to display in any one of the above display modes. In addition, the developer can specify the start and end dates of the entire calendar range and the displayDateAtStartup start up. If the start, end and display dates are nil, that is, the user does not supply any values for those parameters, then the calendar is instantiated with a two year range from Jan 1st of the current year to Dec 31st of the next year and the display date on start up is set to the current date.

    The user can also choose to provide only the start date, end date or display date. If the start and end dates are provided, then set up the range accordingly. If no display date is provided in this case and if the current date falls inbetween this provided range, then the calendar shows the current date on start up, else the start date is displayed on start up. If only the display date is provided, then the range is from Jan 1st of the year of the displayDate to Dec 31st of next year.

    
    // Sample view controller implementing the FUICalendarView control
    
    private let formatter:DateFormatter = {
    let dateformatter = DateFormatter()
    dateformatter.timeZone = Calendar.current.timeZone
    dateformatter.locale = Calendar.current.locale
    dateformatter.dateFormat = "yyyy MM dd"
    return dateformatter
    }()
    
    class CalendarMonthViewController: UIViewController, FUICalendarViewDelegate {
    
    var calendarView = FUICalendarView() // initializes in the default month mode and shows the current date on start up
    
    override func viewDidLoad() {
       super.viewDidLoad()
    
       self.viewRespectsSystemMinimumLayoutMargins = false
       self.view.backgroundColor = .white
       self.view.addSubview(calendarView )
       calendarView.delegate = self
    
       calendarView.translatesAutoresizingMaskIntoConstraints = false
       calendarView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0).isActive = true
       calendarView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0).isActive = true
       calendarView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: 0).isActive = true
    
       calendarView.isPersistentSelection = true
    
       let dt = formatter.date(from:"2019 01 23")
       calendarView.selectDate(dt!)
    
    
    }
    
    override func viewDidAppear(_ animated: Bool) {
       super.viewDidAppear(animated)
    }
    
    // Implement the FUICalendarViewDelegate methods
    
    // Implement this method to set the title of the controller.
    // This method is called whenever there is a change in the status, for example, upon each scroll, the title is updated to the current month being displayed. When a
    // date is selected, then the title is updated to denote the corresponding month.
    func  calendarView(_ calendarView: FUICalendarView, didChangeTitleTo title: String) {
       self.navigationItem.title = title
    }
    
    
    // Called when there is a change in the selected dates
    func  calendarView(_ calendarView: FUICalendarView, didChangeSelections selections: [FUIDateSelection]) {
    
    }
    
    // Called after a scrolling action
    func  calendarView(_ calendarView: FUICalendarView, didChangeVisibleDates visibleDates: FUIVisibleDates)
    {
    
    }
    
    // Called when a cell (displaying the date) is selected.
    func calendarView(_ calendarView: FUICalendarView, didSelectCell: FUICalendarItemCollectionViewCell, at: Date)
    {
    
    }
    
    // Called when a cell (displaying the date) is deselected.
    func calendarView(_ calendarView: FUICalendarView, didDeselectCell: FUICalendarItemCollectionViewCell, at: Date)
    {
    
    }
    
    // Called before a cell (displaying the date) is displayed.
    func calendar(_ calendarView: FUICalendarView, willDisplay cell: FUICalendarItemCollectionViewCell, forItemAt date: Date, indexPath: IndexPath) {
    
    }
    
    }
    
    

    Attention

    The delegate object with type FUICalendarViewDelegate is declared as a weak reference. On deallocation it will be automatically set to nil. To keep it alive as expected, developer should retain the delegate object during its whole execution scope.

    See more

    Declaration

    Swift

    open class FUICalendarView : FUIBaseDrawingView
  • The enum denoting FUICalendarStyle.

    See more

    Declaration

    Swift

    public enum FUICalendarStyle
  • The enum denoting FUIWeekStartDay.

    See more

    Declaration

    Swift

    public enum FUIWeekStartDay
  • The FUIVisibleDates structure denoting the visible dates on the screen.

    See more

    Declaration

    Swift

    public struct FUIVisibleDates
  • This protocol provides methods for handling actions based on the FUICalendarView State.

    See more

    Declaration

    Swift

    public protocol FUICalendarViewDelegate : AnyObject
  • The FUICalendarFloorplanViewController provides a controller with a built in tableView and an FUIcalendarView intialized in monthView style. Instantiate a controller of type FUICalendarFloorplanViewController and set the calendarView and tableView delegates to access the methods.

     // Example showing usage of FUICalendarFloorplanViewController
    
    class CalendarFloorplanTest: FUICalendarFloorplanViewController, FUICalendarViewDelegate, UITableViewDataSource , UITableViewDelegate {
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            self.calendarView.delegate = self
            self.tableView.delegate = self
    
            self.tableView.estimatedRowHeight = 60
            #if swift(>=4.2)
                self.tableView.rowHeight = UITableView.automaticDimension
            #else
                self.tableView.rowHeight = UITableViewAutomaticDimension
            #endif
    
            tableView.register(FUITimelineCell.self, forCellReuseIdentifier: FUITimelineCell.reuseIdentifier)
        }
    
        //MARK: UITableViewDataSource Methods
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return 2
        }
    
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
            let cell = self.tableView.dequeueReusableCell(withIdentifier: FUITimelineCell.reuseIdentifier, for: indexPath) as! FUITimelineCell
            cell.headlineLabel.text =  "Event Details"
            return cell
        }
    
    
        // MARK: FUICalendarViewDelegate Methods
        func  calendarView(_ calendarView: FUICalendarView, didChangeTitleTo title: String) {
            self.navigationItem.title = title
        }
    
        func  calendarView(_ calendarView: FUICalendarView,  didChangeVisibleDatesTo visibleDates: FUIVisibleDates) {
        }
    
        func calendarView(_ calendarView: FUICalendarView, didSelectDate date:Date, cell: FUICalendarItemCollectionViewCell) {
    
        }
    
        func calendarView(_ calendarView: FUICalendarView, didDeselectDate date:Date, cell: FUICalendarItemCollectionViewCell) {
    
        }
    
        func calendar(_ calendarView: FUICalendarView, willDisplay cell: FUICalendarItemCollectionViewCell, forItemAt date: Date, indexPath: IndexPath) {
    
        }
    }
    
    
    See more

    Declaration

    Swift

    open class FUICalendarFloorplanViewController : FUIBaseDrawingViewController<FUICalendarFloorplanView>
  • UICollectionViewCell subclass for FUICalendarView

    Usage

    // Example usage in FUICalendarViewDelegate
    func  calendarView(_ calendarView: FUICalendarView, didDeselectDate date:Date, cell:FUICalendarItemCollectionViewCell ) {
    
       cell._innerView.eventView.isHidden = true
    
    }
    
    

    Declaration

    Swift

    public class FUICalendarItemCollectionViewCell : FUIBaseDrawingCalendarItemCollectionViewCell<FUICalendarItemView>