[iOS] Expense Tracker. Part 3 Calendar

[iOS] Project: Expense Tracker. Part 2. Google Firebase

Hey guys. This article is mainly aimed to introduce this incredible Pods — FSCalendar. I will walk through:

How to incorporate FSCalendar to your Xcode project
Date in swift
Calculate the total of a certain day

But first, let’s take a look at the demo.

How to incorporate FSCalendar to your Xcode project

GitHub - WenchaoD/FSCalendar: A fully customizable iOS calendar library, compatible with…

Here’s the github page of FSCalendar. To install it to your project, here’s the standard procedure.

1. cd + file directory in your terminal
2. pod init (if you don’t already have your pod file
3. pod ‘FSCalendar’
4. pod install
5. open .xcworkspace file and import FSCalendar to files

You can find how to use this framework on their github page. Here’s a quick tutorial. First, drag a view to your superview.

Then, go to identity inspector and subclass the view to FSCalendar. (Designables show error because I’m still using 2015 MacBook Pro, and it would scream every time I use IBDesignable.) If you don’t know what IBDesignable is, here’s a link to my older post.

[iOS]Building an app from scratch — SlapJack. Part 1

After that, select the view and press control + drag to view controller, check both dataSource and delegate. Don’t forget to set the delegate to the view controller in the controller file. Like this:

calenderView.delegate = self

Once you successfully check the dataSource of the view, your attributes inspector will show so many more pararmeters. And since this calendar is conformed to IBDesignable, you should be able to see the changes in real time storyboard without the need of running your project in your simulator.

Date in Swift

Apple Developer Documentation

Swift has its own Date type. To create one object, for example, like this.

let now = Date()

usually, it would print something like this.

However, it can be formatted into different.

let formatter = DateFormatter()

if you change dateStyle to long.

change the timeStyle to full.

change the timeStyle to short

For more information, here’s a link to a post on stack overflow.

How do you create a Swift Date object?

Calculate the total of a certain day

For this part to make sense, I recommend you take a look at my previous post on how to read data from firebase. This part takes the most of my time and is probably the most important part in this article.

[iOS] Project: Expense Tracker. Part 2. Google Firebase

As you can see from the demo .gif file, I want the user see the total expense and the expense details of the date that they choose. First step is to return the date that the user select. And there’s a function in FSCalendar that can help us.

extension CalendarViewController: FSCalendarDelegate {
   func calendar(_ calendar: FSCalendar, didSelect date: Date, at  monthPosition: FSCalendarMonthPosition) {
  }
}

Here’s the function that I wrote to read the data and calculate the total expense of a certain day, and it will also reload the table view to show the expense details.

Sorry in advance that my code has so many print, I had had a lot of trouble when I was trying to write this function, and I will explain it right away. Note that the code in the red line is where I read the data from firebase and calculate the total of that day. However, if you only write these lines, you will soon find out some things go wrong.

If you are a keen observer, you’ll find out that some days are showing data even though they have no expense record. The reason behind this is because this — .whereField(_, isEqualTo:). If you don’t have data in a specific date and you pass that date to .whereField(“date”, isEqualTo: date), the code won’t go into the .getDocuments/.addSnapshotListener closure, and hence, the data on the table view won’t be altered. To fix this, I create a bool variable called passIn to recognize whether or not the code has went into the closure. If the passIn is false, it means that the date got passed in has no data, so the total should be 0 and the table view should show no data.

Finally, I combined my loadDate function and didSelect function.

Okay, and that’s a wrap. Three down, one to go. I hope that my article can somewhat help you in some ways. For the last article of this project, I’ll dive into another cocoa pod called Charts and combine it with Firebase.