Simplify props accepted by Calendar

fson commented 9 years ago

Thanks for a useful library @freiksenet.

I was wondering if the top-level API of Calendar could be simplified.

At the moment we have firstMonth, date and size, which all affect the range shown in the calendar. The type of firstMonth is also quite complex because it can also take the strings current and center. firstMonth is also 1-indexed unlike month in native Date and moment objects, which are 0-indexed.

What if instead of these three props, Calendar would just have startDate and endDate, both accepting a moment.

Because of the expressivenes of moment API this would still allow to concisely specify any desired range, while being simpler to understand than the combination of firstMonth, date and size.

Some examples (highlighting the "current" month not included, could be simply done using class names / modifiers or by keeping date as an optional prop):

Calendar for this year:

<Calendar firstMonth={1}
          date={moment()}
          size={12} />

// would become:

<Calendar />  // Good default values!

Calendar for 3 months, current month in the middle:

<Calendar firstMonth={moment().subtract(1, 'month').month() + 1}
          date={moment()}
          size={3} />

// would become:

<Calendar startDate={moment().subtract(1, 'month').startOf('month')}
          endDate={moment().add(1, 'month').endOf('month')} />

Calendar for this quarter:

<Calendar firstMonth={moment().startOf('quarter').month() + 1}
          date={moment()}
          size={3} />

// would become:

<Calendar startDate={moment().startOf('quarter')}
          endDate={moment().endOf('quarter')} />

Calendar for the next 6 weeks:

<Calendar firstMonth={?????}
          date={moment()}
          size={?????} />

// would become:

<Calendar startDate={moment()}
          endDate={moment().add(6, 'weeks')} />