Adding modifiers to a range of days

[gpbl]

Hi, first of all thank you for this awesome component. I got my datepicker working :+1:

In my use case, I am showing the current month. I need to add a modifier to the days before the current day – they should appear as "disabled".

I was thinking to add an array of <Day/>, from the month's first to the current day – but I'm not sure how to match the days belonging to the previous month, when they appear as outside.

Suggestions?

Another idea is to have a <DaysRange/> component, e.g:

<DaysRange before={moment()} modifier={{past: true}} /> 
<DaysRange after={moment()}  modifier={{future: true}}  />
<DaysRange before={moment('12/10/2014')} after={moment('12/01/2014')} />

[freiksenet]

Hi!

Thanks you for your interest in react-calendar.

I've been thinking of this kind of system too, current way of passing children doesn't scale if you need to select arbitrary date ranges.

I'll see if I can get to react-calendar next week and implement that refactoring, I also had some other improvements in my mind.

[gpbl]

Thanks @freiksenet. I can help, if you need (maybe the docs?)

[srconklin]

I am also in need of random sets of dates highlighted on the calendar. Any progress on this?

[freiksenet]

I'll try to get around to my open source stuff at the end of this week.

[lolJS]

@gpbl With the new API you should be able to pass startDate and endDate params in your modifier object:

ex:

<Calendar weekNumbers={ true }
                  startDate={ this.state.date }
                  endDate={ this.state.date.clone().endOf('year') }
                  mods={
                  [
                    {
                      startDate: moment().add(3, 'days'),
                      endDate: moment().add(7, 'days'),
                      classNames: [ 'longEvent' ],
                      component: [ 'day' ]
                    }
                  ]
                } />

[gpbl]

Thanks! Time runs fast, so I've built an alternative that was helping my use case.