UI for iOS has been discontinued. Please refer to this page for more information.

Try now

Table of Contents

Calendar: View Modes

TKCalendar is able to present its contents in different ways. Those include:

• A single month.
• A single week.
• A list with years, containing months and month days.
• A list with month names.
• A list with year numbers.
• A flow layout with months and month days.
• A separate view controller to allow iOS 7 calendar style like experience.

This article describes those view modes in detail.

The presenter property of TKCalendar allows customizing settings specific for the current view mode. Every view mode has its dedicated presenter class:

TKCalendarYearPresenter *presenter = (TKCalendarYearPresenter*)self.calendarView.presenter;
presenter.columns = 3;

let presenter = self.calendarView.presenter as! TKCalendarYearPresenter
presenter.columns = 3

TKCalendarYearPresenter presenter = (TKCalendarYearPresenter)this.CalendarView.Presenter;
presenter.Columns = 3;

You can determine whether a view change occurred by implementing TKCalendarDelegate protocol:

- (void)calendar:(TKCalendar *)calendar didChangedViewModeFrom:(TKCalendarViewMode)previousViewMode to:(TKCalendarViewMode)viewMode
{
    if (viewMode == TKCalendarViewModeWeek || previousViewMode == TKCalendarViewModeWeek) {
        [self.view setNeedsLayout];
    }

    self.selectedOption = (int)viewMode;
}

    func calendar(_ calendar: TKCalendar, didChangedViewModeFrom previousViewMode: TKCalendarViewMode, to viewMode: TKCalendarViewMode) {
        if viewMode == TKCalendarViewMode.week || previousViewMode == TKCalendarViewMode.week {
            self.view.setNeedsLayout()
        }

        self.selectedOption = UInt(viewMode.rawValue);
    }
}

public override void DidChangedViewModeFrom(TKCalendar calendar, TKCalendarViewMode previousViewMode, TKCalendarViewMode viewMode)
{
    if (viewMode == TKCalendarViewMode.Week || previousViewMode == TKCalendarViewMode.Week)
    {
        this.main.View.SetNeedsLayout();
    }
}

Single month view mode

Use the TKCalendarViewModeMonth to enable the single month view:

self.calendarView.viewMode = TKCalendarViewModeMonth;

self.calendarView.viewMode = TKCalendarViewMode.month

this.CalendarView.ViewMode = TKCalendarViewMode.Month;

In this mode TKCalendar renders a single month and allows switching to a different month with a swipe gesture. This transition can be customized with different transition effects. More about this is available in this help article: Transition effects

In addition to selecting a different month with swipe, users can change the view mode to month names when the allowPinchZoom property is set to YES:

self.calendarView.allowPinchZoom = YES;

self.calendarView.allowPinchZoom = true

this.CalendarView.AllowPinchZoom = false;

Dates can be selected according to the selectionMode property. Details about selection are available in the dedicated help article about selection: Selection

Dates in this view mode are represented by the TKCalendarCell class which inherits from UIView. The visual appearance can be customized by creating custom cells and handling the calendar:viewForCellOfKind: method of TKCalendarDelegate protocol. This technique is described in Calendar customizations article.

The presenter class responsible for month view is the TKCalendarMonthPresenter class. It contains a style property where different UI settings can be tuned. For example:

Single week view mode

Set the viewMode property to TKCalendarViewModeWeek to enable this view:

self.calendarView.viewMode = TKCalendarViewModeWeek;

self.calendarView.viewMode = TKCalendarViewMode.week

this.CalendarView.ViewMode = TKCalendarViewMode.Week;

This view mode is similar to the previous one, but it displays only one week. The presenter class for this view mode is TKCalendarWeekPresenter, it inherits from TKCalendarMonthPresenter and allows the same customization and behavior features.

List with years view mode

Set the viewMode property to TKCalendarViewModeYear to enable this view:

self.calendarView.viewMode = TKCalendarViewModeYear;

self.calendarView.viewMode = TKCalendarViewMode.year

this.CalendarView.ViewMode = TKCalendarViewMode.Year;

This view mode displays a list of years with their months and dates. The user can select months by tapping on them.

The presenter class for this view mode is TKCalendarYearPresenter.

List with month names

Set the viewMode property to TKCalendarViewModeMonthNames to enable this view.

self.calendarView.viewMode = TKCalendarViewModeMonthNames;

self.calendarView.viewMode = TKCalendarViewMode.monthNames

this.CalendarView.ViewMode = TKCalendarViewMode.MonthNames;

The month names view is used together with the month view mode when the allowPinchZoom option is turned on. It allows for selecting a different month faster. Use pinch-in/out gesture to switch between single month/year numbers view mode.

The presenter class for this view mode is TKCalendarMonthNamesPresenter, it inherits from TKCalendarMonthPresenter and allows the same customization and behavior features.

List with year numbers

Set the viewMode property to TKCalendarViewModeYearNumbers to enable this view.

self.calendarView.viewMode = TKCalendarViewModeYearNumbers;

self.calendarView.viewMode = TKCalendarViewMode.yearNumbers

this.CalendarView.ViewMode = TKCalendarViewMode.YearNumbers;

The year numbers view is used together with the month view mode when the allowPinchZoom option is turned on. It allows for selecting a different year faster.

The presenter class for this view mode is TKCalendarYearNumbersPresenter, it inherits from TKCalendarMonthPresenter and allows the same customization and behavior features.

Flow layout with months and month days

Set the viewMode property to TKCalendarViewModeFlow to enable this view.

self.calendarView.viewMode = TKCalendarViewModeFlow;

self.calendarView.viewMode = TKCalendarViewMode.flow

this.CalendarView.ViewMode = TKCalendarViewMode.Flow;

The flow view displays months with single dates. Single cells are represented by the TKCalendarCell class and allow customization by handling the calendar:viewForCellOfKind method.

Only the single selection mode is available when selecting cells in flow view.

The presenter class for this view mode is TKCalendarFlowPresenter.

iOS 7 calendar style experience

The TKCalendarYearViewController class can be used to create an experience similar to the one in the built-in calendar in iOS 7. Follow these steps to add the TKCalendarYearViewController to your application:

1. Add a navigation controller
2. Use this code to show the year view controller in your application:

TKCalendarYearViewController *controller = [TKCalendarYearViewController new];
controller.contentView.minDate = [TKCalendar dateWithYear:2012 month:1 day:1 withCalendar:calendar];
controller.contentView.maxDate = [TKCalendar dateWithYear:2018 month:12 day:31 withCalendar:calendar];
[controller.contentView navigateToDate:[NSDate date] animated:NO];
[self.navigationController pushViewController:controller animated:YES];

let controller = TKCalendarYearViewController()
controller.contentView.minDate = TKCalendar.date(withYear: 2012, month: 1, day: 1, with: calendar)
controller.contentView.maxDate = TKCalendar.date(withYear: 2018, month: 12, day: 31, with: calendar)
controller.contentView.navigate(to: date, animated: false)
self.navigationController?.pushViewController(controller, animated: true)

TKCalendarYearViewController controller = new TKCalendarYearViewController ();
controller.ContentView.MinDate = TKCalendar.DateWithYear (2012, 1, 1, calendar);
controller.ContentView.MaxDate = TKCalendar.DateWithYear (2018, 12, 31, calendar);
controller.ContentView.NavigateToDate (NSDate.Now, false);
this.NavigationController.PushViewController (controller, true);

The contentView property of TKCalendarYearViewController contains the presented TKCalendar object instance. Use its properties and methods to customize the calendar.