freiksenet / react-calendar

A modular toolkit to build calendar-related things in React
http://freiksenet.github.io/react-calendar/
MIT License
249 stars 46 forks source link

Babel + es2015 + Refactor #28

Closed lolJS closed 8 years ago

lolJS commented 8 years ago

Major Update BREAKING CHANGES

New API

You can no longer modify rendering by passing children. Instead pass a mods array as shown below.

To Do

         <Calendar date={ this.state.date }
                   weekNumbers={ true }
                   startDate={ this.state.date }
                   endDate={ this.state.date.clone().endOf('year') }
                   mods={
                     [
                       {
                         date: moment(),
                         classNames: [ 'current' ],
                         component: [ 'day', 'month', 'week' ]
                       },
                       {
                         date: moment().add(3, 'days'),
                         classNames: [ 'event' ],
                         component: [ 'day' ]
                       },
                       {
                         date: moment().add(4, 'days'),
                         classNames: [ 'event', 'warning' ],
                         component: [ 'day' ],
                         events: {
                           onClick: (date, e) => alert(`${date.format('dddd')}'s event!`)
                         }
                       },
                       {
                         date: moment().add(5, 'days'),
                         classNames: [ 'event' ],
                         component: [ 'day' ]
                       },
                       {
                         component: 'day',
                         events: {
                           onClick: (date, e) => alert(date.format())
                         }
                       }
                     ]
                   } />

What a rendered calendar with those modifiers would look like:

Calendar with new modifiers