Custom calendar in iPhone SDK


 

How to create custom calendar view in iOS - tutorial

 

Custom Calendar in IOS SDK

Introduction

In this post i am going to tell you, how we can create a custom calendar programmatically in IOS app development(iPhone SDK) using objective C.

There are so many open source calendar libraries available on web which you can use in your app.

One day i got the requirement of integrating calendar in my app, a customized one. First, I searched through web for open calendar libraries and came across so many. But then i thought why not go for simple methods to create calendar rather then using open source libraries. In this post i will tell you, about my experience in creating calendar without using open source libraries in iOS using objective C.

Implementation of code

Creating dateFormatter using NSDateFormatter

The first thing we need to get started with custom calendar development in iOS app is creating a dateFormatter object. Beacuse dateformatter is going to be used a lot in creating custom calendar during ios app development.

Below is the method that create a datFormatter with format dd/MM/yyyy

 
    
– (NSDateFormatter *)returnDateFormatter {
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc]init];
    [dateFormatter setDateFormat:@”dd/MM/yyyy”];
    return dateFormatter;
}
 

Calculate number of days in a month

Now as our dateFormatter is set, we need to calculate number of days exists for a particular month.
We can get number of days in a month by using below method and will use NSCalendar class.
 
 
    
-(int)numberOfdaysinMonth:(int)selectedMonthNumber WithDate:(NSDate *)selectedDate
{
    NSCalendar* cal = [NSCalendar currentCalendar];
    NSDateComponents* comps = [[NSDateComponents alloc] init];
    // Set your month here
    [comps setMonth:selectedMonthNumber];
    
    NSRange range = [cal rangeOfUnit:NSCalendarUnitDay
                              inUnit:NSCalendarUnitMonth
                             forDate:selectedDate];
    NSLog(@”%lu”, (unsigned long)range.length);
    return (int)range.length;
 
}
 
 
In the above method we need to pass selected month as number like 1 for January , 2 for February etc. and current date or selected date.The above method will return us number of days in month we set as its one of parameter.
 
As we got number of days for a particular month, now we need to know starting week day of the month.

Getting first week day for the month for custom calendar in iPhone SDK

We also need to get weekDay of starting month. For this we will use NSCalendar class again. Below is the code that give us weekday. i.e 1 = Sunday. 2 = Monday and so on 
 
    
-(long)weekDayForDate:(NSDate *)date
{
    NSCalendar* cal = [NSCalendar currentCalendar];
    NSDateComponents* comp = [cal components:NSCalendarUnitWeekday fromDate:date];
    return [comp weekday];
    
}
 
 


 TIP:- To get first day of month i passed 1 as date.

Drawing out UILabels and UIButtons for custom calendar iOS

Till now, we got all our requirement to create a calendar month. We have number of days in a month, and first day name and its week day. Now we will lay down our scroll view for the month using below method
 
 
    
-(void)createButtonsAndLablesForNumberOfDays:(int)days withStartingAtDay:(int)startIndex
{
 for (UIView *v  in [calendarScroll subviews])
    {
        [v removeFromSuperview];
    }
    int xpos = 0;
    int ypos = 0;
    for (int xcount =1; xcount<=7; xcount++)
    {
        if (xcount==startIndex)
        {
            break;
        }
        xpos = xpos+46;
    }
    
    for (int i = 1; i<=days; i++)
    {
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(xpos+5, ypos-5, 46, 33)];
        label.text=[NSString stringWithFormat:@”%d”,i];
        label.font=[UIFont boldSystemFontOfSize:14.0];
        label.textColor=[UIColor colorWithRed:87/255.0 green:212/255.0 blue:218/255.0 alpha:1.0];
        [calendarScroll addSubview:label];
        
        
        UIButton *dateButton = [UIButton buttonWithType:UIButtonTypeCustom];
        dateButton.frame = CGRectMake(xpos, ypos, 46, 33);
        
        
        //compare date to place marker over current date
        NSString *actualDate = [[NSString alloc]initWithFormat:@”%d/%d/%d”,i,month,year];
        NSDate *date = [[self  returnDateFormatter] dateFromString:actualDate];
        NSString *todayDatestr= [[self returnDateFormatter] stringFromDate:[NSDate date]];
        NSDate *todayDate = [[self returnDateFormatter]dateFromString:todayDatestr];
        NSComparisonResult result = [date compare:todayDate];
        // compare date with today date to display current date
        if (result==NSOrderedSame)
        {
            [dateButton setImage:[UIImage imageNamed:@”dia_over.png”] forState:UIControlStateNormal];
            
        }
        dateButton.tag=i;
        [dateButton addTarget:self action:@selector(dateSelected:) forControlEvents:UIControlEventTouchUpInside];
        [calendarScroll addSubview:dateButton];
        xpos=xpos+46;
        startIndex=startIndex+1;
        
        if (startIndex==8)
        {
            xpos=0;
            ypos=ypos+33;
            startIndex=1;
        }
        
    }
    
 
}
 

Final comments

Below is a small chunk of code that will create a calendar month for february 2014
 
 
    int month = 2;
    int year = 2014;
    NSDate *date = [[self returnDateFormatter] dateFromString:[NSString stringWithFormat:@”1/%d/%d”,month,year]
                    ];
    int numberOfDays = [self numberOfdaysinMonth:month WithDate:date];
    int index =  [self weekDayForDate:date];
    [self createButtonsAndLablesForNumberOfDays:numberOfDays withStartingAtDay:index];
 
 
 
 
Note: ScrollView is not created programmatically and is taken as outlet in xib.
 

Where to go from here:

In this post, we learned, how to create our own custom calendar in IPhone SDK for iOS app development. Though there are number of third party libraries available which makes your life easier as a devekoper. But by creating your won custom calendar for IOS app gives you more control for any kind of flexibility you want in your app calendar.