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 rowForEach
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() | |
} | |
} | |
} |
Happy coding folks!