How to customize Header?

2 posts, 1 answers
  1. Martin
    Martin avatar
    14 posts
    Member since:
    Jan 2008

    Posted 22 Jan 2015 Link to this post

    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.
  2. Answer
    Jack avatar
    2333 posts

    Posted 22 Jan 2015 Link to this post

    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.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top