Calendar

FUICalendarView control extends UIView and provides APIs to add calendar functionality in your app with minimal effort. There are five variations of FUICalendarView, as specified by the FUICalendarStyle enum-based data display and selection options.

Month

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 the 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 grayed-out font color to differentiate them from the current month dates.

The previous month dates are displayed in the 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 the 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 the developer has set a selected date using the 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 month, week, expandable and datesSelection styles) or selectDateRange: API for rangeSelection style.

Week

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 startup or after a scroll by calling the selectDate: or selectDateRange: API , after calendar init or from within the calendarView(_:didChangeVisibleDatesTo:) delegate.

Expandable

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

rangeSelection

This view displays the dates similar to the month style, but takes the entire screen space. Therefore, dates for more than one month can be displayed at a time. Also, this view allows the user to select a contiguous range of dates. isPersistentSelection is always set to true and the selected dateRange stays selected regardless of scrolling to another month. The first date selected is the startDate of the range and when a second date is selected it becomes the end date of the range, with the entire range of dates between the start and end dates (inclusive) being selected. To modify the set of selected dates, click on a selected date within the range and it becomes the new end date with all the dates later than that getting deselected. To unselect the entire range, click outside the range, anywhere in the calendar view. The end range of the range must be a later date than the start date. If the user clicks on a date earlier than the start date, then the newly selected date now becomes the start date and the original start date is deselected.

datesSelection

Similar to rangeSelection, this style takes the entire screen space. However, it differs from the rangeSelection in how the dates are selected, allowing for the selection of multiple noncontiguous dates. It also provides a swipeToSelect functionality, where swiping across the screen would select or deselect the corresponding dates at that location.

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 at startup. 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 startup 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 in-between this provided range, then the calendar shows the current date on startup, otherwise the start date is displayed on startup. 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.

Theming

FUICalendarView Theming

fdlFUICalendarView_property {}

Supported monthHeaderText properties:

font-color: Color;
font-size: Size;
font-style: UIFontTextStyle;
font-name: FontName;

FUICalendarItemView Theming

fdlFUICalendarItemView_property {}

Supported title properties:

font-color: Color;
font-size: Size;
font-style: UIFontTextStyle;
font-name: FontName;
tint-color { -disabled }: Color; // Title text color for dates that are out of current range.
tint-color { -highlighted }: Color; // Title text color for Today.
tint-color { -selected }: Color; // Title text color for selected days.

font-name { -highlighted }: FontName; // Title text for Today.
font-name { -selected }: FontName; // Title text for selected days.

Supported weekNumberText properties:

font-color: Color;
font-size: Size;
font-style: UIFontTextStyle;
font-name: FontName;

Supported selectionSingle, selectionRange properties:

background-color: Color; // Color for Views when selected.

Supported eventView properties:

background-color: Color; // The color of the eventView displayed below each date.

FUIWeekLabelView Theming

fdlFUIWeekLabelView_property {}

Supported weekDayText properties:

font-color: Color;
font-size: Size;
font-style: UIFontTextStyle;
font-name: FontName;

tint-color { -highlighted }: Color; // Title text color for Today.

// 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 startup

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

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

open class FUICalendarView : FUIBaseDrawingView, FUIAttributesProvider, FUISelectionRangeComponent, FUIEventViewComponent

The enum denoting FUICalendarStyle.

See more

public enum FUICalendarStyle

The enum denotes the starting day of the week.

See more

public enum FUIWeekStartDay

The FUIVisibleDates structure denotes the visible dates on the screen.

See more

public struct FUIVisibleDates

This protocol provides methods for handling actions based on the state of the FUICalendarView.

See more

public protocol FUICalendarViewDelegate : AnyObject

The FUICalendar style to be displayed can be specified in the controller init method. All calendar styles are supported except expandable. In the case of rangeSelectionView and datesSelectionView, no table view is displayed and the calendarView occupies the full screen. In the case of month or week styles, if the allowsStyleSwitching flag is enabled, clicking the right bar button in the navigation bar allows the calendar to switch between month and week styles.

See more

open class FUICalendarFloorplanViewController : UIViewController, FUICalendarInternalFloorplanDelegate

UICollectionViewCell subclass for FUICalendarView

Usage

// Example usage in FUICalendarViewDelegate
func  calendarView(_ calendarView: FUICalendarView, didDeselectDate date:Date, cell:FUICalendarItemCollectionViewCell ) {

   cell._innerView.eventView.isHidden = true

}

See more

public class FUICalendarItemCollectionViewCell : FUIBaseDrawingCalendarItemCollectionViewCell<FUICalendarItemView>