Multi datepicker

[SeanLF]

Would it be within the scope of this component to allow for the selection of one or more dates?

[clauderic]

You mean like a date range? If so, it's been discussed at length already in #4

[SeanLF]

No, I meant selecting multiple individual dates.

[clauderic]

Ah, I see. Possibly, though I'm not exactly sure how you would render that in the header. If you remove the header, then yes, it wouldn't be too difficult I suppose

[SeanLF]

What do you think about adding carets or chevrons to navigate through the selected dates?

[clauderic]

Hmmm. I suppose that's not a horrible solution. I won't have time to tackle this for a couple of weeks, but I'll happily accept a PR. It should be fairly trivial to allow selectedDate to be an array, and from there it's simply a matter of tweaking the header

[SeanLF]

I'll see what I can do 👍

[lakshmantgld]

Any updates on multi - date picker ?

[ncammarata]

Would also like multiple dates, and date ranges if possible. Would love love a status update if there is one!

[tommedema]

FYI we are currently working on this at https://github.com/bloomon/react-infinite-calendar/tree/multi-datepicker (WIP)

[vmaudgalya]

Any updates on the multi-date picker? Right now I'm "mocking" multiple selected dates using the disabledDates feature with custom styling, but this feature would be a lifesaver

[workingDog]

It would be really great to have the multi-date feature. Eagerly waiting for this.
I'm using Bootstrap for this at the moment.

[davidpelayo]

Totally agree. We need this. I will try to do a PR soon.

[clauderic]

FYI, I'm currently working on this on #73 and this will ship with version 2.0

[lakshmantgld]

@clauderic Suresh has already implemmented this and we are using it in our production app. Give it a look: https://github.com/sureshmurali/react-infinite-calendar

It is actually a fork of https://github.com/bloomon/react-infinite-calendar/tree/multi-datepicker.

This is how it looks in desktop:

This is how it looks in mobile:

our production app: https://github.com/lakshmantgld/comingOrNot#reactjs-redux-serverless-graphql-event-planner. Thanks @clauderic for the amazing calendar component.

[clauderic]

That looks great @lakshmantgld! And thanks for the kind words, it's always awesome to hear what people have been doing with react-infinite-calendar 😄

Version 2.0 is going to make it a lot easier to add functionality like multiple date selection, date ranges, displaying events, etc. without the need for creating your own fork. I'll also be providing some defaults out of the box for some of these. If you're curious to see what that looks like for multiple date selection, here's a sneek peek: https://twitter.com/clauderic_d/status/834580710568689664

All of this is built through composition, and will be achieved through opt-in higher-order components that you can add to get this extra functionality. Something along the lines of:

import InfiniteCalendar, {withMultipleDates} from 'react-infinite-calendar';

const MultipleDateCalendar = withMultipleDates(InfiniteCalendar);

The idea is users will also be able to create their own higher-order components if their use-case doesn't fit in the scope of the project

[clauderic]

Hey guys! Progress update: I just published react-infinite-calendar Version 2.0, which comes with multiple date selection out of the box 🎉

Check out the updated demo site to play with it: http://clauderic.github.io/react-infinite-calendar/#/enhance-default-functionality/multiple-date-selection

Disclaimer: It's still experimental, but PRs are welcome to make it better!

Here's the final look & feel I settled on:

Usage is as follows:

import InfiniteCalendar, {
  Calendar,
  defaultMultipleDateInterpolation,
  withMultipleDates,
} from 'react-infinite-calendar';

<InfiniteCalendar
  Component={withMultipleDates(Calendar)}
  interpolateSelection={defaultMultipleDateInterpolation}
  selected={[new Date(2017, 1, 10), new Date(2017, 1, 18), new Date()]}
/>

If you're curious about the implementation, check out https://github.com/clauderic/react-infinite-calendar/blob/master/src/Calendar/withMultipleDates.js

Thanks everyone for your patience!

[hasnainshafqatmlt]

@clauderic cool work 👍
i have once question.
can we disable select unselect on click, and it only select those dates which i put in 'selected' ?
i mean just want to add colors on date.
i just want to show selected dates on calendar. if there is any way then it very helpful.
thanks

[shavidzet]

Nice work guys, datepicker works great.
Need multiple datepickers to get same ui
If doesn't have feature to get same ui with functionality, I'll send PR 😅 ✌️ 🌴