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:
- Viewing Appointments: Users can view their appointments for a specific day by tapping on a date in the calendar.
- Adding Appointments: Users can add new appointments by tapping on a date in the calendar and entering the details.
- 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:
-
Slow performance when loading large datasets.
Optimized data loading by using pagination (minus and plus one month). -
Crashes due to specific appointments.
Fixed crashes by handling edge cases in the appointment data. -
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. -
Incorrect display of calendar view
On smaller screens, the calendar view was not displayed correctly.
I use aGeometryReader
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
- Simplifying App Onboarding with OnboardingKit • 5 minutes reading time.
- Enhancing SwiftUI with CachedAsyncImage • 3 minutes reading time.
- Simplifying App Onboarding with OnboardingKit • 5 minutes reading time.
Share
Share Mastodon Twitter LinkedIn Facebook