How to make a Calendar List in swiftUI? - swift

Question

Hello guys I'm trying to make a Calendar List in swiftUI :
I want to App get the current date info and show it in index 0 of allDays list and based on the subscription , App Generate an N number of Day object after current date automatically. ie : 365 for 1 year subscription.
The final result is look like this right now it's a hard code.
Here is my code DataModel :
import SwiftUI
import Foundation
import Combine
struct Day : Identifiable {
var id = UUID()
var name : String
var date : String
var title : String
var color : Color
var month : String
var List : [Name?]
}
struct Name : Identifiable {
var id = UUID()
var name: String
var color: Color
}
class AppState : ObservableObject {
#Published var allDays : [Day] = [
Day(name: "Sunday", date: "20", title: "", color: .pink, month: "Jun", List: [
Name(id: UUID(), name: "John", color: .pink),
Name(id: UUID(), name: "Rose", color: .pink),
Name(id: UUID(), name: "Mike", color: .pink),
]),
Day(name: "Monday", date: "21", title: "", color: .yellow, month: "Jun", List: [
Name(id: UUID(), name: "Sara", color: .yellow),
Name(id: UUID(), name: "Jack",color: .yellow),
]),
Day(name: "Tuesday", date: "22", title: "", color: .blue, month: "Jun", List: [
Name(id: UUID(), name: "Rachel",color: .blue),
]),
Day(name: "Wednesday", date: "23", title: "", color: .green, month: "Jun", List: []),
Day(name: "Thursday", date: "24", title: "", color: .orange, month: "Jun", List: []),
Day(name: "Friday", date: "25", title: "", color: .purple, month: "Jun", List: []),
Day(name: "Saturday", date: "26", title: "", color: .red, month: "Jun", List: []),
]
}
and View :
import SwiftUI
struct CalendarList: View {
#EnvironmentObject var appState : AppState
var body: some View {
NavigationView {
List {
ForEach(appState.allDays.indices, id:\.self) { index in
NavigationLink(destination: Text(appState.allDays[index].name) ) {
HStack(alignment: .top) {
RoundedRectangle(cornerRadius: 23)
.frame(width: 74, height: 74)
.foregroundColor(Color.blue)
.overlay(
VStack {
Text(appState.allDays[index].date)
.font(.system(size: 35, weight: .regular))
.foregroundColor(.white)
Text(appState.allDays[index].month)
.foregroundColor(.white)
}
)
.padding(.trailing ,4)
VStack(alignment: .leading, spacing: 5) {
Text(appState.allDays[index].name)
.font(.system(size: 20, weight: .semibold))
Text(appState.allDays[index].title)
.font(.subheadline)
.foregroundColor(Color(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)))
}
}
.padding(.vertical ,6)
}
}
}
.navigationTitle("Calendar")
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct CalendarList_Previews: PreviewProvider {
static var previews: some View {
CalendarList()
}
}

Answer 1

You can generate the Day models with a couple of DateFormatter and Calendar methods:
extension Date {
func dayOfWeek(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "EEEE"
return dateFormatter.string(from: self).capitalized
}
func nameOfMonth(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "LLLL"
return dateFormatter.string(from: self).capitalized
}
}
func getDays(number: Int) -> [Day] {
let today = Date()
let formatter = DateFormatter()
return (0..<number).map { index -> Day in
let date = Calendar.current.date(byAdding: .day, value: index, to: today) ?? Date()
return Day(name: date.dayOfWeek(withFormatter: formatter) ?? "", date: "\(Calendar.current.component(.day, from: date))", month: date.nameOfMonth(withFormatter: formatter) ?? "")
}
}
Update, due to comments. Full example:
struct Day : Identifiable {
var id = UUID()
var name : String
var date : String
var title : String
var color : Color
var month : String
var List : [Name?]
}
struct Name : Identifiable {
var id = UUID()
var name: String
var color: Color
}
class AppState : ObservableObject {
#Published var allDays : [Day] = []
func generateDays(number: Int){
let today = Date()
let formatter = DateFormatter()
self.allDays = (0..<number).map { index -> Day in
let date = Calendar.current.date(byAdding: .day, value: index, to: today) ?? Date()
return Day(name: date.dayOfWeek(withFormatter: formatter) ?? "", date: "\(Calendar.current.component(.day, from: date))", title: "", color: .red, month: date.nameOfMonth(withFormatter: formatter) ?? "", List: [])
}
}
}
extension Date {
func dayOfWeek(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "EEEE"
return dateFormatter.string(from: self).capitalized
}
func nameOfMonth(withFormatter dateFormatter: DateFormatter) -> String? {
dateFormatter.dateFormat = "LLLL"
return dateFormatter.string(from: self).capitalized
}
}
struct CalendarList: View {
#EnvironmentObject var appState : AppState
var body: some View {
NavigationView {
List {
ForEach(appState.allDays.indices, id:\.self) { index in
NavigationLink(destination: Text(appState.allDays[index].name) ) {
HStack(alignment: .top) {
RoundedRectangle(cornerRadius: 23)
.frame(width: 74, height: 74)
.foregroundColor(Color.blue)
.overlay(
VStack {
Text(appState.allDays[index].date)
.font(.system(size: 35, weight: .regular))
.foregroundColor(.white)
Text(appState.allDays[index].month)
.foregroundColor(.white)
}
)
.padding(.trailing ,4)
VStack(alignment: .leading, spacing: 5) {
Text(appState.allDays[index].name)
.font(.system(size: 20, weight: .semibold))
Text(appState.allDays[index].title)
.font(.subheadline)
.foregroundColor(Color(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)))
}
}
.padding(.vertical ,6)
}
}
}
.navigationTitle("Calendar")
.onAppear {
appState.generateDays(number: 365)
}
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
This is unrelated to your issue, but I'd also personally choose to use ForEach with direct access to the Day without going through the indices:
ForEach(appState.allDays, id:\.id) { day in
NavigationLink(destination: Text(day.name) ) {
HStack(alignment: .top) {
RoundedRectangle(cornerRadius: 23)
.frame(width: 74, height: 74)
.foregroundColor(Color.blue)
.overlay(
VStack {
Text(day.date)
.font(.system(size: 35, weight: .regular))
.foregroundColor(.white)
Text(day.month)
.foregroundColor(.white)
}
)
.padding(.trailing ,4)
VStack(alignment: .leading, spacing: 5) {
Text(day.name)
.font(.system(size: 20, weight: .semibold))
Text(day.title)
.font(.subheadline)
.foregroundColor(Color(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)))
}
}
.padding(.vertical ,6)
}
}