Focus a range with useRangeCalendarState

[Gusis93]

Hi! I'm using the hooks to create a date range picker with some shortcuts.

Is there anyway to highlight a range? I would like to highlight a range when the user hovers the shortcuts, like a preview of the selection.

Closer I have gotten is with setFocus but that only focus on 1 date.

Thank you!

[Gusis93]

Actually I think I found the answer

  const highlight = (date: CalendarDate) => {
    state.setDragging(true);
    state.setAnchorDate(date);
    state.setFocusedDate(now);
  };

  const unhighlight = () => {
    state.setDragging(false);
    state.setAnchorDate(null);
    // This returns to the selected date view.
    state.setFocusedDate(state.value.end);
    state.setFocused(false);
  };

Not sure if its the best approach but it works