SwiftUI issue showing Button in .overlay

Question

I'm trying to work with this Calendar View so that upon tapping on a day on the calendar, you can navigate to a detail view of that particular day. The code below works to navigate to the DetailView, however it obscures the day number label which I can't figure out why?

import SwiftUI

struct TestCalendar: View {

 @EnvironmentObject var trackerDataStore: TrackerDataStore
  @Environment(\.calendar) var calendar

    private var year: DateInterval {
        calendar.dateInterval(of: .year, for: Date())!
    }

    var body: some View {
    NavigationView {
        ScrollView {
            CalendarView(interval: year) { date in
                Text("30")
                    .hidden()
                    .padding(8)
                    .background(Color.blue)
                    .clipShape(Circle())
                    .padding(.vertical, 4)
                    .overlay(
                    
                       NavigateFromCalendarButton(
                            action: {
                                print("\(date) was tapped")
                            },
                            destination: {
                                WorkoutDetailView().environmentObject(trackerDataStore)
                            },
                            label: { Text(String(self.calendar.component(.day, from: date))) }
                        )
                
                    )
                
            }
        }
        }
    }
}

struct TestCalendar_Previews: PreviewProvider {
    static var previews: some View {
        TestCalendar()
    }
}


struct NavigateFromCalendarButton<Destination: View, Text: View>: View {
    var action: () -> Void = { }
    var destination: () -> Destination
    var label: () -> Text

    @State private var isActive: Bool = false

    var body: some View {
        Button(action: {
            self.action()
            self.isActive.toggle()
        }) {
            label()
              .background(
                ScrollView { // Fixes a bug where the navigation bar may become hidden on the pushed view
                    NavigationLink(destination: LazyDestination { self.destination() },
                                                 isActive: self.$isActive) { EmptyView() }
                }
            
              )
        }
    }
}

// This view lets us avoid instantiating our Destination before it has been pushed.
struct LazyDestination<Destination: View>: View {
    var destination: () -> Destination
    var body: some View {
        self.destination()
    }
}

Answer 1

Your background is blue and default button accent color is blue, so it is just not visible.

Here is possible fix (or change background for some other color). Tested with Xcode 12.1 / iOS 14.1

var body: some View {
    Button(action: {
        self.action()
        self.isActive.toggle()
    }) {
        label()
          .background(
            ScrollView { // Fixes a bug where the navigation bar may become hidden on the pushed view
                NavigationLink(destination: LazyDestination { self.destination() },
                                             isActive: self.$isActive) { EmptyView() }
            }
        
          )
    }
    .accentColor(.white)      // << here !!
}