In general, in iPhone applications whenever we want to select the date from calendar, we populate the UIDatePicker to show the dates. This is a native iOS feature. But if you want the customized version of the calendar, we don’t have any library or framework provided by iOS. In these situations we use third party library stuff. In this tutorial we use a power full third party library for customized calendar. Open Xcode, select “Create a new Xcode project,” and click Next. Choose the Single View Application template as shown in the following figure.
Click Next, then you navigate to the next screen. Fill all the fields like product name (CalenderView), organization name and etc. In the bottom of the screen just uncheck “Use Storyboards”(As I have use the nib files in this application) and “Include Unit Tests” as shown in the following figure.
Then click Next button.
Open the ViewController.xib file and add the required outlets as shown below.
Now it is time to integrate the KAL library to the project. Kal is compiled as a static library, and the recommended way to add it to your project is to use Xcode’s “dependent project” facilities by following these step-by-step instructions: (Source: git://github.com/klazuka/Kal.git.)
1. Clone the Kal git repository: git clone git://github.com/klazuka/Kal.git. Make sure you store the repository in a permanent place because Xcode will need to reference the files every time you compile your project.
2. Locate the “Kal.xcodeproj” file under “Kal/src/”. Drag Kal.xcodeproj and drop it onto the root of your Xcode project’s “Groups and Files” sidebar. A dialog will appear — make sure “Copy items” is unchecked and “Reference Type” is “Relative to Project” before clicking “Add”.
3. Now you need to link the Kal static library to your project. Select the Kal.xcodeproj file that you just added to the sidebar. Under the “Details” table, you will see libKal.a. Check the checkbox on the far right for this file. This will tell Xcode to link against Kal when building your app.
4. Now you need to add Kal as a dependency of your project so that Xcode will compile it whenever you compile your project. Expand the “Targets” section of the sidebar and double-click your application’s target. Under the “General” tab you will see a “Direct Dependencies” section. Click the “+” button, select “Kal” and click “Add Target”.
5. Now you need to add the bundle of image resources internally used by Kal’s UI. Locate “Kal.bundle” under “Kal/src” and drag and drop it into your project. A dialog will appear — make sure “Create Folder References” is selected, “Copy items” is unchecked, and “Reference Type” is “Relative to Project” before clicking “Add”.
6. Finally, we need to tell your project where to find the Kal headers. Open your “Project Settings” and go to the “Build” tab. Look for “Header Search Paths” and double-click it. Add the relative path from your project’s directory to the “Kal/src” directory.
7. While you are in Project Settings, go to “Other Linker Flags” under the “Linker” section, and add “-all_load” to the list of flags.
8. You’re ready to go. Just #import “Kal.h” anywhere you want to use KalViewController in your project.
Now open the ViewController.h file and modify it as follows
@optional
– (void)dateSelectedAs:(KalDate *)date;
@end
@class KalViewController;
@interface ViewController : UIViewController<calnderDelegate>
@property (nonatomic, strong) IBOutlet UILabel *staticLabel;
@property (nonatomic, strong) IBOutlet UILabel *dateLabel;
@property (nonatomic, strong) KalViewController *calenderController;
– (IBAction)date:(id)sender;
@end
Connect the outlets in .xib file with associated objects. Now open ViewController.m file, add the following code in viewDidLoad method.
self.dateLabel.hidden = YES;
Now whenever we tap on the date button, we want to load the calendar view. So for that add the following action method at the end of ViewController.m file.
{
calenderController = [[KalViewController alloc]initWithSelectedDate:[NSDate date]];
calenderController.title = @"Calender";
calenderController.dateDelegate = self;
[self.navigationController pushViewController:calenderController animated:YES];
}
Now compile and run the code, after tapping on date button we will get the following screen.
If you select any date then that particular date grid will highlighted. But we need to navigate to the ViewController class after tapping on any date. And also we need the effect of selected date in ViewController class. To achieve this we will use the calenderDelegate method. So for that, implement the following delegate method at the end of ViewController.m file.
Open KalViewController.h file, import the ViewController class and add the following property at the end.
In KalViewController.m file synthesize the delegate object. Modify the didSelectDate: method as follows.
{
if(dateDelegate && [dateDelegate respondsToSelector:@selector(dateSelectedAs:)])
{
[dateDelegate dateSelectedAs:date];
}
}
Now build and run the code, after selecting any date you will observe that the controller will navigate from calendar controller to root view controller and the selected date will appear as follows.
