Giter Club home page Giter Club logo

calendarx's Introduction

<CalendaRx />

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

Calendarx Screen Capture

Usage

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.

Options

Option Default Type Description
events [] Array Events passed into the calendar
referenceDate Date.now() UTC Timestamp String, Date, Moment Where the calendar is centered around
numDays 35 Number Number of days the calendar should display.
width '100%' String - CSS string, Number - number of pixels Width of the calendar
height width or '600px' String - CSS string, Number - number of pixels Height of the calendar
todayClass 'today' String Class to be applied to the DateColumn with today's date
currMonthClass 'currMonth' String Class to be applied to dates of current month
prevMonthClass 'prevMonth' String Class to be applied to dates of previous month
nextMonthClass 'nextMonth' String Class to be applied to dates of next month
prevMonthStyle { opacity: 0.4 } Object - follow React style syntax Style to be applied to dates of previous month
nextMonthStyle { opacity: 0.4 } Object - follow React style syntax Style to be applied to dates of next month
themeColor '#4dc2fa' String - CSS Accents things like today's date and events
EventComponent see Overriding Event Component React Class Component to display events

Calendar Events

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.

Example

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

Overriding Event Component

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')
)

Contributing

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.

Test

We need some!

Kuddos (I thought 'Props' would be confusing)

This project was inspired by Kyle Stetz's CLNDR.

calendarx's People

Contributors

mfix22 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.