Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigate to Today #361

Open
AkbarBakhshi opened this issue Sep 30, 2023 · 3 comments
Open

Navigate to Today #361

AkbarBakhshi opened this issue Sep 30, 2023 · 3 comments
Labels
question Further information is requested

Comments

@AkbarBakhshi
Copy link

Hello and thank you for this great library.

For the Calendar component, in the RenderFooter function, I am adding a button that will set the selected day to the current day.

Screenshot 2023-09-29 at 10 15 59 PM

If I move to another month and then click on this button, the calendar does not navigate back to the current month. The selected day will correctly change to today, but it is not visually obvious to the user if they moved to another month/year.

Is there a way to achieve that? Once "Today" is clicked, the calendar view also navigates back to the current date, if we have moved to a different month.

Thank you.

@AkbarBakhshi AkbarBakhshi added the question Further information is requested label Sep 30, 2023
@Cloner311
Copy link

I have such a problem

@2pehr
Copy link

2pehr commented Oct 7, 2023

Thank you for your amazing work.
I am facing the same problem. However as a solution to this, I tried to re-render the component whenever a 'reset' button is clicked, it errors on "reading removeEventListner" and still couldn't've figure it out.

@alexferreira1796
Copy link

I managed to make it work in this solution

I added a resetCounter state that is updated whenever the "Today" button is clicked. This counter is used as a key for calendar components, forcing render

const [resetCounter, setResetCounter] = useState<number>(0);

const onHandleOption = () => {
    setResetCounter((prevCounter) => prevCounter + 1);
  };

<Calendar
       key={`calendar1-${resetCounter}`}
       value={selectedDayRange1}
       onChange={setSelectedDayRange1}
       shouldHighlightWeekends
       locale={monthsLocale}
 />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

4 participants