Swift Calendar & Date Picker Tutorial. How to do it?

The Swift Callendar Tutorial

Collection View has two default scrolling values: horizontal and vertical. I’ll show you how to make a 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 UICollectionViewDelegate and UICollectionViewDataSource protocols. Outlets for our Collection View (calendarCollectionView) and default Label (dateLabel) are also needed.

Now, let’s set variables for default current date and array where we’ll keep our objects:

Variable 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, CalendarDelgate.

Next, in 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 cellForItemAt.

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 selectedDateLabel in 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 Table View.

I hope this little tutorial will help you :) If you have any questions or you’ve found bugs in my code - please, give feedback.

Also, if you like this post how about checking my other articles where I'm explaining how to group values by the Core Data attribute or revealing some unusual ways to learn Swift programming

BTW the whole project is available to download on GitHub :)