In this post I’d like to show you how to make a very simple calendar picker - using class
UICollectionView. Why? Sometimes default
UIDatePicker isn’t sufficient enough. For example, when you need horizontal date picker or when there is no place for the standard date picker. OK, let’s see how to do it.
Collection View has two default scrolling values: horizontal and vertical. I’ll show you how to make horizontal calendar picker, but there are no limits in modifying it. Also, we can create not only a calendar picker (with days, weeks, months) but be more detailed and play with hours & minutes or everything that you want. It’s very easy to create an array with values that suits you best.
After creating a simple view controller in our new project, you should go to your Storyboard and add
UICollectionView controller. Don’t forget to set delegate and
dataSource outlets. In your
View Controller declare
UICollectionViewDataSource protocols. Outlets for our
Collection View (
default Label (
dateLabel) are also needed.
Now, let’s set variables for default current date and array where we’ll keep our objects:
currentDate obviously keeps a current day, so it can set our initial value. But we’ll need some function to set values from Collection View. Let’s declare it in separate file -
CalendarModel. Our function will look like this:
A few words of comment: I’ve decided that I want to have two weeks in my calendar picker. This is why the
numberOfDays is set for 14. Our function will produce an array with 14 days with format “day name, day number, month number”. But first, we need to delegate our class - using, for example,
ViewController we create func that will get
arrayOfDates and transform it to array of Ints (
getCalendar). Now, it’s very easy to put our array into
Collection View using default func
Now we should add label into
Collection View and create
UICollectionViewCell for this purpose. When it’s done, just add the code that produces
arrayOfDates in correct place:
After pinning dateLabel to
Collection View Cell we can add func that will help us to see what date is selected on tap:
After this we’ll need to pass selected date to
ViewController. This is quite easy. In
didSelectItemAt func we just assign selected date to label:
We can also set selected date in center of the view:
Now, after selection, a cell with a date will not only be highlighted, but also put in the center of the view. As you can notice, when launched, the first selected date is today date.
This is almost the end. At least I’d like to show you, how to select a date by swiping our picker. Before we had just one way to pick the date - tap on in with finger. But what if we want to select date by swiping gesture? Let’s say that we want to pick the date from the cell, that will stop in the center of the view.
For this we’ll need three simple functions:
The first one will help us know, if our calendar picker wa run from scroll view. If so, then function
setSelectedItemFromScrollView is fired.
As you can see, we need to get the center position to set the picked date. Then pass data (
selectedDate) to set the picker. At last we need to know, that swiping gesture did end:
So, when a swiping gesture ends, picker gets the latest cell and set it as selected. Of course we can get the selected date (as String or Int) and use it for different purpose.
Collection View can be also easily put into
I hope this little tutorial will help you :) If you have any questions or you’ve found bugs in my code - please, give feedback.
BTW the whole project is available to download on GitHub :)