Date-range-presets with SwiftUI's new MultiDatePicker - ios

Question

Using iOS16.3, XCode14.2, Swift5.7.2,
I try to create a nice looking Date-Picker where you can tap on a starting date and then tap on an ending date. And the entire date-range shall be highlighted.
Since this does not seem to exist even with the new MultiDatePicker under iOS16 and SwiftUI, I wonder if there is a good library out there to fulfill that task.
Moreover, I would like to add presets of DateRanges, such as this week, last week, this month, last month etc.
Here is what I tried in Code to achieve the week preset (see code below).
The problem is that once the user taps into the dates, then the preset-button no longer works.
Any idea how to achieve all this ?
import SwiftUI
struct CalendarView: View {
#Environment(\.calendar) var calendar
#Environment(\.timeZone) var timeZone
var bounds: Range<Date> {
let start = calendar.date(from: DateComponents(
timeZone: timeZone, year: 2022, month: 6, day: 1))!
let end = calendar.date(from: DateComponents(
timeZone: timeZone, year: 2023, month: 6, day: 30))!
return start ..< end
}
#State var dates: Set<DateComponents> = []
var body: some View {
VStack {
MultiDatePicker("Dates Available", selection: $dates, in: bounds)
HStack {
Button {
dates = []
let calendar = Calendar.current
let startDateComponents = DateComponents(year: 2023, month: 1, day: 15)
let endDateComponents = DateComponents(year: 2023, month: 2, day: 10)
let startDate = calendar.date(from: startDateComponents)!
let endDate = calendar.date(from: endDateComponents)!
var currentDate = startDate
while currentDate <= endDate {
dates.insert(calendar.dateComponents([.year, .month, .day], from: currentDate))
currentDate = calendar.date(byAdding: .day, value: 1, to: currentDate)!
}
} label: {
Text("week")
}
}
Spacer()
.frame(height: 100)
}
}
}

Answer 1

#workingdog:
Here is the screenshot when trying to add RKCalendar with SPM:
Ah and by the way: as an improvement, I suggest the following small changes to your horizontalView.
If you are using isContinuous = false and isVertical = false then I suggest the following replacements:
replace:
ScrollView(.horizontal) by ScrollView(.horizontal, showsIndicators: false)
and 2. replace:
HStack by HStack(alignment: .center, spacing: 0)
This makes the PageView fit into the center (and is not off by some strange offset once you swipe).
public var horizontalView: some View {
GeometryReader { geometry in
// change-suggestions here.....
ScrollView(.horizontal, showsIndicators: false) {
// and change-suggestions here.....
HStack(alignment: .center, spacing: 0) {
ForEach(pages) { page in
page.frame(width: geometry.size.width, height: geometry.size.height)
}
}
}
.content.offset(x: isGestureActive ? offset : -geometry.size.width * CGFloat(index))
.frame(width: geometry.size.width, height: nil, alignment: .leading)
.simultaneousGesture(DragGesture()
.onChanged({ value in
isGestureActive = true
offset = value.translation.width - geometry.size.width * CGFloat(index)
})
.onEnded({ value in
if abs(value.predictedEndTranslation.width) >= geometry.size.width / 2 {
var nextIndex: Int = (value.predictedEndTranslation.width < 0) ? 1 : -1
nextIndex += index
index = nextIndex.keepIndexInRange(min: 0, max: pages.endIndex - 1)
}
withAnimation { offset = -geometry.size.width * CGFloat(index) }
DispatchQueue.main.async { self.isGestureActive = false }
})
)
}.onAppear(perform: { index = todayIndex() })
}