How to customize Header?

[Martin]

I specifically want to capitalise the first letter of the month name, and add arrows on either side of the month name. Please see attached screenshot of what I currently have.

[Jack]

Hello Martin,

You can capitalize the month name by adopting TKCalendarDelegate protocol and implementing its calendar:updateVisualsForCell: method. Here is a sample:

- (void)calendar:(TKCalendar *)calendar updateVisualsForCell:(TKCalendarCell *)cell
{
    cell.label.text = [cell.label.text capitalizedString];
}

Do not forget to set the delegate property of TKCalendar:

self.calendarView.delegate = self;

Adding previous and next buttons is also easy, just add two buttons in the header view:

TKCalendarMonthPresenter *presenter = (TKCalendarMonthPresenter*)self.calendarView.presenter;

UIButton *prevButton = [UIButton buttonWithType:UIButtonTypeSystem];
[prevButton setTitle:@"Prev" forState:UIControlStateNormal];
[prevButton addTarget:self action:@selector(prevTouched:) forControlEvents:UIControlEventTouchUpInside];
prevButton.translatesAutoresizingMaskIntoConstraints = NO;
prevButton.frame = CGRectMake(0, 4, 50, 30);
[presenter.headerView addSubview:prevButton];

UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeSystem];
[nextButton setTitle:@"Next" forState:UIControlStateNormal];
[nextButton addTarget:self action:@selector(nextTouched:) forControlEvents:UIControlEventTouchUpInside];
nextButton.translatesAutoresizingMaskIntoConstraints = NO;
nextButton.frame = CGRectMake(0, 4, 50, 30);
[presenter.headerView addSubview:nextButton];

NSDictionary *views = @{ @"pb": prevButton, @"nb": nextButton };
[presenter.headerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-5-[pb]" options:0 metrics:nil views:views]];
[presenter.headerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[nb]-5-|" options:0 metrics:nil views:views]];

Now you should handle the tap action:

- (void)prevTouched:(id)sender
{
    [self.calendarView navigateBack:YES];
}

- (void)nextTouched:(id)sender
{
    [self.calendarView navigateForward:YES];
}

I hope this helps.

Regards,
Jack
Telerik