stanza-calendar-interface v0.0.4

stanza-calendar-interface

This is a fork off of version react-big-calendar@0.20.0:

Original Repo

A calendar component similar to modern day desktop calendar clients (Google Calendar, Exchange, Yahoo etc ...). We forked this repo so we can enhance and optimize the UI to better fit Stanza's branding.

Use and Setup

npm install stanza-calendar-interface --save

Include stanza-calendar-interface/lib/css/stanza-calendar-interface.css for styles, and make sure your calendar's container element has a height, or the calendar won't be visible.

Starters

• stanza-calendar-interface
• stanza-calendar-interface with drag and drop

Run examples locally

$ git clone git@github.com:joinspoton/react-big-calendar.git
$ cd stanza-calendar-interface
$ npm install
$ npm run examples

• Open localhost:3000/examples/index.html.

Localization and Date Formatting

stanza-calendar-interface includes two options for handling the date formatting and culture localization, depending on your preference of DateTime libraries. You can use either the Moment.js or Globalize.js localizers.

Regardless of your choice, you must choose a localizer to use this library:

Moment.js

import BigCalendar from 'stanza-calendar-interface'
import moment from 'moment'

const localizer = BigCalendar.momentLocalizer(moment) 

const MyCalendar = props => (
  <div>
    <BigCalendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
    />
  </div>
)

Globalize.js v0.1.1

import BigCalendar from 'stanza-calendar-interface'
import globalize from 'globalize'

const localizer = BigCalendar.globalizeLocalizer(globalize) 

const MyCalendar = props => (
  <div>
    <BigCalendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
    />
  </div>
)

Join us on Reactiflux Discord

Join us on Reactiflux Discord community under the channel #stanza-calendar-interface if you have any questions.