digitalcoder / calendarx Goto Github PK

As easy as putting <Calendarx /> in your React app. First of many prescribed React solutions.

import Calendarx from 'calendarx'

ReactDOM.render(
  <App>
    <Calendarx />
  </App>,
  document.getElementById('root')
)

The Calendarx view will adapt depending on the number of days that are specified in numDays. If 4 is passed in, the first column will start with your referenceDate, where if 7 is passed in the calendar will align itself to a week view, and if say 35 is passed in, the calendar will pivot to show the entire month.

Passing an events array to <Calendarx /> will create an EventComponent instance for each event, spreading each event as props to the component. A valid Moment time is the only required prop to create an event.

const events = [
  {
    id: 1,
    title: 'Birthday',
    time: moment().add(0, 'd').format(),
    location: 'Home',
    color: '#f284a8'
  }
]
const App = () => (
  <Calendarx events={events} />
)

The default EventComponent class is rendered like this:

const DefaultEvent = () => (
  <div
    { /* if the event is today */ }
    className='calendarEvent today'
    style={details.style || DEFAULT_STYLE}
  >
    <p className="event_details" style={{ margin: 0 }}>
      {moment(details.time).format('LT')}<br />
      { details.title }<br />
      { details.location }<br />
    </p>
  </div>
)

with custom classNames embedded.

You may pass in a new React component to override how your events are displayed in the calendar:

const NewEventComponent = details => (
  <p>
    {details.time}
  </p>
)

render(
  <Calendarx
    events={fakeEvents}
    EventComponent={NewEventComponent}
  />,
  document.getElementById('calendar')
)

Please do! This is definitely just a start, and we could use some help. If you have ideas, fixes, or inspirations, please submit a PR.

We need some!

This project was inspired by Kyle Stetz's CLNDR.