How to create a calendar like this

Question

I want to create a week based calendar, it should show the days in UITableView as a list. Below is image i have posted to clear the required output. Have gone through google a lot, but doesn't got any solution. . Have gone throgh many calendars KAl, Tapku and also Mukhu but not got any solution for it. Please guide.

Answer 1

Dude try this for week and day view

https://github.com/muhku/calendar-ui ?

week or day view might get you started with or if you wan to start afresh fetch events from the ios EventStore and make a datasource that feeds data to your table. Mostly all calendar components do that, you can even take that from the above component.

Use these methods to make dates:

#define DATE_COMPONENTS (NSYearCalendarUnit| NSMonthCalendarUnit | NSDayCalendarUnit | NSWeekCalendarUnit |  NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit | NSWeekdayCalendarUnit | NSWeekdayOrdinalCalendarUnit)

#define CURRENT_CALENDAR [NSCalendar currentCalendar]

+ (NSDate *)nextDayFromDate:(NSDate *)date {
    NSDateComponents *components = [CURRENT_CALENDAR components:DATE_COMPONENTS fromDate:date];
    [components setDay:[components day] + 1];
    [components setHour:0];
    [components setMinute:0];
    [components setSecond:0];
    return [CURRENT_CALENDAR dateFromComponents:components];
}

+ (NSDate *)previousDayFromDate:(NSDate *)date {
    NSDateComponents *components = [CURRENT_CALENDAR components:DATE_COMPONENTS fromDate:date];
    [components setDay:[components day] - 1];
    [components setHour:0];
    [components setMinute:0];
    [components setSecond:0];
    return [CURRENT_CALENDAR dateFromComponents:components];
}

Organise dates into a week - group those dates to form a week. Take day of week by day number using this method:

+ (NSString *)dayNameForWeekDay:(int)weekday
{
    switch (weekday) {
        case 1:
            return @"Sunday";
            break;
        case 2:
            return @"Monday";
            break;
        case 3:
            return @"Tuesday";
            break;
        case 4:
            return @"Wednesday";
            break;
        case 5:
            return @"Thursday";
            break;
        case 6:
            return @"Friday";
            break;
        case 7:
            return @"Saturday";
            break;
        default:
            break;
    }

    return @"";
}

And using the datasource show the events. Customizing your table is not a big deal, expanding collapsing is so simple.

Answer 2

I roughed out something using a tableview. The basic behavior you are looking for is to add rows when a date is selected (and hide those previously selected). I did a tableView with a section for each day, and added events below it.

I added a TableView from a xib, but should have done it in code for this setup.

//
//  TCViewController.m
//  TableCalendarTest
//
//  Created by Brian Broom on 6/18/13.
//  Copyright (c) 2013 Brian Broom. All rights reserved.
//

    #import "TCViewController.h"

    @interface TCViewController ()
    {
        int selectedSection;
    }
    @end

    @implementation TCViewController

    - (void)viewDidLoad
    {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.


    }

    - (void)didReceiveMemoryWarning
    {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }

    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
    {
        return 3;
    }

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        if (section == selectedSection) {
            return 3;
        } else {
            return 1;
        }
    }

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        if (indexPath.row == 0) {

            [tableView beginUpdates];
            [self.tableView deselectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:selectedSection] animated:YES];
            NSMutableArray *oldRows = [[NSMutableArray alloc] init];

            [oldRows addObject:[NSIndexPath indexPathForRow:1 inSection:selectedSection]];
            [oldRows addObject:[NSIndexPath indexPathForRow:2 inSection:selectedSection]];

            selectedSection = indexPath.section;

            [tableView deleteRowsAtIndexPaths:oldRows withRowAnimation:UITableViewRowAnimationTop];


            NSMutableArray *newRows = [[NSMutableArray alloc] init];

            [newRows addObject:[NSIndexPath indexPathForRow:1 inSection:selectedSection]];
            [newRows addObject:[NSIndexPath indexPathForRow:2 inSection:selectedSection]];

            [tableView insertRowsAtIndexPaths:newRows withRowAnimation:UITableViewRowAnimationBottom];
            [tableView endUpdates];
        }
    }

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *CellIdentifier = @"Cell";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        }

        if (indexPath.row == 0) {
            [cell.textLabel setText:[NSString stringWithFormat:@"Day"]];
        } else {
            [cell.textLabel setText:[NSString stringWithFormat:@"Event %d", indexPath.row]];
        }


        return cell;
    }

    @end

The tricky part is getting the date information, and the customization.