Monday 18 November 2013

KAL Calendar - how to use

Source code:
storyboard version
xib version

In this article, I like to add a few more explanation to the following article.
http://www.edumobile.org/iphone/iphone-programming-tutorials/custom-calender-view-in-iphone/

The above link is a great article, but it was missing a few critical points and some screen shots.
The above link will  be referred as 'Edu URL' for the rest.
My environment is XCode 5.1 but using the Simulator IPhone->iOS6.1


Firstly download the KAL source code.
https://github.com/klazuka/Kal

Drag and drop whole src folder from Finder  into your Xcode project.


Build and run. I chose iOS6.1 as simulator.
(when iOS 6 SDK doesn't show:





We need to implement protocol in src/KalViewController.h
I think the Edu URL is incorrect about this one. It's not your viewcontroller. Protocol should be implemented from KalViewController.h.







Open your controller, ViewController.h.
As Edu url, declare three properties.
Note that, in the source code below, you imported "KalViewController.h" to use <calendarDelegate>



Open story board. As Edu URL, make one button and two labels.
Connect each control.

Build and run. You must have ARC error.
Find 'auto' in Build setting and disable ARC check.





Build and run. Your button should be working and returning error (we didn't implement function yet)
Go to ViewController.m. Implement date().


Build and run. At this stage, it doesn't make compile error but it doesn't show KAL view either.
It's because we haven't done NavigationControl. 

Open Main.storyboard.
Add NavigationControl.
The video without sound may help how to add NavigationControl in story board.

So, now, when you click 'Get Date' button, it opens calendar view.



Then we want to dismiss the calenar view when you select the date.
Open ViewController.m and implement delegate function dateSelectedAs().

Now when you click a date, it calls
KalViewController.m -> didSelectDate()
then it calls delegate function,
ViewController.m -> (void) dateSelectedAs()
and it dismisses the Calendarview.


Note that KalViewController.m didSelectDate() is called whenever the calendar view is called. NSLog shows that the function is called when the first date is showing and today's date is showing. 

So, in KalViewController.m, I added int variable, calCount. This int was used to call delegate function only when use clicks the date from calendar view. (1st and 2nd call of the function ignored).



Build and run. You will see the screen shots below.










1 comment:

  1. Hi Matthew! Thanks a lot for this post. It is fantastic! I followed all you've said and everything worked as a charm. Except one little thing. When showing the Calendar, this is showing behind the Toolbar of the Navigation Controller. I am using Xcode 6 and iOS 8. Do you happen to know why this is happening? Thanks again!

    ReplyDelete