Calendar month: drag-to-collapse + full-column selection highlight
Some checks failed
CI / build-and-test (push) Has been cancelled

Two refinements to get closer to the TickTick reference:
- Drag up on the calendar collapses to the selected week; drag down expands
  to the full month (horizontal swipe still changes month). One direction-
  aware DragGesture handles both axes.
- The selected day now gets a rounded full-column highlight behind its
  number + bars when collapsed (as in the tapped-day screenshot), instead
  of only the day circle.

(Not build-verified — sim runtime removed to reclaim disk.)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
kutesir
2026-07-07 00:19:38 +03:00
parent 2ec3278632
commit bd43eecfbe

View File

@@ -593,7 +593,8 @@ struct CalendarView: View {
isCurrentMonth: cal.isDate(date, equalTo: displayMonth, toGranularity: .month),
isToday: cal.isDateInToday(date),
isSelected: cal.isDate(date, inSameDayAs: selectedDate),
bars: eventDots(for: date)
bars: eventDots(for: date),
highlightColumn: !monthExpanded && cal.isDate(date, inSameDayAs: selectedDate)
)
.onTapGesture {
withAnimation(KisaniSpring.snappy) {
@@ -606,9 +607,19 @@ struct CalendarView: View {
}
}
.padding(.horizontal, 16)
.gesture(DragGesture(minimumDistance: 40).onEnded { v in
if v.translation.width < -40 { navigateMonth(1) }
else if v.translation.width > 40 { navigateMonth(-1) }
.gesture(DragGesture(minimumDistance: 30).onEnded { v in
let dx = v.translation.width, dy = v.translation.height
if abs(dx) > abs(dy) {
// Horizontal swipe previous/next month
if dx < -40 { navigateMonth(1) }
else if dx > 40 { navigateMonth(-1) }
} else {
// Vertical drag collapse to week (up) / expand to month (down)
withAnimation(KisaniSpring.snappy) {
if dy < -30 { monthExpanded = false }
else if dy > 30 { monthExpanded = true }
}
}
})
// Grabber expand back to the full month, or collapse to the week.
@@ -1656,6 +1667,7 @@ struct AddCalendarHolidaysView: View {
struct DayCell: View {
@Environment(\.colorScheme) private var cs
let date: Date; let isCurrentMonth: Bool; let isToday: Bool; let isSelected: Bool; let bars: [Color]
var highlightColumn: Bool = false
private let cal = Calendar.current
var dayNum: String { "\(cal.component(.day, from: date))" }
/// Locale week-of-year (NOT ISO), intentionally matching the locale-driven grid
@@ -1692,7 +1704,12 @@ struct DayCell: View {
.padding(.horizontal, 3)
Spacer(minLength: 0)
}
.padding(.top, 4)
.frame(maxWidth: .infinity).frame(height: 54).contentShape(Rectangle())
.background(
RoundedRectangle(cornerRadius: 10)
.fill(highlightColumn ? AppColors.text3(cs).opacity(0.12) : .clear)
)
}
}