Building the Logic for the One-Page Calendar App: Breaking Down Sub-Components [Part 3]

G.J. den Hertog
4 min readJul 1, 2023

Update: The app has been released and can be downloaded in the App Store.

Drawn representation of the One page calendar layout
Example of the One Page Calendar drawn in Freeform

In this post, we’ll delve into the logic behind my one-page calendar app. Before designing the interface, it’s crucial to establish the functionality. By breaking down the calendar into sub-components, I can create a solid foundation for our app. Let’s explore the tables of months, week day names, and day numbers, and the structure behind them.

Table of Months

To organise the months (the blue part of the image), I’ll group them based on the first day of each month, aligned with the weekday table. For example, if July 1st, 2023 falls on a Saturday, July should appear in the last column of the month table. I’ll develop logic that generates an array, grouping the months by the weekday that marks their start.

Table of Week Day Names

This component is straightforward, displaying the names of the weekdays in a 7x7 grid (the yellow part of the image), shifting the days one position to the right on each row. I’ll handle this within a dedicated view.

Table of Day Numbers

--

--

G.J. den Hertog

Engineer by heart, currently working as Senior Principal Engineer for the albelli PhotoBox group. I specialise in serverless on AWS.