Want to add tooltip in day range selection

[Satish24sp]

Hello, Thanks for making this beautiful library and open source.

I want to add multiple tooltip in day range selection. Suppose, I want to select a range from 15 Nov 2022 to 30 Nov 2022, then it should show tooltip on 15 Nov 2022 as "Start Date" and 30th Nov 2022 as "End Date".

Please provide your comments because I need to implement that functionality.

[bryankeller]

Hi @Satish24sp, what have you tried so far? And what isn't working? Please provide this information so I can better help.

Have you tried out this idea in the example project? There's already a tooltip example there, and it should be easy to extend it to your needs.

[Satish24sp]

Hello @bryankeller , Yes I tried to add the tooltip just like the demo project but that's not working with the range selector.

`

 private func makeRangeContent() -> CalendarViewContent {
    let startDate = calendar.date(from: DateComponents(year: 2022, month: 01, day: 01))!
    let endDate = calendar.date(from: DateComponents(year: 2023, month: 12, day: 31))!

    let calendarSelection = self.calendarSelection
    let dateRanges: Set<ClosedRange<Date>>
    if
      case .dayRange(let dayRange) = calendarSelection,
      let lowerBound = calendar.date(from: dayRange.lowerBound.components),
      let upperBound = calendar.date(from: dayRange.upperBound.components)
    {
      dateRanges = [lowerBound...upperBound]
    } else {
      dateRanges = []
    }

    let overlaidItemLocations: Set<CalendarViewContent.OverlaidItemLocation>
    if let selectedDate = selectedDate {
      overlaidItemLocations = [.day(containingDate: selectedDate)]
    } else {
      overlaidItemLocations = []
    }

    return CalendarViewContent(
      calendar: calendar,
      visibleDateRange: startDate...endDate,
      monthsLayout: .horizontal(options: HorizontalMonthsLayoutOptions())
    )

      .interMonthSpacing(24)
      .verticalDayMargin(8)
      .horizontalDayMargin(8)

      .dayItemProvider { [calendar, dayDateFormatter] day in
        var invariantViewProperties = DayView.InvariantViewProperties.baseInteractive

        let isSelectedStyle: Bool
        switch calendarSelection {
        case .singleDay(let selectedDay):
          isSelectedStyle = day == selectedDay
        case .dayRange(let selectedDayRange):
          isSelectedStyle = day == selectedDayRange.lowerBound || day == selectedDayRange.upperBound
        case .none:
          isSelectedStyle = false
        }

        if isSelectedStyle {
          invariantViewProperties.backgroundShapeDrawingConfig.borderColor = .blue
        }

        let date = calendar.date(from: day.components)

        return DayView.calendarItemModel(
          invariantViewProperties: invariantViewProperties,
          viewModel: .init(
            dayText: "\(day.day)",
            accessibilityLabel: date.map { dayDateFormatter.string(from: $0) },
            accessibilityHint: nil))
      }

      .dayRangeItemProvider(for: dateRanges) { dayRangeLayoutContext in
        DayRangeIndicatorView.calendarItemModel(
          invariantViewProperties: .init(),
          viewModel: .init(
            framesOfDaysToHighlight: dayRangeLayoutContext.daysAndFrames.map { $0.frame }))
      }

      .overlayItemProvider(for: overlaidItemLocations) { overlayLayoutContext in
        TooltipView.calendarItemModel(
          invariantViewProperties: .init(),
          viewModel: .init(
            frameOfTooltippedItem: overlayLayoutContext.overlaidItemFrame,
            text: "Selected Day"))
      }

  }`

Also, one more thing, In "Single Day Selection", the selectedDay returning one day less than the selected date, Like, when I select 28 Nov, and I printed the selectedDay then it showing 27 Nov.

[bryankeller]

In your example, I only see you specifying one overlaid item location. You need to overlay both the first selected date and the last selected date.

overlaidItemLocations = [.day(containingDate: selectedDate)]

Per the README.md:

For each overlaid item location in the Set passed into this function, our overlay item model provider closure will be invoked with a context instance that contains all of the information needed for us to render a view to be used as an overlay for a particular overlaid item location.

So you need to specify all locations to be overlaid.

---

Regarding the wrong selected date showing up - where / how do you create your calendar instance?

[Satish24sp]

Comment: Regarding the wrong selected date showing up - where / how do you create your calendar instance?

` // MARK: Private private var selectedDate: Date? lazy var calendar = Calendar.current lazy var dayDateFormatter: DateFormatter = { let dateFormatter = DateFormatter() dateFormatter.calendar = calendar dateFormatter.locale = calendar.locale dateFormatter.dateFormat = DateFormatter.dateFormat( fromTemplate: "EEEE, MMM d, yyyy", options: 0, locale: calendar.locale ?? Locale.current) return dateFormatter }()

`

[Satish24sp]

Hello @bryankeller , could you please help in getting the selected date on view dismiss because currently I'm getting a day before the selected date. Example: If I select 21 Nov then its value is 20 Nov and If I select 1 Jan 2022 then its value is 31st Dec 2021, means showing a day before.

[Satish24sp]

Hello @bryankeller , I have accomplished the date range selection task with custom tooltips and closing this ticket for now. But the selected date returns wrong day, one less than selected date.

Thanks for the help and making & maintaining such a amazing library.