Reproduce the apple macos calendar scroll layout

Question

RafaelSM1 OP

Created Jul ’24

Replies 3

Boosts 0

Participants 2

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 ?

Boost

Answer 1

DTS Engineer OP

Apple

Jul ’24

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

0

Answer 2

RafaelSM1 OP

Jul ’24

Ok So I want to create the horizontal scroll and vertical scroll like this:

https://youtu.be/8VciE9Qxe9k

To create that I put the header with the day number and the content of each day in a horizontal scroll view and the coontent of the days in a vertical scroll View like this:

The problem with that layout is that the lateralhours on the side have to move to. So what I do is I track the position of the vertical scroll view using:

                        .background( GeometryReader {
                            Color.clear.preference(key: ScrollOffsetPreferenceKey.self,
                                                   value: -$0.frame(in: .named("scroll")).origin.y)
                        })
                        .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
                            offset = value
                        }

And with that position I use .offset to "scroll" the lateralhours. It works but it's laggy and it's slowing down my app I wanted to know if someone had an other solution maybe a better way than using .offset

0

Answer 3

RafaelSM1 OP

Aug ’24

Anyone knows how to implement this scroll layout ?

0