Building Calendo

In this blog post, we'll explore the process of building Calendo, a calendar app that helps users view their schedules quickly and efficiently. We'll cover the key features of Calendo, the technologies used to develop it, and how you can get started with building your own calendar app.

The app idea "Calendo"

I really like to schedule my day, and I wanted to create a calendar app that would help me view my schedule quickly and efficiently. I wanted to create an app that would be easy to use, visually appealing, and provide a seamless experience for managing appointments and events.

Building Calendo

Creating the User Interface

I wanted to create a clean and intuitive user interface for Calendo, I wanted to prototype the app quickly and therefore I decided to use SwiftUI.

The main screen of Calendo displays a monthly calendar view with the current month and year at the top. Users can scroll through the calendar to view different months and tap on specific dates to view their appointments.

Textual representation of the view i wanted.

< August 2024 >        [action]

Wk Mon Tue Wed Thu Fri Sat Sun 
31 29  30  31  1   2   3   4
32 5   6   7   8   9   10  11
33 12  13  14  15  16  17  18
34 19  20  21  22  23  24  25
35 26  27  28  29  30  31  1
36 2   3   4   5   6   7   8
===============================
03 August 2024 - All day
Wesley's 34th Birthday

07 August 2024 - 19:00 - 23:00
Weekly Meeten en Drinken
Cafe BAX, Ten Katestraat 119.

14 August 2024 - 19:00 - 23:00
Weekly Meeten en Drinken
Cafe BAX, Ten Katestraat 119.

....

I wanted the days of the past and future to be dimmed out, and the current day to be highlighted.
I also wanted to display appointments for each day in a list below the calendar view.
A textual representation of the view i wanted for birthdays.

< Back                   ✏️
Wesley's 34th Birthday

        PHOTO  🎈
      OF CONTACT

Saturday, 3 August 2024
All day
Recurring, yearly.

 [Calendar:       Birthdays]
 [Notifications:         No]
 [Recurring:         Yearly]
 [Show as:             Free]
 [Status:       Appointment]

A textual representation of the view i wanted for appointments.

< Back                   ✏️
Weekly Meeten en Drinken

Wednesday, 7 August 2024
19:00 - 23:00
Recurring, weekly.

= MAP VIEW        MAP VIEW =
= MAP VIEW        MAP VIEW =
= +Look Around+   MAP VIEW =
= +Look Around+   MAP VIEW =
= Addres....    [NAVIGATE] =

 [Calendar:        Calendar]
 [Notifications:         No]
 [Recurring:         Weekly]
 [Show as:             Busy]
 [Status:       Appointment]

Implementing Core Features

I wanted Calendo to have the following core features:

1. Viewing Appointments: Users can view their appointments for a specific day by tapping on a date in the calendar.
2. Adding Appointments: Users can add new appointments by tapping on a date in the calendar and entering the details.
3. Editing Appointments: Users can edit existing appointments by tapping on an appointment in the list view.

I also wanted to include additional features like:

• Lookaround, a feature that provides you with a 360-degree view of the location of your appointment.
• Scroll trough your appointments and update the higlighted day in the calendar.

Problems encountered

I encountered several challenges while building Calendo, including:

1. Slow performance when loading large datasets.
   Optimized data loading by using pagination (minus and plus one month).

2. Crashes due to specific appointments.
   Fixed crashes by handling edge cases in the appointment data.

3. Slow performance when scrolling through the calendar.
   Improved snappyness by doing certain calculations on the background, and only push the update back to the @Published variable.

4. Incorrect display of calendar view
   On smaller screens, the calendar view was not displayed correctly.
   I use a GeometryReader to calculate the size of the calendar view and adjust the layout accordingly.
   But on smaller screens the text size was bigger than the available space, so i had to adjust the font size based on the available space.

Translations

Calendo is available in multiple languages.

• English with help from Jake Ruston
• Dutch (Nederlands)
• German (Deutsch)
• French (Français)
• Greek (Ελληνικά) with help from Theo Palios
• Italian (Italiano) with help from AngelK90
• Portuguese (Português)
• Spanish (Español)
• Chinese (中文)
• Arabic (العربية)

German, French, Italian, Portugese, Spanish, Chinese, Arabic are translated using Apple's Localisation framework, read more about it here (Translation framework in Swift).

Download Calendo

You can download Calendo from the AppStore!.

Technologies/Frameworks Used

• Foundation
  Foundation is the base layer of all Apple frameworks, providing basic functionality like data storage, networking, and more.

• SwiftUI
  SwiftUI is Apple's declarative framework for building user interfaces across all Apple platforms.

• Swift
  Swift is a Apple's programming language.

• EventKit
  EventKit is a framework that allows you to access and manipulate calendar events and reminders.

• EventKitUI
  EventKitUI is a framework that provides a user interface for viewing and editing calendar events and reminders.

• MapKit
  MapKit is a framework that allows you to embed Apple Maps directly into your app.

• OSLog
  OSLog is a unified logging system that provides a way to log messages from your app.

• OSLogViewer
  OSLogViewer is a tool that allows you to view and filter OSLog messages on your device.

• OnboardingKit
  OnboardingKit is a library that provides a customizable onboarding experience for your app.

• Admob_SwiftUI
  Admob_SwiftUI is a library that allows you to easily integrate Google AdMob ads into your SwiftUI app.

Read more

• SimpleNetworking • 5 minutes reading time.
• Observable Geocoder • 3 minutes reading time.
• Localizing In Xcode • 3 minutes reading time.

Share