Reproduce the apple macos calendar scroll layout

I am trying to recreate the apple calendar in swiftui but I have issues creating scroll layout. So I want to have:

  • When I scroll horizontally the hours on the side have to stay fixed but the header with the day number day String and the full day events have to scroll
  • When I scroll vertically the hours on the side have to move but the header don't

For the moment I have :

HStack(alignment: .top, spacing:0) {
// The hours on the side
    LateralHours(height: geometry.size.height * 24/10) . offset(y: -offset)
    ScrollViewReader { proxy in
        ScrollView (.horizontal, showsIndicators: false) {
                VStack {
// The day number and the full day events 
                    Header(width: width)
                    ScrollView {
                            LazyHStack (spacing: 0) {
                                ForEach($loadedDays, id: \.self) { day in
// The day grid with the events
                                    DayContentView(
                                        cellHeight: geometry.size.height / 10,
                                        width: width,
                                        selectedEvent: $selectedEvent,
                                        day: day,
                                        store: $store,
                                        modifiedEvent: $modifiedEvent
                                    )
                                }
                            }
                        .frame(height: 24*geometry.size.height / 10)
// This code block is used to track the position of the scrollview position
                        .background( GeometryReader {
                            Color.clear.preference(key: ScrollOffsetPreferenceKey.self,
                                                   value: -$0.frame(in: .named("scroll")).origin.y)
                        })
                        .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
                            offset = value
                        }
                    }
                    .coordinateSpace(name: "scroll")
                }
            }
            .scrollTargetBehavior(.viewAligned)
            .defaultScrollAnchor(.leading)
        }
        .scrollPosition(id: $position)
        .frame(alignment: .topLeading)
    }

So the hours on the side are in none of the scrollViews they are only modified through the .offset with the vertical scrollView position. My problem is that the .offset seems to be kind of slow and my app is slowed down is there a better modifed than .offset or do you know a more efficient way to do this ?

@RafaelSM1 Could you clarify what you're trying to achieve? and are you trying to move LateralHours by a specific distance ?

Reproduce the apple macos calendar scroll layout
 
 
Q