Skip to content

Further Implementation

Colby Mehmen edited this page Jan 15, 2024 · 2 revisions

There are more things to a calendar scroll than just scrolling through months. Here are some advanced features you can add to give make your calendar fully featured.

Responding to day selection

When tapping a specific calendar day, you probably want your app to respond in some way so that you can allow the user to interact with the selection.

You can do this very easily by simply implementing the onSelection: () -> CalendarDay completion handler of the ScrollableCalendarView. The completion handler will return the CalendarDay object of the user selected calendar day. This allows you to interact witht he users selection.

ScrollableCalendarView<EmptyView>(
    viewModel: viewModel,
    calendarDayView: .numbered(ClassicNumberedDayViewConfig()),
    onSelection: { calendarDay in
        // respond to selection here <--------
    }
) 

Auto Scrolling To Current Month

Instead of forcing the user who has scrolled to far to use a compass to get back to where they started, you can add snap to today functionality. So that the user can press one button and the calendar will scroll back to the current day.

You can do this by accessing the currentMonthId via the ScrollableCalendarViewViewModel and wrapping the ScrollableCalendarView in a ScollViewReader. From there you can implement a button, that utilizes the scrollTo(:) function of the ScrollViewReader.

ScrollViewReader { proxy in
    ScrollableCalendarView<EmptyView>(
        viewModel: viewModel,
        calendarDayView: .numbered(ClassicNumberedDayViewConfig())
    )
    .toolbar {
        ToolbarItem(placement: .cancellationAction) {
            Button {
                guard let currentMonthId = viewModel.currentMonthId else {
                    return
                }
                proxy.scrollTo(currentMonthId) // <--
            } label: {
                Text("Today")
            }
        }
    }
}

Here we do this by adding a toolbar with a Today button that activates the scroll to functionality. If you implement this and do not see the Today button in the tool bar remember to wrap the parent view in a NavigationView.