How to create a calendar in SwiftUI with Grid Layout

So I’ve been building this productivity app because well, I’m a nerd and like doing things like that. In my pursuit I had to create a calendar view like the one above so a user can see how many days they’ve consecutively accomplished some task.

In my pursuit I didn’t find any pure SwiftUI resources but did find something about the Grid Layout which allows you to lay your views out in a grid format instead of just stacking vertically, horizontally, and overlaying views (referring to VStack, HStack, and ZStack). Turns out you can create a calendar pretty easily with this grid layout. Specifically, you want to utilize LazyVGrid and pass in 7 columns (or less if you want) to represent each row and compute 31 different views with a ForEach loop. The grid will handle the wrap around for you automatically (thank you 🍎).

  • LazyVGrid creates a grid for you with a specified number of columns, for us that’s 7 as a calendar usually (in the U.S.) has 7 days per row
  • ForEach computes views based on some data and for us that’s the number of days for a particular month (here I assume 31)

The code below will render the screenshot above. Of course, you can manipulate this as you wish – it is free for the beautiful programmers of the SwiftUI community to use ^_^.

struct Calendar: View {
var cols: [GridItem] = [
GridItem(spacing: 35),
GridItem(spacing: 35),
GridItem(spacing: 35),
GridItem(spacing: 35),
GridItem(spacing: 35),
GridItem(spacing: 35),
GridItem(spacing: 35)
]
var body: some View {
VStack {
Text("December")
.font(.system(size: 30, weight: .bold))
LazyVGrid(columns: cols, spacing: 20) {
ForEach((1...31), id: \.self) { dayNum in
Text("\(dayNum)")
}
}
.frame(width: .infinity, height: 300)
.padding()
}
}
}
view raw Calendar.swift hosted with ❤ by GitHub

Happy coding folks!

Published by Paul Young-Suk Lee

SWE @lyft. Currently working on data infrastructure

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: