Is it possible to mark a whole week as active tile if selected a day in the calendar?

[golditz]

Hi,
I am wondering if it is possible to mark a whole week as selected (like the date range) when I am selecting a day?

The idea is to get a range from the start of the week to the end of the week when a user selected a day in the calendar.

Thanks in advanced,
Isaac

[wojtekmaj]

Hey @golditz,
this is quite specific use case so you would need to handle it by yourself. Perhaps something like this?

onChange={clickedDate => {
    const beginWeek = getBeginOfWeek(clickedDate);
    const endWeek = getEndOfWeek(clickedDate);
    this.setState({ value: [beginWeek, endWeek] });
}}

Hint: methods for getting week start and end are available in react-calendar and aren't going anywhere soon, you can get it from my code source.

[golditz]

Fantastic answer ... TBH, I found this solution just 10 minutes before you submitted yours... :)))

However, when I click again on the selected day, the selected view is changed.
Is there any idea why it is happening?

[wojtekmaj]

I'm sorry, I'm not sure what you mean. Could you elaborate?

[golditz]

So I have implement your solution. Chose the day, it marked the week. Then I chose the same exact day, it removes the marking from the whole week and lives the selectable day...

…

On 16 Jan 2018, at 17:41, Wojciech Maj ***@***.***> wrote: I'm sorry, I'm not sure what you mean. Could you elaborate? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[wojtekmaj]

Ah, thank you. I could reproduce this and this has to be fixed on my side; expect a fix soon.

If you're interested, here's what happens:

• You click the date
• React-Calendar sets its value to the date clicked.
• Your onChange overwrites it with a week range.
• React-Calendar sets its value from props.
• You click the date once again
• React-Calendar sets its value to the date clicked.
• Your onChange gets the same dates again
• React-Calendar does not detect the change in props and thus does not update the value.

[wojtekmaj]

I have created a separate ticket for this error, please refer to it if you still have issues. Closing this discussion as I hope we have achieved what we wanted ;)

[wojtekmaj]

One final tip: Make sure to use showNeighboringMonth flag to, well, show neighboring month. This way it will always be clear that the whole week gets selected, and not only the days of the week that happens to be in a given month.

[golditz]

Hi, Did you make the update in the library? Thanks in advanced, Isaac

…

On Tue, Jan 16, 2018 at 8:52 PM, Wojciech Maj ***@***.***> wrote: One final tip: Make sure to use showNeighboringMonth flag to, well, show neighboring month. This way it will always be clear that the whole week gets selected, and not only the days of the week in a given month. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#27 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADNGh6U6hyaOuizoKpRegHBLgk50ilrrks5tLQv-gaJpZM4RfZUX> .

[wojtekmaj]

Yes, check out v2.11.2.

[golditz]

GREAT!!! Thank you so much!

…

On Mon, Jan 22, 2018 at 12:56 PM, Wojciech Maj ***@***.***> wrote: Yes, check out v2.11.2 <https://github.com/wojtekmaj/react-calendar/releases/tag/v2.11.2>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#27 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADNGh_G973I71VlpHKDRSqnrxQ5SU-FBks5tNIVogaJpZM4RfZUX> .