├── .babelrc ├── .bithoundrc ├── .bootstraprc ├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .travis.yml ├── README.md ├── __tests__ └── CalendarTitle-test.js ├── demo ├── App.jsx ├── CalendarDemo.jsx ├── TestData.js ├── images │ └── bgnoise_lg.png └── index.js ├── dist ├── react-event-calendar.js ├── react-event-calendar.js.map ├── react-event-calendar.min.js └── react-event-calendar.min.js.map ├── lib ├── index_template.ejs ├── post_install.js └── render.jsx ├── package.json ├── src ├── components │ ├── CalendarDay.js │ ├── CalendarEvent.js │ └── CalendarTitle.js └── index.js ├── style.css └── webpack.config.babel.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react" 5 | ], 6 | "env": { 7 | "start": { 8 | "presets": [ 9 | "react-hmre" 10 | ] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.bithoundrc: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | "dist/*.js" 4 | ] 5 | } -------------------------------------------------------------------------------- /.bootstraprc: -------------------------------------------------------------------------------- 1 | --- 2 | # Output debugging info 3 | # loglevel: debug 4 | 5 | # Major version of Bootstrap: 3 or 4 6 | bootstrapVersion: 3 7 | 8 | # If Bootstrap version 3 is used - turn on/off custom icon font path 9 | useCustomIconFontPath: false 10 | 11 | # Webpack loaders, order matters 12 | styleLoaders: 13 | - style 14 | - css 15 | - sass 16 | 17 | # Extract styles to stand-alone css file 18 | # Different settings for different environments can be used, 19 | # It depends on value of NODE_ENV environment variable 20 | # This param can also be set in webpack config: 21 | # entry: 'bootstrap-loader/extractStyles' 22 | extractStyles: false 23 | # env: 24 | # development: 25 | # extractStyles: false 26 | # production: 27 | # extractStyles: true 28 | 29 | 30 | # Customize Bootstrap variables that get imported before the original Bootstrap variables. 31 | # Thus, derived Bootstrap variables can depend on values from here. 32 | # See the Bootstrap _variables.scss file for examples of derived Bootstrap variables. 33 | # 34 | # preBootstrapCustomizations: ./path/to/bootstrap/pre-customizations.scss 35 | 36 | 37 | # This gets loaded after bootstrap/variables is loaded 38 | # Thus, you may customize Bootstrap variables 39 | # based on the values established in the Bootstrap _variables.scss file 40 | # 41 | # bootstrapCustomizations: ./path/to/bootstrap/customizations.scss 42 | 43 | 44 | # Import your custom styles here 45 | # Usually this endpoint-file contains list of @imports of your application styles 46 | # 47 | # appStyles: ./path/to/your/app/styles/endpoint.scss 48 | 49 | 50 | ### Bootstrap styles 51 | styles: 52 | 53 | # Mixins 54 | mixins: true 55 | 56 | # Reset and dependencies 57 | normalize: true 58 | print: true 59 | glyphicons: true 60 | 61 | # Core CSS 62 | scaffolding: true 63 | type: true 64 | code: true 65 | grid: true 66 | tables: true 67 | forms: true 68 | buttons: true 69 | 70 | # Components 71 | component-animations: true 72 | dropdowns: true 73 | button-groups: true 74 | input-groups: true 75 | navs: true 76 | navbar: true 77 | breadcrumbs: true 78 | pagination: true 79 | pager: true 80 | labels: true 81 | badges: true 82 | jumbotron: true 83 | thumbnails: true 84 | alerts: true 85 | progress-bars: true 86 | media: true 87 | list-group: true 88 | panels: true 89 | wells: true 90 | responsive-embed: true 91 | close: true 92 | 93 | # Components w/ JavaScript 94 | modals: true 95 | tooltip: true 96 | popovers: true 97 | carousel: true 98 | 99 | # Utility classes 100 | utilities: true 101 | responsive-utilities: true 102 | 103 | ### Bootstrap scripts 104 | scripts: false -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "node": true, 7 | "jasmine": true 8 | }, 9 | "plugins": [ 10 | "react" 11 | ], 12 | "globals": { 13 | "jest": false 14 | }, 15 | "rules": { 16 | "no-unused-vars": 0, 17 | "no-underscore-dangle": 0, 18 | "no-use-before-define": 0, 19 | "quotes": [2, "single"], 20 | "comma-dangle": 0, 21 | "jsx-quotes": 1, 22 | "react/jsx-boolean-value": 1, 23 | "react/jsx-no-undef": 1, 24 | "react/jsx-sort-props": 0, 25 | "react/jsx-uses-react": 1, 26 | "react/jsx-uses-vars": 1, 27 | "react/no-did-mount-set-state": 1, 28 | "react/no-did-update-set-state": 1, 29 | "react/no-multi-comp": 1, 30 | "react/no-unknown-property": 1, 31 | "react/prop-types": 1, 32 | "react/react-in-jsx-scope": 1, 33 | "react/self-closing-comp": 1, 34 | "react/wrap-multilines": 1 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | gh-pages/ 3 | dist-modules/ 4 | node_modules/ 5 | .eslintcache 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.12" 4 | - "4.2" 5 | - "5.1" 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/react-event-calendar.svg)](https://badge.fury.io/js/react-event-calendar) 2 | 3 | # Project Status 4 | ## This project has been deprecated. 5 | 6 | I am afraid I don't have the time to maintain it the to the level I require. Several projects have since surpassed this functionality and anyone looking for event calendars should investigate them to see if they server their needs. 7 | 8 | I recommend: 9 | * [React Big Calendar](https://github.com/intljusticemission/react-big-calendar) 10 | * [Dayz](https://github.com/nathanstitt/dayz) 11 | 12 | Thanks all. 13 | 14 | 15 | 16 | # react-event-calendar 17 | A Calendar component that will display supplied events in a given month. 18 | 19 | ## Demo & Examples 20 | 21 | Live demo: [dptoot.github.io/react-event-calendar](http://dptoot.github.io/react-event-calendar/) 22 | 23 | To build the examples locally, run: 24 | 25 | ```js 26 | npm install 27 | npm start 28 | ``` 29 | 30 | Then open [`localhost:8080`](http://localhost:8080) in a browser. 31 | 32 | 33 | ## Installation 34 | 35 | The easiest way to use react-event-calendar is to install it from NPM 36 | 37 | 38 | 39 | ```js 40 | npm install react-event-calendar --save 41 | ``` 42 | You can also use the standalone build by including `dist/react-event-calendar.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable. 43 | 44 | 45 | ## Usage 46 | 47 | Use this component to display a month view of a calendar with supplied event duration indicators. 48 | 49 | ```js 50 | const EventCalendar = require('react-event-calendar'); 51 | 52 | const events = [ 53 | { 54 | start: '2015-07-20', 55 | end: '2015-07-02', 56 | eventClasses: 'optionalEvent' 57 | title: 'test event', 58 | description: 'This is a test description of an event', 59 | }, 60 | { 61 | start: '2015-07-19', 62 | end: '2015-07-25', 63 | title: 'test event', 64 | description: 'This is a test description of an event', 65 | data: 'you can add what ever random data you may want to use later', 66 | }, 67 | ]; 68 | 69 | console.log(eventData) 74 | /> 75 | ``` 76 | 77 | ### Properties 78 | 79 | | property |type | default | description | 80 | | -------- | ---- | ----------- | ----- | 81 | | events | array | |Array of event objects to be represented on the calendar (see below for options)| 82 | | month | int | | (Required) Selected Month to display | 83 | | year | int | | (Required) Selected Year to display | 84 | | wrapTitle | boolean | true | Redisplay an event's title if it's duration wraps to the next week 85 | | maxEventSlots | int | 10 | Maximum number of events to display per calendar day 86 | | onDayClick | func(target, day) | | Callback for user click on any day (but not an event node) | 87 | | onEventClick | func(target, eventData, day) | | Callback for user click on any event node | 88 | | onEventMouseOver | func(target, eventData, day) | | Callback for user mouse over on any event node | 89 | | onEventMouseOut | func(target, eventData, day) | | Callback for user mouse out on any event node | 90 | 91 | ### Events object 92 | The event object can contain any data you wish that may come in use to you later via the supplied Event Callbacks. There are hoever some required fields that must be populated. There are also optional data points that can be added to enhance each event. 93 | 94 | | Key | Type | Required | Description | 95 | | -------- | ---- | ----------- | --------| 96 | | start | string | true | Date of event start (Format: YYYY-MM-DD)| 97 | | end | string | true | Date of event end (Format: YYYY-MM-DD) | 98 | | eventClasses | string | false | CSS classes you wish applied to the event (space delimited) | 99 | 100 | 101 | ### Note 102 | At this time any event indexed past the threshold supplied by maxEventSlots will never display. Given the purpose of the component is to show the start and end of event streams I am still trying to decide the best way to address "hidden" events. All ideas are welcome! :D 103 | 104 | ## License 105 | 106 | The MIT License (MIT) 107 | 108 | Permission is hereby granted, free of charge, to any person obtaining a copy 109 | of this software and associated documentation files (the "Software"), to deal 110 | in the Software without restriction, including without limitation the rights 111 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 112 | copies of the Software, and to permit persons to whom the Software is 113 | furnished to do so, subject to the following conditions: 114 | 115 | The above copyright notice and this permission notice shall be included in all 116 | copies or substantial portions of the Software. 117 | 118 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 119 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 120 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 121 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 122 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 123 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 124 | SOFTWARE. 125 | 126 | Copyright (c) 2015 James Lewis. 127 | -------------------------------------------------------------------------------- /__tests__/CalendarTitle-test.js: -------------------------------------------------------------------------------- 1 | jest.unmock('../src/components/CalendarTitle'); 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | import TestUtils from 'react-addons-test-utils'; 6 | import CalendarTitle from '../src/components/CalendarTitle'; 7 | 8 | describe('CalendarTitle', () => { 9 | 10 | let component; 11 | let node; 12 | 13 | beforeEach(() => { 14 | component = TestUtils.renderIntoDocument(
); 15 | node = ReactDOM.findDOMNode(component); 16 | }); 17 | 18 | it('displays a title supplied', () => { 19 | 20 | // Verify that its textContent is "Sunday" 21 | expect(node.querySelector('div').textContent).toBe('Sunday'); 22 | 23 | }) 24 | 25 | }) -------------------------------------------------------------------------------- /demo/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Fork from 'react-ghfork'; 3 | import pkgInfo from '../package.json'; 4 | import CalendarDemo from './CalendarDemo.jsx'; 5 | // import ReactEventCalendar from '../src/index'; 6 | 7 | 8 | export default class App extends React.Component { 9 | render() { 10 | return ( 11 |
12 | 13 | 14 |
15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/CalendarDemo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import EventCalendar from '../src/index.js'; 4 | import moment from 'moment'; 5 | import Grid from 'react-bootstrap/lib/Grid'; 6 | import Row from 'react-bootstrap/lib/Row'; 7 | import Col from 'react-bootstrap/lib/Col'; 8 | import Button from 'react-bootstrap/lib/Button'; 9 | import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'; 10 | import Popover from 'react-bootstrap/lib/PopOver'; 11 | import Overlay from 'react-bootstrap/lib/Overlay'; 12 | import Modal from 'react-bootstrap/lib/Modal'; 13 | import TestData from './TestData.js'; 14 | 15 | const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ]; 16 | 17 | class CalendarDemo extends React.Component { 18 | 19 | constructor(props) { 20 | super(props); 21 | 22 | this.state = { 23 | moment: moment(), 24 | showPopover: false, 25 | showModal: false, 26 | overlayTitle: null, 27 | overlayContent: null, 28 | popoverTarget: null, 29 | }; 30 | 31 | this.handleNextMonth = this.handleNextMonth.bind(this); 32 | this.handlePreviousMonth = this.handlePreviousMonth.bind(this); 33 | this.handleToday = this.handleToday.bind(this); 34 | this.handleEventClick = this.handleEventClick.bind(this); 35 | this.handleEventMouseOver = this.handleEventMouseOver.bind(this); 36 | this.handleEventMouseOut = this.handleEventMouseOut.bind(this); 37 | this.handleDayClick = this.handleDayClick.bind(this); 38 | this.handleModalClose = this.handleModalClose.bind(this); 39 | } 40 | 41 | handleNextMonth() { 42 | this.setState({ 43 | moment: this.state.moment.add(1, 'M'), 44 | }); 45 | } 46 | 47 | handlePreviousMonth() { 48 | this.setState({ 49 | moment: this.state.moment.subtract(1, 'M'), 50 | }); 51 | } 52 | 53 | handleToday() { 54 | this.setState({ 55 | moment: moment(), 56 | }); 57 | } 58 | 59 | handleEventMouseOver(target, eventData, day) { 60 | this.setState({ 61 | showPopover: true, 62 | popoverTarget: () => ReactDOM.findDOMNode(target), 63 | overlayTitle: eventData.title, 64 | overlayContent: eventData.description, 65 | }); 66 | } 67 | 68 | handleEventMouseOut(target, eventData, day) { 69 | this.setState({ 70 | showPopover: false, 71 | }); 72 | } 73 | 74 | handleEventClick(target, eventData, day) { 75 | this.setState({ 76 | showPopover: false, 77 | showModal: true, 78 | overlayTitle: eventData.title, 79 | overlayContent: eventData.description, 80 | }); 81 | } 82 | 83 | handleDayClick(target, day) { 84 | this.setState({ 85 | showPopover: false, 86 | showModal: true, 87 | overlayTitle: this.getMomentFromDay(day).format('Do of MMMM YYYY'), 88 | overlayContent: 'User clicked day (but not event node).', 89 | }); 90 | } 91 | 92 | getMomentFromDay(day) { 93 | return moment().set({ 94 | 'year': day.year, 95 | 'month': (day.month + 0) % 12, 96 | 'date': day.day 97 | }); 98 | } 99 | 100 | handleModalClose() { 101 | this.setState({ 102 | showModal: false, 103 | }) 104 | } 105 | 106 | getHumanDate() { 107 | return [moment.months('MM', this.state.moment.month()), this.state.moment.year(), ].join(' '); 108 | } 109 | 110 | render() { 111 | 112 | const styles = { 113 | position: 'relative', 114 | }; 115 | 116 | return ( 117 |
118 | 119 | this.setState({showPopover: false, })} 123 | placement="top" 124 | container={this} 125 | target={this.state.popoverTarget}> 126 | {this.state.overlayTitle} 127 | 128 | 129 | 130 | 131 | {this.state.overlayTitle} 132 | 133 | 134 | {this.state.overlayContent} 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 |
{this.getHumanDate()}
152 | 153 |
154 |
155 | 156 | 157 | 167 | 168 | 169 |
170 | 171 |
172 | ); 173 | } 174 | } 175 | 176 | export default CalendarDemo; 177 | 178 | -------------------------------------------------------------------------------- /demo/TestData.js: -------------------------------------------------------------------------------- 1 | import moment from 'moment'; 2 | 3 | export default { 4 | getEvents: () => { 5 | const now = moment(); 6 | const dataFormat = 'YYYY-MM-DD'; 7 | const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.'; 8 | const eventMeta = [ 9 | { 10 | start: 1, 11 | length: 5, 12 | }, 13 | { 14 | start: 5, 15 | length: 1, 16 | }, 17 | { 18 | start: 5, 19 | length: 3, 20 | }, 21 | { 22 | start: 12, 23 | length: 15, 24 | }, 25 | { 26 | start: 15, 27 | length: 45, 28 | }, 29 | { 30 | start: 18, 31 | length: 6, 32 | }, 33 | { 34 | start: 21, 35 | length: 5, 36 | }, 37 | { 38 | start: 24, 39 | length: 14, 40 | }, 41 | { 42 | start: 25, 43 | length: 9, 44 | }, 45 | ] 46 | 47 | 48 | const events = eventMeta.map((data) => { 49 | const today = moment(now); 50 | 51 | return { 52 | start: today.date(data.start).format(dataFormat), 53 | end: today.add(data.length-1, 'days').format(dataFormat), 54 | eventClasses: 'custom-event-class', 55 | title: data.length + ' day event ' + (data.title || ''), 56 | description: description 57 | } 58 | }) 59 | 60 | return events; 61 | } 62 | }; 63 | -------------------------------------------------------------------------------- /demo/images/bgnoise_lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dptoot/react-event-calendar/061d02e49593bde2f6da7057ab4e636faaa50c01/demo/images/bgnoise_lg.png -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App.jsx'; 4 | 5 | const app = document.getElementsByClassName('demonstration')[0]; 6 | 7 | ReactDOM.render(, app); 8 | 9 | -------------------------------------------------------------------------------- /dist/react-event-calendar.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("react")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["React"], factory); 6 | else if(typeof exports === 'object') 7 | exports["ReactEventCalender"] = factory(require("react")); 8 | else 9 | root["ReactEventCalender"] = factory(root["React"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_1__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | /******/ 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | Object.defineProperty(exports, "__esModule", { 60 | value: true 61 | }); 62 | 63 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 64 | 65 | var _react = __webpack_require__(1); 66 | 67 | var _react2 = _interopRequireDefault(_react); 68 | 69 | var _calendarBase = __webpack_require__(2); 70 | 71 | var _classnames = __webpack_require__(3); 72 | 73 | var _classnames2 = _interopRequireDefault(_classnames); 74 | 75 | var _CalendarDay = __webpack_require__(4); 76 | 77 | var _CalendarDay2 = _interopRequireDefault(_CalendarDay); 78 | 79 | var _CalendarEvent = __webpack_require__(5); 80 | 81 | var _CalendarEvent2 = _interopRequireDefault(_CalendarEvent); 82 | 83 | var _CalendarTitle = __webpack_require__(6); 84 | 85 | var _CalendarTitle2 = _interopRequireDefault(_CalendarTitle); 86 | 87 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 88 | 89 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 90 | 91 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 92 | 93 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 94 | 95 | var EventCalendar = function (_React$Component) { 96 | _inherits(EventCalendar, _React$Component); 97 | 98 | function EventCalendar(props) { 99 | _classCallCheck(this, EventCalendar); 100 | 101 | var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(EventCalendar).call(this, props)); 102 | 103 | _this._eventTargets = {}; 104 | 105 | _this.state = { 106 | today: _this.getToday() 107 | }; 108 | 109 | _this.calendar = new _calendarBase.Calendar({ siblingMonths: true }); 110 | 111 | // Bind methods 112 | _this.getCalendarDays = _this.getCalendarDays.bind(_this); 113 | _this.getDaysWithEvents = _this.getDaysWithEvents.bind(_this); 114 | _this.getEventMeta = _this.getEventMeta.bind(_this); 115 | _this.getToday = _this.getToday.bind(_this); 116 | 117 | return _this; 118 | } 119 | 120 | _createClass(EventCalendar, [{ 121 | key: 'getToday', 122 | value: function getToday() { 123 | var today = new Date(); 124 | return { 125 | day: today.getDate(), 126 | month: today.getMonth(), 127 | year: today.getFullYear() 128 | }; 129 | } 130 | }, { 131 | key: 'getCalendarDays', 132 | value: function getCalendarDays() { 133 | var _this2 = this; 134 | 135 | return this.calendar.getCalendar(this.props.year, this.props.month).map(function (day) { 136 | day.eventSlots = Array(_this2.props.maxEventSlots).fill(false); 137 | return day; 138 | }); 139 | } 140 | }, { 141 | key: 'getEventMeta', 142 | value: function getEventMeta(days, eventStart, eventEnd) { 143 | var eventStartInView = this.calendar.isDateSelected(eventStart); 144 | var eventEndInView = this.calendar.isDateSelected(eventEnd); 145 | var firstDayOfMonth = days[0]; 146 | var lastDayOfMonth = days[days.length - 1]; 147 | 148 | var eventMeta = { 149 | // Asserts Event is visible in this month view 150 | isVisibleInView: false, 151 | visibleEventLength: days.length, 152 | // Returns the index (interval from first visible day) of [...days] of event's first "visible" day 153 | firstVisibleDayIndex: eventStartInView ? _calendarBase.Calendar.interval(firstDayOfMonth, eventStart) - 1 : 0 154 | }; 155 | 156 | // Asserts Event is visible in this month view 157 | if (eventStartInView || eventEndInView) { 158 | // Asserts event's first or last day is visible in this month view 159 | eventMeta.isVisibleInView = true; 160 | } else if (eventStart.month < this.props.month && eventEnd.month > this.props.month) { 161 | // Asserts at least part of month is 162 | eventMeta.isVisibleInView = true; 163 | } 164 | 165 | // Determine the visible length of the event during the month 166 | if (eventStartInView && eventEndInView) { 167 | eventMeta.visibleEventLength = _calendarBase.Calendar.interval(eventStart, eventEnd); 168 | } else if (!eventStartInView && eventEndInView) { 169 | eventMeta.visibleEventLength = _calendarBase.Calendar.interval(firstDayOfMonth, eventEnd); 170 | } else if (eventStartInView && !eventEndInView) { 171 | eventMeta.visibleEventLength = _calendarBase.Calendar.interval(eventStart, lastDayOfMonth); 172 | } 173 | 174 | return eventMeta; 175 | } 176 | }, { 177 | key: 'getDaysWithEvents', 178 | value: function getDaysWithEvents() { 179 | var _this3 = this; 180 | 181 | // Get all the days in this months calendar view 182 | // Sibling Months included 183 | var days = this.getCalendarDays(); 184 | 185 | // Set Range Limits on calendar 186 | this.calendar.setStartDate(days[0]); 187 | this.calendar.setEndDate(days[days.length - 1]); 188 | 189 | // Iterate over each of the supplied events 190 | this.props.events.forEach(function (eventItem) { 191 | 192 | var eventStart = _this3.getCalendarDayObject(eventItem.start); 193 | var eventEnd = _this3.getCalendarDayObject(eventItem.end); 194 | var eventMeta = _this3.getEventMeta(days, eventStart, eventEnd); 195 | 196 | if (eventMeta.isVisibleInView) { 197 | var eventLength = eventMeta.visibleEventLength; 198 | var eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false); 199 | var dayIndex = 0; 200 | 201 | // For each day in the event 202 | while (dayIndex < eventLength) { 203 | // Clone the event object so we acn add day specfic data 204 | var eventData = Object.assign({}, eventItem); 205 | 206 | if (dayIndex === 0) { 207 | // Flag first day of event 208 | eventData.isFirstDay = true; 209 | } 210 | 211 | if (dayIndex === eventLength - 1) { 212 | // Flag last day of event 213 | eventData.isLastDay = true; 214 | } 215 | 216 | if (!eventData.isFirstDay || !eventData.isLastDay) { 217 | // Flag between day of event 218 | eventData.isBetweenDay = true; 219 | } 220 | 221 | // Apply Event Data to the correct slot for that day 222 | days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots[eventSlotIndex] = eventData; 223 | 224 | // Move to next day of event 225 | dayIndex++; 226 | } 227 | } 228 | }); 229 | 230 | return days; 231 | } 232 | }, { 233 | key: 'getCalendarDayObject', 234 | value: function getCalendarDayObject(date) { 235 | var dateArray = date.split('-'); 236 | return { 237 | year: dateArray[0], 238 | // Subtract 1 from month to allow for human declared months 239 | month: dateArray[1] - 1, 240 | day: dateArray[2] 241 | }; 242 | } 243 | }, { 244 | key: 'getLastIndexOfEvent', 245 | value: function getLastIndexOfEvent(slots) { 246 | 247 | var lastIndexOfEvent = slots.map(function (slot, index) { 248 | return slot !== false ? index : false; 249 | }).filter(function (element) { 250 | return element; 251 | }).pop(); 252 | 253 | return lastIndexOfEvent < 3 || lastIndexOfEvent === undefined ? 2 : lastIndexOfEvent; 254 | } 255 | }, { 256 | key: 'getSerializedDay', 257 | value: function getSerializedDay(day) { 258 | return [day.weekDay, day.day, day.month, day.year].join(''); 259 | } 260 | }, { 261 | key: 'renderDaysOfTheWeek', 262 | value: function renderDaysOfTheWeek() { 263 | return this.props.daysOfTheWeek.map(function (title, index) { 264 | return _react2.default.createElement(_CalendarTitle2.default, { 265 | key: 'title_' + index, 266 | title: title 267 | }); 268 | }); 269 | } 270 | }, { 271 | key: 'renderEvents', 272 | value: function renderEvents(day) { 273 | var _this4 = this; 274 | 275 | // Trim excess slots 276 | var eventSlots = day.eventSlots.slice(0, this.getLastIndexOfEvent(day.eventSlots) + 1); 277 | 278 | return eventSlots.map(function (eventData, index) { 279 | return _react2.default.createElement(_CalendarEvent2.default, { 280 | key: 'event_' + index + _this4.getSerializedDay(day), 281 | day: day, 282 | eventData: eventData, 283 | onClick: _this4.props.onEventClick, 284 | onMouseOut: _this4.props.onEventMouseOut, 285 | onMouseOver: _this4.props.onEventMouseOver, 286 | wrapTitle: _this4.props.wrapTitle 287 | }); 288 | }); 289 | } 290 | }, { 291 | key: 'renderCalendarDays', 292 | value: function renderCalendarDays() { 293 | var _this5 = this; 294 | 295 | return this.getDaysWithEvents().map(function (day, index) { 296 | var isToday = _calendarBase.Calendar.interval(day, _this5.state.today) === 1; 297 | var events = _this5.renderEvents(day); 298 | 299 | return _react2.default.createElement(_CalendarDay2.default, { 300 | key: 'day_' + _this5.getSerializedDay(day), 301 | day: day, 302 | events: events, 303 | isToday: isToday, 304 | onClick: _this5.props.onDayClick 305 | }); 306 | }); 307 | } 308 | }, { 309 | key: 'render', 310 | value: function render() { 311 | return _react2.default.createElement( 312 | 'div', 313 | { className: 'flexContainer' }, 314 | this.renderDaysOfTheWeek(), 315 | this.renderCalendarDays() 316 | ); 317 | } 318 | }]); 319 | 320 | return EventCalendar; 321 | }(_react2.default.Component); 322 | 323 | EventCalendar.propTypes = { 324 | daysOfTheWeek: _react2.default.PropTypes.array, 325 | events: _react2.default.PropTypes.array, 326 | maxEventSlots: _react2.default.PropTypes.number, 327 | month: _react2.default.PropTypes.number.isRequired, 328 | onEventClick: _react2.default.PropTypes.func, 329 | onEventMouseOut: _react2.default.PropTypes.func, 330 | onEventMouseOver: _react2.default.PropTypes.func, 331 | onDayClick: _react2.default.PropTypes.func, 332 | wrapTitle: _react2.default.PropTypes.bool, 333 | year: _react2.default.PropTypes.number.isRequired 334 | 335 | }; 336 | 337 | EventCalendar.defaultProps = { 338 | daysOfTheWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], 339 | events: [], 340 | wrapTitle: true, 341 | maxEventSlots: 10 342 | }; 343 | 344 | exports.default = EventCalendar; 345 | 346 | /***/ }, 347 | /* 1 */ 348 | /***/ function(module, exports) { 349 | 350 | module.exports = __WEBPACK_EXTERNAL_MODULE_1__; 351 | 352 | /***/ }, 353 | /* 2 */ 354 | /***/ function(module, exports) { 355 | 356 | /** 357 | * Calendar constructor 358 | * 359 | * @param {Object} options Calendar options 360 | * @param {Object} options.startDate Date object indicating the selected start date 361 | * @param {Object} options.endDate Date object indicating the selected end date 362 | * @param {Boolean} options.siblingMonths Calculate dates from sibling months (before and after the current month, based on weekStart) 363 | * @param {Boolean} options.weekNumbers Caclulate the week days 364 | * @param {Number} options.weekStart Day of the week to start the calendar, respects `Date.prototype.getDay` (defaults to `0`, Sunday) 365 | */ 366 | function Calendar (options) { 367 | options = options || {}; 368 | 369 | this.startDate = options.startDate; 370 | this.endDate = options.endDate; 371 | this.siblingMonths = options.siblingMonths; 372 | this.weekNumbers = options.weekNumbers; 373 | this.weekStart = options.weekStart; 374 | 375 | if (this.weekStart === undefined) { 376 | this.weekStart = 0; 377 | } 378 | 379 | this.date = new Date(1986, 9, 14, 0, 0, 0); 380 | } 381 | 382 | /** 383 | * Calculate a calendar month 384 | * 385 | * @param {Number} year Year 386 | * @param {Number} month Month [0-11] 387 | * @return {Array} Calendar days 388 | */ 389 | Calendar.prototype.getCalendar = function (year, month) { 390 | this.date.setUTCFullYear(year); 391 | this.date.setUTCMonth(month); 392 | this.date.setUTCDate(1); 393 | 394 | year = this.date.getUTCFullYear(); 395 | month = this.date.getUTCMonth(); 396 | 397 | var calendar = [], 398 | firstDay = this.date.getUTCDay(), 399 | 400 | firstDate = - (((7 - this.weekStart) + firstDay) % 7), 401 | lastDate = Calendar.daysInMonth(year, month), 402 | lastDay = ((lastDate - firstDate) % 7), 403 | lastDatePreviousMonth = Calendar.daysInMonth(year, month - 1), 404 | i = firstDate, 405 | max = (lastDate - i) + (lastDay != 0 ? 7 - lastDay : 0) + firstDate, 406 | currentDay, 407 | currentDate, 408 | currentDateObject, 409 | currentWeekNumber = null, 410 | otherMonth, 411 | otherYear; 412 | 413 | while (i < max) { 414 | currentDate = i + 1; 415 | currentDay = ((i < 1 ? 7 + i : i) + firstDay) % 7; 416 | if (currentDate < 1 || currentDate > lastDate) { 417 | if (this.siblingMonths) { 418 | if (currentDate < 1) { 419 | otherMonth = month - 1; 420 | otherYear = year; 421 | if (otherMonth < 0) { 422 | otherMonth = 11; 423 | otherYear --; 424 | } 425 | currentDate = lastDatePreviousMonth + currentDate; 426 | } 427 | else if (currentDate > lastDate) { 428 | otherMonth = month + 1; 429 | otherYear = year; 430 | if (otherMonth > 11) { 431 | otherMonth = 0; 432 | otherYear ++; 433 | } 434 | currentDate = i - lastDate + 1; 435 | } 436 | currentDateObject = { 437 | day: currentDate, 438 | weekDay: currentDay, 439 | month: otherMonth, 440 | year: otherYear, 441 | siblingMonth: true 442 | }; 443 | } 444 | else { 445 | currentDateObject = false; 446 | } 447 | } 448 | else { 449 | currentDateObject = { 450 | day: currentDate, 451 | weekDay: currentDay, 452 | month: month, 453 | year: year 454 | }; 455 | } 456 | 457 | if (currentDateObject && this.weekNumbers) { 458 | if (currentWeekNumber === null) { 459 | currentWeekNumber = Calendar.calculateWeekNumber(currentDateObject); 460 | } 461 | else if (currentDay == 1 && currentWeekNumber == 52) { 462 | currentWeekNumber = 1; 463 | } 464 | else if (currentDay == 1) { 465 | currentWeekNumber ++; 466 | } 467 | currentDateObject.weekNumber = currentWeekNumber; 468 | } 469 | 470 | if (currentDateObject && this.startDate) { 471 | currentDateObject.selected = this.isDateSelected(currentDateObject); 472 | } 473 | 474 | calendar.push(currentDateObject); 475 | i ++; 476 | } 477 | 478 | return calendar; 479 | }; 480 | 481 | /** 482 | * Checks if a date is selected 483 | * 484 | * @param {Object} date Date object 485 | * @return {Boolean} Selected status of the date 486 | */ 487 | Calendar.prototype.isDateSelected = function (date) { 488 | if (date.year == this.startDate.year && date.month == this.startDate.month && date.day == this.startDate.day) { 489 | return true; 490 | } 491 | else if (this.endDate) { 492 | if (date.year == this.startDate.year && date.month == this.startDate.month && date.day < this.startDate.day) { 493 | return false; 494 | } 495 | else if (date.year == this.endDate.year && date.month == this.endDate.month && date.day > this.endDate.day) { 496 | return false; 497 | } 498 | else if (date.year == this.startDate.year && date.month < this.startDate.month) { 499 | return false; 500 | } 501 | else if (date.year == this.endDate.year && date.month > this.endDate.month) { 502 | return false; 503 | } 504 | else if (date.year < this.startDate.year) { 505 | return false; 506 | } 507 | else if (date.year > this.endDate.year) { 508 | return false; 509 | } 510 | return true; 511 | } 512 | return false; 513 | }; 514 | 515 | /** 516 | * Sets the selected period start 517 | * 518 | * @param {Object} date Date object 519 | */ 520 | Calendar.prototype.setStartDate = function (date) { 521 | this.startDate = date; 522 | }; 523 | 524 | /** 525 | * Sets the selected period end 526 | * 527 | * @param {Object} date Date object 528 | */ 529 | Calendar.prototype.setEndDate = function (date) { 530 | this.endDate = date; 531 | }; 532 | 533 | /** 534 | * Sets one selected date 535 | * 536 | * @param {Object} date Date object 537 | */ 538 | Calendar.prototype.setDate = Calendar.prototype.setStartDate; 539 | 540 | /** 541 | * Calculates the difference between two dates (date1 - date2), in days 542 | * 543 | * @param {Object} date1 Date object 544 | * @param {Object} date2 Date object 545 | * @return {Number} Days between the dates 546 | */ 547 | Calendar.diff = function (date1, date2) { 548 | var oDate1 = new Date(1986, 9, 14, 0, 0, 0), oDate2 = new Date(1986, 9, 14, 0, 0, 0); 549 | 550 | oDate1.setUTCFullYear(date1.year); 551 | oDate1.setUTCMonth(date1.month); 552 | oDate1.setUTCDate(date1.day); 553 | 554 | oDate2.setUTCFullYear(date2.year); 555 | oDate2.setUTCMonth(date2.month); 556 | oDate2.setUTCDate(date2.day); 557 | 558 | return Math.ceil((oDate1.getTime() - oDate2.getTime()) / 86400000); 559 | }; 560 | 561 | /** 562 | * Calculates the interval between two dates 563 | * 564 | * @param {Object} date1 Date object 565 | * @param {Object} date2 Date object 566 | * @return {Number} Number of days 567 | */ 568 | Calendar.interval = function (date1, date2) { 569 | return Math.abs(Calendar.diff(date1, date2)) + 1; 570 | }; 571 | 572 | /** 573 | * Calculates the number of days in a month 574 | * 575 | * @param {Number} year Year 576 | * @param {Number} month Month [0-11] 577 | * @return {Number} Length of the month 578 | */ 579 | Calendar.daysInMonth = function (year, month) { 580 | return new Date(year, month + 1, 0).getDate(); 581 | }; 582 | 583 | /** 584 | * Calculates if a given year is a leap year 585 | * 586 | * @param {Number} year Year 587 | * @return {Boolean} Leap year or not 588 | */ 589 | Calendar.isLeapYear = function (year) { 590 | return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0); 591 | } 592 | 593 | /** 594 | * Calculates the week number for a given date 595 | * 596 | * @param {Object} date Date object 597 | * @return {Number} Week number 598 | */ 599 | // Adapted from http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html 600 | Calendar.calculateWeekNumber = function (date) { 601 | // Creates the requested date 602 | var current = new Date(1986, 9, 14, 0, 0, 0); 603 | current.setUTCFullYear(date.year); 604 | current.setUTCMonth(date.month); 605 | current.setUTCDate(date.day); 606 | 607 | // Create a copy of the object 608 | var target = new Date(current.valueOf()); 609 | 610 | // ISO week date weeks start on monday so correct the day number 611 | var dayNr = (current.getUTCDay() + 6) % 7; 612 | 613 | // ISO 8601 states that week 1 is the week with the first thursday of that 614 | // year. Set the target date to the thursday in the target week. 615 | target.setUTCDate(target.getUTCDate() - dayNr + 3); 616 | 617 | // Store the millisecond value of the target date 618 | var firstThursday = target.valueOf(); 619 | 620 | // Set the target to the first thursday of the year 621 | 622 | // First set the target to january first 623 | target.setUTCMonth(0, 1); 624 | 625 | // Not a thursday? Correct the date to the next thursday 626 | if (target.getUTCDay() != 4) { 627 | target.setUTCMonth(0, 1 + ((4 - target.getUTCDay()) + 7) % 7); 628 | } 629 | 630 | // The weeknumber is the number of weeks between the first thursday of the 631 | // year and the thursday in the target week. 632 | // 604800000 = 7 * 24 * 3600 * 1000 633 | return 1 + Math.ceil((firstThursday - target) / 604800000); 634 | } 635 | 636 | /** 637 | * Exports the Calendar 638 | */ 639 | module.exports = { Calendar: Calendar }; 640 | 641 | 642 | /***/ }, 643 | /* 3 */ 644 | /***/ function(module, exports, __webpack_require__) { 645 | 646 | var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! 647 | Copyright (c) 2016 Jed Watson. 648 | Licensed under the MIT License (MIT), see 649 | http://jedwatson.github.io/classnames 650 | */ 651 | /* global define */ 652 | 653 | (function () { 654 | 'use strict'; 655 | 656 | var hasOwn = {}.hasOwnProperty; 657 | 658 | function classNames () { 659 | var classes = []; 660 | 661 | for (var i = 0; i < arguments.length; i++) { 662 | var arg = arguments[i]; 663 | if (!arg) continue; 664 | 665 | var argType = typeof arg; 666 | 667 | if (argType === 'string' || argType === 'number') { 668 | classes.push(arg); 669 | } else if (Array.isArray(arg)) { 670 | classes.push(classNames.apply(null, arg)); 671 | } else if (argType === 'object') { 672 | for (var key in arg) { 673 | if (hasOwn.call(arg, key) && arg[key]) { 674 | classes.push(key); 675 | } 676 | } 677 | } 678 | } 679 | 680 | return classes.join(' '); 681 | } 682 | 683 | if (typeof module !== 'undefined' && module.exports) { 684 | module.exports = classNames; 685 | } else if (true) { 686 | // register as 'classnames', consistent with npm package name 687 | !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () { 688 | return classNames; 689 | }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 690 | } else { 691 | window.classNames = classNames; 692 | } 693 | }()); 694 | 695 | 696 | /***/ }, 697 | /* 4 */ 698 | /***/ function(module, exports, __webpack_require__) { 699 | 700 | 'use strict'; 701 | 702 | Object.defineProperty(exports, "__esModule", { 703 | value: true 704 | }); 705 | 706 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 707 | 708 | var _react = __webpack_require__(1); 709 | 710 | var _react2 = _interopRequireDefault(_react); 711 | 712 | var _classnames = __webpack_require__(3); 713 | 714 | var _classnames2 = _interopRequireDefault(_classnames); 715 | 716 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 717 | 718 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 719 | 720 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 721 | 722 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 723 | 724 | var CalendarDay = function (_React$Component) { 725 | _inherits(CalendarDay, _React$Component); 726 | 727 | function CalendarDay() { 728 | _classCallCheck(this, CalendarDay); 729 | 730 | return _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarDay).apply(this, arguments)); 731 | } 732 | 733 | _createClass(CalendarDay, [{ 734 | key: 'render', 735 | value: function render() { 736 | var _props = this.props; 737 | var day = _props.day; 738 | var isToday = _props.isToday; 739 | var events = _props.events; 740 | var onClick = _props.onClick; 741 | 742 | var dayClasses = (0, _classnames2.default)({ 743 | 'flexColumn': true, 744 | 'day': true, 745 | 'inactive': day.siblingMonth, 746 | 'today': isToday 747 | }); 748 | 749 | return _react2.default.createElement( 750 | 'div', 751 | { 752 | onClick: onClick.bind(null, this, day), 753 | className: dayClasses }, 754 | _react2.default.createElement( 755 | 'div', 756 | { className: 'inner-grid' }, 757 | _react2.default.createElement( 758 | 'div', 759 | { className: 'date' }, 760 | day.day 761 | ), 762 | events 763 | ) 764 | ); 765 | } 766 | }]); 767 | 768 | return CalendarDay; 769 | }(_react2.default.Component); 770 | 771 | exports.default = CalendarDay; 772 | 773 | 774 | CalendarDay.propTypes = { 775 | day: _react2.default.PropTypes.object.isRequired, 776 | isToday: _react2.default.PropTypes.bool, 777 | events: _react2.default.PropTypes.array, 778 | onClick: _react2.default.PropTypes.func 779 | }; 780 | 781 | CalendarDay.defaultProps = { 782 | onClick: function onClick() {} 783 | }; 784 | 785 | exports.default = CalendarDay; 786 | 787 | /***/ }, 788 | /* 5 */ 789 | /***/ function(module, exports, __webpack_require__) { 790 | 791 | 'use strict'; 792 | 793 | Object.defineProperty(exports, "__esModule", { 794 | value: true 795 | }); 796 | 797 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 798 | 799 | var _react = __webpack_require__(1); 800 | 801 | var _react2 = _interopRequireDefault(_react); 802 | 803 | var _classnames = __webpack_require__(3); 804 | 805 | var _classnames2 = _interopRequireDefault(_classnames); 806 | 807 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 808 | 809 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 810 | 811 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 812 | 813 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 814 | 815 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 816 | 817 | var CalendarEvent = function (_React$Component) { 818 | _inherits(CalendarEvent, _React$Component); 819 | 820 | function CalendarEvent(props) { 821 | _classCallCheck(this, CalendarEvent); 822 | 823 | var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarEvent).call(this, props)); 824 | 825 | _this.sharedArguments = [null, _this, _this.props.eventData, _this.props.day]; 826 | // Bind methods 827 | _this.handleClick = _this.handleClick.bind(_this); 828 | return _this; 829 | } 830 | 831 | _createClass(CalendarEvent, [{ 832 | key: 'handleClick', 833 | value: function handleClick(e) { 834 | var _props; 835 | 836 | (_props = this.props).onClick.apply(_props, _toConsumableArray(this.sharedArguments.slice(1))); 837 | e.stopPropagation(); 838 | } 839 | }, { 840 | key: 'render', 841 | value: function render() { 842 | var _props$onMouseOut, _props$onMouseOver; 843 | 844 | // Return a placeholder element if there is no event data 845 | if (!this.props.eventData) { 846 | return _react2.default.createElement('div', { className: 'event-slot' }); 847 | } 848 | 849 | var showLabel = this.props.eventData.isFirstDay || this.props.day.weekDay === 0 && this.props.wrapTitle; 850 | var title = showLabel ? this.props.eventData.title : ''; 851 | 852 | var eventClasses = (0, _classnames2.default)({ 853 | 'event-slot': true, 854 | 'event': true, 855 | 'event-first-day': this.props.eventData.isFirstDay, 856 | 'event-last-day': this.props.eventData.isLastDay, 857 | 'event-has-label': showLabel 858 | }, this.props.eventData.eventClasses); 859 | 860 | return _react2.default.createElement( 861 | 'div', 862 | { className: eventClasses, 863 | onClick: this.handleClick, 864 | onMouseOut: (_props$onMouseOut = this.props.onMouseOut).bind.apply(_props$onMouseOut, _toConsumableArray(this.sharedArguments)), 865 | onMouseOver: (_props$onMouseOver = this.props.onMouseOver).bind.apply(_props$onMouseOver, _toConsumableArray(this.sharedArguments)) 866 | }, 867 | _react2.default.createElement( 868 | 'div', 869 | { className: 'event-title' }, 870 | title 871 | ) 872 | ); 873 | } 874 | }]); 875 | 876 | return CalendarEvent; 877 | }(_react2.default.Component); 878 | 879 | CalendarEvent.propTypes = { 880 | day: _react2.default.PropTypes.object.isRequired, 881 | eventData: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.object, _react2.default.PropTypes.bool]), 882 | onClick: _react2.default.PropTypes.func, 883 | onMouseOut: _react2.default.PropTypes.func, 884 | onMouseOver: _react2.default.PropTypes.func, 885 | wrapTitle: _react2.default.PropTypes.bool 886 | }; 887 | 888 | CalendarEvent.defaultProps = { 889 | onClick: function onClick() {}, 890 | onMouseOut: function onMouseOut() {}, 891 | onMouseOver: function onMouseOver() {} 892 | }; 893 | 894 | exports.default = CalendarEvent; 895 | 896 | /***/ }, 897 | /* 6 */ 898 | /***/ function(module, exports, __webpack_require__) { 899 | 900 | "use strict"; 901 | 902 | Object.defineProperty(exports, "__esModule", { 903 | value: true 904 | }); 905 | 906 | var _react = __webpack_require__(1); 907 | 908 | var _react2 = _interopRequireDefault(_react); 909 | 910 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 911 | 912 | var CalendarTitle = function CalendarTitle(_ref) { 913 | var title = _ref.title; 914 | 915 | return _react2.default.createElement( 916 | "div", 917 | { className: "flexColumn" }, 918 | title 919 | ); 920 | }; 921 | 922 | CalendarTitle.propTypes = { 923 | title: _react2.default.PropTypes.string.isRequired 924 | }; 925 | 926 | exports.default = CalendarTitle; 927 | 928 | /***/ } 929 | /******/ ]) 930 | }); 931 | ; 932 | //# sourceMappingURL=react-event-calendar.js.map -------------------------------------------------------------------------------- /dist/react-event-calendar.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 22cc3f46abc435768754","webpack:///./src/index.js","webpack:///external {\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"React\",\"root\":\"React\"}","webpack:///./~/calendar-base/lib/calendar-base.js","webpack:///./~/classnames/index.js","webpack:///./src/components/CalendarDay.js","webpack:///./src/components/CalendarEvent.js","webpack:///./src/components/CalendarTitle.js"],"names":[],"mappings":"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mBAAc,gBAAM,SAAN,CAAgB,IALR;AAMtB,sBAAiB,gBAAM,SAAN,CAAgB,IANX;AAOtB,uBAAkB,gBAAM,SAAN,CAAgB,IAPZ;AAQtB,iBAAY,gBAAM,SAAN,CAAgB,IARN;AAStB,gBAAW,gBAAM,SAAN,CAAgB,IATL;AAUtB,WAAM,gBAAM,SAAN,CAAgB,MAAhB,CAAuB;;AAVP,EAA1B;;AAcA,eAAc,YAAd,GAA6B;AACzB,oBAAe,CACX,QADW,EAEX,QAFW,EAGX,SAHW,EAIX,WAJW,EAKX,UALW,EAMX,QANW,EAOX,UAPW,CADU;AAUzB,aAAQ,EAViB;AAWzB,gBAAW,IAXc;AAYzB,oBAAe;AAZU,EAA7B;;mBAee,a;;;;;;ACrPf,gD;;;;;;ACAA;AACA;AACA;AACA,cAAa,OAAO;AACpB,cAAa,OAAO;AACpB,cAAa,OAAO;AACpB,cAAa,QAAQ;AACrB,cAAa,QAAQ;AACrB,cAAa,OAAO;AACpB;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,aAAY,OAAO;AACnB,aAAY,OAAO;AACnB,aAAY,MAAM;AAClB;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,aAAY,OAAO;AACnB,aAAY,QAAQ;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB;AACA;;AAEA;AACA;AACA;AACA,aAAY,OAAO;AACnB,aAAY,OAAO;AACnB,aAAY,OAAO;AACnB;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,aAAY,OAAO;AACnB,aAAY,OAAO;AACnB,aAAY,OAAO;AACnB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAY,OAAO;AACnB,aAAY,OAAO;AACnB,aAAY,OAAO;AACnB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAY,OAAO;AACnB,aAAY,QAAQ;AACpB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAY,OAAO;AACnB,aAAY,OAAO;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,mBAAkB;;;;;;;AC3RlB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,iBAAgB;;AAEhB;AACA;;AAEA,kBAAiB,sBAAsB;AACvC;AACA;;AAEA;;AAEA;AACA;AACA,KAAI;AACJ;AACA,KAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA,IAAG;AACH,GAAE;AACF;AACA;AACA,EAAC;;;;;;;;;;;;;;;AC/CD;;;;AACA;;;;;;;;;;;;KAEqB,W;;;;;;;;;;;kCACP;AAAA,0BACoC,KAAK,KADzC;AAAA,iBACE,GADF,UACE,GADF;AAAA,iBACO,OADP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","file":"react-event-calendar.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"React\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactEventCalender\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"ReactEventCalender\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 22cc3f46abc435768754\n **/","import React from 'react';\r\nimport {Calendar} from 'calendar-base';\r\nimport classnames from 'classnames';\r\n\r\nimport CalendarDay from './components/CalendarDay';\r\nimport CalendarEvent from './components/CalendarEvent';\r\nimport CalendarTitle from './components/CalendarTitle';\r\n\r\nclass EventCalendar extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this._eventTargets = {};\r\n\r\n this.state = {\r\n today: this.getToday(),\r\n };\r\n \r\n this.calendar = new Calendar({siblingMonths: true, });\r\n\r\n // Bind methods\r\n this.getCalendarDays = this.getCalendarDays.bind(this);\r\n this.getDaysWithEvents = this.getDaysWithEvents.bind(this);\r\n this.getEventMeta = this.getEventMeta.bind(this);\r\n this.getToday = this.getToday.bind(this);\r\n\r\n }\r\n\r\n getToday() {\r\n var today = new Date();\r\n return {\r\n day: today.getDate(),\r\n month: today.getMonth(),\r\n year: today.getFullYear(),\r\n };\r\n }\r\n\r\n getCalendarDays() {\r\n return this.calendar.getCalendar(this.props.year, this.props.month).map((day) => {\r\n day.eventSlots = Array(this.props.maxEventSlots).fill(false); \r\n return day;\r\n });\r\n }\r\n\r\n getEventMeta(days, eventStart, eventEnd) {\r\n const eventStartInView = this.calendar.isDateSelected(eventStart);\r\n const eventEndInView = this.calendar.isDateSelected(eventEnd);\r\n const firstDayOfMonth = days[0];\r\n const lastDayOfMonth = days[days.length - 1];\r\n\r\n const eventMeta = {\r\n // Asserts Event is visible in this month view\r\n isVisibleInView: false,\r\n visibleEventLength: days.length,\r\n // Returns the index (interval from first visible day) of [...days] of event's first \"visible\" day\r\n firstVisibleDayIndex: eventStartInView ? Calendar.interval(firstDayOfMonth, eventStart) - 1 : 0,\r\n };\r\n\r\n // Asserts Event is visible in this month view\r\n if (eventStartInView || eventEndInView) {\r\n // Asserts event's first or last day is visible in this month view\r\n eventMeta.isVisibleInView = true;\r\n } else if (eventStart.month < this.props.month && eventEnd.month > this.props.month) {\r\n // Asserts at least part of month is\r\n eventMeta.isVisibleInView = true;\r\n }\r\n\r\n // Determine the visible length of the event during the month\r\n if (eventStartInView && eventEndInView) {\r\n eventMeta.visibleEventLength = Calendar.interval(eventStart, eventEnd);\r\n } else if (!eventStartInView && eventEndInView) {\r\n eventMeta.visibleEventLength = Calendar.interval(firstDayOfMonth, eventEnd);\r\n } else if (eventStartInView && !eventEndInView) {\r\n eventMeta.visibleEventLength = Calendar.interval(eventStart, lastDayOfMonth);\r\n }\r\n\r\n return eventMeta;\r\n }\r\n\r\n getDaysWithEvents() {\r\n // Get all the days in this months calendar view\r\n // Sibling Months included\r\n const days = this.getCalendarDays();\r\n\r\n // Set Range Limits on calendar\r\n this.calendar.setStartDate(days[0]);\r\n this.calendar.setEndDate(days[days.length - 1]);\r\n\r\n // Iterate over each of the supplied events\r\n this.props.events.forEach((eventItem) => {\r\n\r\n const eventStart = this.getCalendarDayObject(eventItem.start);\r\n const eventEnd = this.getCalendarDayObject(eventItem.end);\r\n const eventMeta = this.getEventMeta(days, eventStart, eventEnd);\r\n\r\n if (eventMeta.isVisibleInView) {\r\n const eventLength = eventMeta.visibleEventLength;\r\n const eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false);\r\n let dayIndex = 0;\r\n\r\n // For each day in the event\r\n while (dayIndex < eventLength) {\r\n // Clone the event object so we acn add day specfic data\r\n const eventData = Object.assign({}, eventItem);\r\n\r\n if (dayIndex === 0) {\r\n // Flag first day of event\r\n eventData.isFirstDay = true;\r\n }\r\n \r\n if (dayIndex === eventLength - 1) {\r\n // Flag last day of event\r\n eventData.isLastDay = true;\r\n }\r\n \r\n if (!eventData.isFirstDay || !eventData.isLastDay) {\r\n // Flag between day of event\r\n eventData.isBetweenDay = true;\r\n }\r\n\r\n // Apply Event Data to the correct slot for that day\r\n days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots[eventSlotIndex] = eventData;\r\n\r\n // Move to next day of event\r\n dayIndex++;\r\n }\r\n }\r\n });\r\n\r\n return days;\r\n }\r\n\r\n getCalendarDayObject(date) {\r\n const dateArray = date.split('-');\r\n return {\r\n year: dateArray[0],\r\n // Subtract 1 from month to allow for human declared months\r\n month: dateArray[1] - 1,\r\n day: dateArray[2],\r\n };\r\n }\r\n\r\n getLastIndexOfEvent(slots) {\r\n\r\n const lastIndexOfEvent = slots.map((slot, index) => {\r\n return slot !== false ? index : false;\r\n }).filter((element) => {\r\n return element;\r\n }).pop();\r\n\r\n return lastIndexOfEvent < 3 || lastIndexOfEvent === undefined ? 2 : lastIndexOfEvent;\r\n }\r\n\r\n getSerializedDay(day) {\r\n return [day.weekDay, day.day, day.month, day.year].join('');\r\n }\r\n\r\n renderDaysOfTheWeek() {\r\n return this.props.daysOfTheWeek.map((title, index) => {\r\n return (\r\n \r\n ) \r\n });\r\n }\r\n\r\n renderEvents(day) {\r\n \r\n // Trim excess slots\r\n const eventSlots = day.eventSlots.slice(0, this.getLastIndexOfEvent(day.eventSlots) + 1)\r\n\r\n return eventSlots.map((eventData, index) => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n\r\n renderCalendarDays() {\r\n return this.getDaysWithEvents().map((day, index) => {\r\n const isToday = Calendar.interval(day, this.state.today) === 1;\r\n const events = this.renderEvents(day);\r\n \r\n return (\r\n \r\n );\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n {this.renderDaysOfTheWeek()}\r\n {this.renderCalendarDays()}\r\n
\r\n );\r\n }\r\n}\r\n\r\nEventCalendar.propTypes = {\r\n daysOfTheWeek: React.PropTypes.array,\r\n events: React.PropTypes.array,\r\n maxEventSlots: React.PropTypes.number,\r\n month: React.PropTypes.number.isRequired,\r\n onEventClick: React.PropTypes.func,\r\n onEventMouseOut: React.PropTypes.func,\r\n onEventMouseOver: React.PropTypes.func,\r\n onDayClick: React.PropTypes.func,\r\n wrapTitle: React.PropTypes.bool,\r\n year: React.PropTypes.number.isRequired,\r\n\r\n};\r\n\r\nEventCalendar.defaultProps = {\r\n daysOfTheWeek: [\r\n 'Sunday',\r\n 'Monday',\r\n 'Tuesday',\r\n 'Wednesday',\r\n 'Thursday',\r\n 'Friday',\r\n 'Saturday',\r\n ],\r\n events: [],\r\n wrapTitle: true,\r\n maxEventSlots: 10,\r\n};\r\n\r\nexport default EventCalendar;\r\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.js\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"React\",\"root\":\"React\"}\n ** module id = 1\n ** module chunks = 0\n **/","/**\n * Calendar constructor\n *\n * @param {Object} options Calendar options\n * @param {Object} options.startDate Date object indicating the selected start date\n * @param {Object} options.endDate Date object indicating the selected end date\n * @param {Boolean} options.siblingMonths Calculate dates from sibling months (before and after the current month, based on weekStart)\n * @param {Boolean} options.weekNumbers Caclulate the week days\n * @param {Number} options.weekStart Day of the week to start the calendar, respects `Date.prototype.getDay` (defaults to `0`, Sunday)\n */\nfunction Calendar (options) {\n\toptions = options || {};\n\n\tthis.startDate = options.startDate;\n\tthis.endDate = options.endDate;\n\tthis.siblingMonths = options.siblingMonths;\n\tthis.weekNumbers = options.weekNumbers;\n\tthis.weekStart = options.weekStart;\n\n\tif (this.weekStart === undefined) {\n\t\tthis.weekStart = 0;\n\t}\n\n\tthis.date = new Date(1986, 9, 14, 0, 0, 0);\n}\n\n/**\n * Calculate a calendar month\n *\n * @param {Number} year Year\n * @param {Number} month Month [0-11]\n * @return {Array} Calendar days\n */\nCalendar.prototype.getCalendar = function (year, month) {\n\tthis.date.setUTCFullYear(year);\n\tthis.date.setUTCMonth(month);\n\tthis.date.setUTCDate(1);\n\n\tyear = this.date.getUTCFullYear();\n\tmonth = this.date.getUTCMonth();\n\n\tvar calendar = [],\n\t\tfirstDay = this.date.getUTCDay(),\n\n\t\tfirstDate = - (((7 - this.weekStart) + firstDay) % 7),\n\t\tlastDate = Calendar.daysInMonth(year, month),\n\t\tlastDay = ((lastDate - firstDate) % 7),\n\t\tlastDatePreviousMonth = Calendar.daysInMonth(year, month - 1),\n\t\ti = firstDate,\n\t\tmax = (lastDate - i) + (lastDay != 0 ? 7 - lastDay : 0) + firstDate,\n\t\tcurrentDay,\n\t\tcurrentDate,\n\t\tcurrentDateObject,\n\t\tcurrentWeekNumber = null,\n\t\totherMonth,\n\t\totherYear;\n\n\twhile (i < max) {\n\t\tcurrentDate = i + 1;\n\t\tcurrentDay = ((i < 1 ? 7 + i : i) + firstDay) % 7;\n\t\tif (currentDate < 1 || currentDate > lastDate) {\n\t\t\tif (this.siblingMonths) {\n\t\t\t\tif (currentDate < 1) {\n\t\t\t\t\totherMonth = month - 1;\n\t\t\t\t\totherYear = year;\n\t\t\t\t\tif (otherMonth < 0) {\n\t\t\t\t\t\totherMonth = 11;\n\t\t\t\t\t\totherYear --;\n\t\t\t\t\t}\n\t\t\t\t\tcurrentDate = lastDatePreviousMonth + currentDate;\n\t\t\t\t}\n\t\t\t\telse if (currentDate > lastDate) {\n\t\t\t\t\totherMonth = month + 1;\n\t\t\t\t\totherYear = year;\n\t\t\t\t\tif (otherMonth > 11) {\n\t\t\t\t\t\totherMonth = 0;\n\t\t\t\t\t\totherYear ++;\n\t\t\t\t\t}\n\t\t\t\t\tcurrentDate = i - lastDate + 1;\n\t\t\t\t}\n\t\t\t\tcurrentDateObject = {\n\t\t\t\t\tday: currentDate,\n\t\t\t\t\tweekDay: currentDay,\n\t\t\t\t\tmonth: otherMonth,\n\t\t\t\t\tyear: otherYear,\n\t\t\t\t\tsiblingMonth: true\n\t\t\t\t};\n\t\t\t}\n\t\t\telse {\n\t\t\t\tcurrentDateObject = false;\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tcurrentDateObject = {\n\t\t\t\tday: currentDate,\n\t\t\t\tweekDay: currentDay,\n\t\t\t\tmonth: month,\n\t\t\t\tyear: year\n\t\t\t};\n\t\t}\n\n\t\tif (currentDateObject && this.weekNumbers) {\n\t\t\tif (currentWeekNumber === null) {\n\t\t\t\tcurrentWeekNumber = Calendar.calculateWeekNumber(currentDateObject);\n\t\t\t}\n\t\t\telse if (currentDay == 1 && currentWeekNumber == 52) {\n\t\t\t\tcurrentWeekNumber = 1;\n\t\t\t}\n\t\t\telse if (currentDay == 1) {\n\t\t\t\tcurrentWeekNumber ++;\n\t\t\t}\n\t\t\tcurrentDateObject.weekNumber = currentWeekNumber;\n\t\t}\n\n\t\tif (currentDateObject && this.startDate) {\n\t\t\tcurrentDateObject.selected = this.isDateSelected(currentDateObject);\n\t\t}\n\n\t\tcalendar.push(currentDateObject);\n\t\ti ++;\n\t}\n\n\treturn calendar;\n};\n\n/**\n * Checks if a date is selected\n *\n * @param {Object} date Date object\n * @return {Boolean} Selected status of the date\n */\nCalendar.prototype.isDateSelected = function (date) {\n\tif (date.year == this.startDate.year && date.month == this.startDate.month && date.day == this.startDate.day) {\n\t\treturn true;\n\t}\n\telse if (this.endDate) {\n\t\tif (date.year == this.startDate.year && date.month == this.startDate.month && date.day < this.startDate.day) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year == this.endDate.year && date.month == this.endDate.month && date.day > this.endDate.day) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year == this.startDate.year && date.month < this.startDate.month) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year == this.endDate.year && date.month > this.endDate.month) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year < this.startDate.year) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year > this.endDate.year) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t}\n\treturn false;\n};\n\n/**\n * Sets the selected period start\n *\n * @param {Object} date Date object\n */\nCalendar.prototype.setStartDate = function (date) {\n\tthis.startDate = date;\n};\n\n/**\n * Sets the selected period end\n *\n * @param {Object} date Date object\n */\nCalendar.prototype.setEndDate = function (date) {\n\tthis.endDate = date;\n};\n\n/**\n * Sets one selected date\n *\n * @param {Object} date Date object\n */\nCalendar.prototype.setDate = Calendar.prototype.setStartDate;\n\n/**\n * Calculates the difference between two dates (date1 - date2), in days\n *\n * @param {Object} date1 Date object\n * @param {Object} date2 Date object\n * @return {Number} Days between the dates\n */\nCalendar.diff = function (date1, date2) {\n\tvar oDate1 = new Date(1986, 9, 14, 0, 0, 0), oDate2 = new Date(1986, 9, 14, 0, 0, 0);\n\n\toDate1.setUTCFullYear(date1.year);\n\toDate1.setUTCMonth(date1.month);\n\toDate1.setUTCDate(date1.day);\n\n\toDate2.setUTCFullYear(date2.year);\n\toDate2.setUTCMonth(date2.month);\n\toDate2.setUTCDate(date2.day);\n\n\treturn Math.ceil((oDate1.getTime() - oDate2.getTime()) / 86400000);\n};\n\n/**\n * Calculates the interval between two dates\n *\n * @param {Object} date1 Date object\n * @param {Object} date2 Date object\n * @return {Number} Number of days\n */\nCalendar.interval = function (date1, date2) {\n\treturn Math.abs(Calendar.diff(date1, date2)) + 1;\n};\n\n/**\n * Calculates the number of days in a month\n *\n * @param {Number} year Year\n * @param {Number} month Month [0-11]\n * @return {Number} Length of the month\n */\nCalendar.daysInMonth = function (year, month) {\n\treturn new Date(year, month + 1, 0).getDate();\n};\n\n/**\n * Calculates if a given year is a leap year\n *\n * @param {Number} year Year\n * @return {Boolean} Leap year or not\n */\nCalendar.isLeapYear = function (year) {\n\treturn ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);\n}\n\n/**\n * Calculates the week number for a given date\n *\n * @param {Object} date Date object\n * @return {Number} Week number\n */\n// Adapted from http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html\nCalendar.calculateWeekNumber = function (date) {\n\t// Creates the requested date\n\tvar current = new Date(1986, 9, 14, 0, 0, 0);\n\tcurrent.setUTCFullYear(date.year);\n\tcurrent.setUTCMonth(date.month);\n\tcurrent.setUTCDate(date.day);\n\n\t// Create a copy of the object\n\tvar target = new Date(current.valueOf());\n\n\t// ISO week date weeks start on monday so correct the day number\n\tvar dayNr = (current.getUTCDay() + 6) % 7;\n\n\t// ISO 8601 states that week 1 is the week with the first thursday of that\n\t// year. Set the target date to the thursday in the target week.\n\ttarget.setUTCDate(target.getUTCDate() - dayNr + 3);\n\n\t// Store the millisecond value of the target date\n\tvar firstThursday = target.valueOf();\n\n\t// Set the target to the first thursday of the year\n\n\t// First set the target to january first\n\ttarget.setUTCMonth(0, 1);\n\n\t// Not a thursday? Correct the date to the next thursday\n\tif (target.getUTCDay() != 4) {\n\t\ttarget.setUTCMonth(0, 1 + ((4 - target.getUTCDay()) + 7) % 7);\n\t}\n\n\t// The weeknumber is the number of weeks between the first thursday of the\n\t// year and the thursday in the target week.\n\t// 604800000 = 7 * 24 * 3600 * 1000\n\treturn 1 + Math.ceil((firstThursday - target) / 604800000);\n}\n\n/**\n * Exports the Calendar\n */\nmodule.exports = { Calendar: Calendar };\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/calendar-base/lib/calendar-base.js\n ** module id = 2\n ** module chunks = 0\n **/","/*!\n Copyright (c) 2016 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tclasses.push(classNames.apply(null, arg));\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/classnames/index.js\n ** module id = 3\n ** module chunks = 0\n **/","import React from 'react';\r\nimport classnames from 'classnames';\r\n\r\nexport default class CalendarDay extends React.Component {\r\n render () {\r\n const { day, isToday, events, onClick } = this.props;\r\n const dayClasses = classnames({\r\n 'flexColumn': true,\r\n 'day': true,\r\n 'inactive': day.siblingMonth,\r\n 'today': isToday,\r\n });\r\n\r\n return (\r\n
\r\n
\r\n
\r\n {day.day}\r\n
\r\n {events}\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nCalendarDay.propTypes = {\r\n day: React.PropTypes.object.isRequired,\r\n isToday: React.PropTypes.bool,\r\n events: React.PropTypes.array,\r\n onClick: React.PropTypes.func,\r\n};\r\n\r\nCalendarDay.defaultProps = {\r\n onClick: () => {},\r\n}\r\n\r\nexport default CalendarDay;\r\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/CalendarDay.js\n **/","import React from 'react';\r\nimport classnames from 'classnames';\r\n\r\n\r\nclass CalendarEvent extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.sharedArguments = [null, this, this.props.eventData, this.props.day];\r\n // Bind methods\r\n this.handleClick = this.handleClick.bind(this);\r\n }\r\n\r\n handleClick(e) {\r\n this.props.onClick(...this.sharedArguments.slice(1));\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n // Return a placeholder element if there is no event data \r\n if(!this.props.eventData) {\r\n return
;\r\n }\r\n\r\n const showLabel = this.props.eventData.isFirstDay || (this.props.day.weekDay === 0 && this.props.wrapTitle);\r\n const title = showLabel ? this.props.eventData.title : '';\r\n\r\n const eventClasses = classnames({\r\n 'event-slot': true,\r\n 'event': true,\r\n 'event-first-day': this.props.eventData.isFirstDay,\r\n 'event-last-day': this.props.eventData.isLastDay,\r\n 'event-has-label': showLabel,\r\n }, this.props.eventData.eventClasses);\r\n\r\n\r\n return (\r\n
\r\n
\r\n {title} \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nCalendarEvent.propTypes = {\r\n day: React.PropTypes.object.isRequired,\r\n eventData: React.PropTypes.oneOfType([\r\n React.PropTypes.object,\r\n React.PropTypes.bool,\r\n ]),\r\n onClick: React.PropTypes.func,\r\n onMouseOut: React.PropTypes.func,\r\n onMouseOver: React.PropTypes.func,\r\n wrapTitle: React.PropTypes.bool,\r\n};\r\n\r\nCalendarEvent.defaultProps = {\r\n onClick: () => {},\r\n onMouseOut: () => {},\r\n onMouseOver: () => {},\r\n}\r\n\r\nexport default CalendarEvent;\r\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/CalendarEvent.js\n **/","import React from 'react';\r\n\r\nconst CalendarTitle = ({title}) => {\r\n return (\r\n
\r\n {title}\r\n
\r\n )\r\n}\r\n\r\nCalendarTitle.propTypes = {\r\n title: React.PropTypes.string.isRequired,\r\n};\r\n\r\nexport default CalendarTitle;\r\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/CalendarTitle.js\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/react-event-calendar.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.ReactEventCalender=t(require("react")):e.ReactEventCalender=t(e.React)}(this,function(e){return function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;nthis.props.month&&(i.isVisibleInView=!0),a&&r?i.visibleEventLength=f.Calendar.interval(t,n):!a&&r?i.visibleEventLength=f.Calendar.interval(o,n):a&&!r&&(i.visibleEventLength=f.Calendar.interval(t,s)),i}},{key:"getDaysWithEvents",value:function(){var e=this,t=this.getCalendarDays();return this.calendar.setStartDate(t[0]),this.calendar.setEndDate(t[t.length-1]),this.props.events.forEach(function(n){var a=e.getCalendarDayObject(n.start),r=e.getCalendarDayObject(n.end),o=e.getEventMeta(t,a,r);if(o.isVisibleInView)for(var s=o.visibleEventLength,i=t[o.firstVisibleDayIndex].eventSlots.indexOf(!1),u=0;s>u;){var l=Object.assign({},n);0===u&&(l.isFirstDay=!0),u===s-1&&(l.isLastDay=!0),l.isFirstDay&&l.isLastDay||(l.isBetweenDay=!0),t[o.firstVisibleDayIndex+u].eventSlots[i]=l,u++}}),t}},{key:"getCalendarDayObject",value:function(e){var t=e.split("-");return{year:t[0],month:t[1]-1,day:t[2]}}},{key:"getLastIndexOfEvent",value:function(e){var t=e.map(function(e,t){return e!==!1?t:!1}).filter(function(e){return e}).pop();return 3>t||void 0===t?2:t}},{key:"getSerializedDay",value:function(e){return[e.weekDay,e.day,e.month,e.year].join("")}},{key:"renderDaysOfTheWeek",value:function(){return this.props.daysOfTheWeek.map(function(e,t){return l["default"].createElement(b["default"],{key:"title_"+t,title:e})})}},{key:"renderEvents",value:function(e){var t=this,n=e.eventSlots.slice(0,this.getLastIndexOfEvent(e.eventSlots)+1);return n.map(function(n,a){return l["default"].createElement(h["default"],{key:"event_"+a+t.getSerializedDay(e),day:e,eventData:n,onClick:t.props.onEventClick,onMouseOut:t.props.onEventMouseOut,onMouseOver:t.props.onEventMouseOver,wrapTitle:t.props.wrapTitle})})}},{key:"renderCalendarDays",value:function(){var e=this;return this.getDaysWithEvents().map(function(t,n){var a=1===f.Calendar.interval(t,e.state.today),r=e.renderEvents(t);return l["default"].createElement(c["default"],{key:"day_"+e.getSerializedDay(t),day:t,events:r,isToday:a,onClick:e.props.onDayClick})})}},{key:"render",value:function(){return l["default"].createElement("div",{className:"flexContainer"},this.renderDaysOfTheWeek(),this.renderCalendarDays())}}]),t}(l["default"].Component);D.propTypes={daysOfTheWeek:l["default"].PropTypes.array,events:l["default"].PropTypes.array,maxEventSlots:l["default"].PropTypes.number,month:l["default"].PropTypes.number.isRequired,onEventClick:l["default"].PropTypes.func,onEventMouseOut:l["default"].PropTypes.func,onEventMouseOver:l["default"].PropTypes.func,onDayClick:l["default"].PropTypes.func,wrapTitle:l["default"].PropTypes.bool,year:l["default"].PropTypes.number.isRequired},D.defaultProps={daysOfTheWeek:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],events:[],wrapTitle:!0,maxEventSlots:10},t["default"]=D},function(t,n){t.exports=e},function(e,t){function n(e){e=e||{},this.startDate=e.startDate,this.endDate=e.endDate,this.siblingMonths=e.siblingMonths,this.weekNumbers=e.weekNumbers,this.weekStart=e.weekStart,void 0===this.weekStart&&(this.weekStart=0),this.date=new Date(1986,9,14,0,0,0)}n.prototype.getCalendar=function(e,t){this.date.setUTCFullYear(e),this.date.setUTCMonth(t),this.date.setUTCDate(1),e=this.date.getUTCFullYear(),t=this.date.getUTCMonth();for(var a,r,o,s,i,u=[],l=this.date.getUTCDay(),f=-((7-this.weekStart+l)%7),p=n.daysInMonth(e,t),d=(p-f)%7,c=n.daysInMonth(e,t-1),y=f,h=p-y+(0!=d?7-d:0)+f,v=null;h>y;)r=y+1,a=((1>y?7+y:y)+l)%7,1>r||r>p?this.siblingMonths?(1>r?(s=t-1,i=e,0>s&&(s=11,i--),r=c+r):r>p&&(s=t+1,i=e,s>11&&(s=0,i++),r=y-p+1),o={day:r,weekDay:a,month:s,year:i,siblingMonth:!0}):o=!1:o={day:r,weekDay:a,month:t,year:e},o&&this.weekNumbers&&(null===v?v=n.calculateWeekNumber(o):1==a&&52==v?v=1:1==a&&v++,o.weekNumber=v),o&&this.startDate&&(o.selected=this.isDateSelected(o)),u.push(o),y++;return u},n.prototype.isDateSelected=function(e){return e.year==this.startDate.year&&e.month==this.startDate.month&&e.day==this.startDate.day?!0:this.endDate?e.year==this.startDate.year&&e.month==this.startDate.month&&e.daythis.endDate.day?!1:e.year==this.startDate.year&&e.monththis.endDate.month?!1:e.yearthis.endDate.year):!1},n.prototype.setStartDate=function(e){this.startDate=e},n.prototype.setEndDate=function(e){this.endDate=e},n.prototype.setDate=n.prototype.setStartDate,n.diff=function(e,t){var n=new Date(1986,9,14,0,0,0),a=new Date(1986,9,14,0,0,0);return n.setUTCFullYear(e.year),n.setUTCMonth(e.month),n.setUTCDate(e.day),a.setUTCFullYear(t.year),a.setUTCMonth(t.month),a.setUTCDate(t.day),Math.ceil((n.getTime()-a.getTime())/864e5)},n.interval=function(e,t){return Math.abs(n.diff(e,t))+1},n.daysInMonth=function(e,t){return new Date(e,t+1,0).getDate()},n.isLeapYear=function(e){return e%4==0&&e%100!=0||e%400==0},n.calculateWeekNumber=function(e){var t=new Date(1986,9,14,0,0,0);t.setUTCFullYear(e.year),t.setUTCMonth(e.month),t.setUTCDate(e.day);var n=new Date(t.valueOf()),a=(t.getUTCDay()+6)%7;n.setUTCDate(n.getUTCDate()-a+3);var r=n.valueOf();return n.setUTCMonth(0,1),4!=n.getUTCDay()&&n.setUTCMonth(0,1+(4-n.getUTCDay()+7)%7),1+Math.ceil((r-n)/6048e5)},e.exports={Calendar:n}},function(e,t,n){var a,r;/*! 2 | Copyright (c) 2016 Jed Watson. 3 | Licensed under the MIT License (MIT), see 4 | http://jedwatson.github.io/classnames 5 | */ 6 | !function(){"use strict";function n(){for(var e=[],t=0;t this.props.month) {\n\t // Asserts at least part of month is\n\t eventMeta.isVisibleInView = true;\n\t }\n\t\n\t // Determine the visible length of the event during the month\n\t if (eventStartInView && eventEndInView) {\n\t eventMeta.visibleEventLength = _calendarBase.Calendar.interval(eventStart, eventEnd);\n\t } else if (!eventStartInView && eventEndInView) {\n\t eventMeta.visibleEventLength = _calendarBase.Calendar.interval(firstDayOfMonth, eventEnd);\n\t } else if (eventStartInView && !eventEndInView) {\n\t eventMeta.visibleEventLength = _calendarBase.Calendar.interval(eventStart, lastDayOfMonth);\n\t }\n\t\n\t return eventMeta;\n\t }\n\t }, {\n\t key: 'getDaysWithEvents',\n\t value: function getDaysWithEvents() {\n\t var _this3 = this;\n\t\n\t // Get all the days in this months calendar view\n\t // Sibling Months included\n\t var days = this.getCalendarDays();\n\t\n\t // Set Range Limits on calendar\n\t this.calendar.setStartDate(days[0]);\n\t this.calendar.setEndDate(days[days.length - 1]);\n\t\n\t // Iterate over each of the supplied events\n\t this.props.events.forEach(function (eventItem) {\n\t\n\t var eventStart = _this3.getCalendarDayObject(eventItem.start);\n\t var eventEnd = _this3.getCalendarDayObject(eventItem.end);\n\t var eventMeta = _this3.getEventMeta(days, eventStart, eventEnd);\n\t\n\t if (eventMeta.isVisibleInView) {\n\t var eventLength = eventMeta.visibleEventLength;\n\t var eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false);\n\t var dayIndex = 0;\n\t\n\t // For each day in the event\n\t while (dayIndex < eventLength) {\n\t // Clone the event object so we acn add day specfic data\n\t var eventData = Object.assign({}, eventItem);\n\t\n\t if (dayIndex === 0) {\n\t // Flag first day of event\n\t eventData.isFirstDay = true;\n\t }\n\t\n\t if (dayIndex === eventLength - 1) {\n\t // Flag last day of event\n\t eventData.isLastDay = true;\n\t }\n\t\n\t if (!eventData.isFirstDay || !eventData.isLastDay) {\n\t // Flag between day of event\n\t eventData.isBetweenDay = true;\n\t }\n\t\n\t // Apply Event Data to the correct slot for that day\n\t days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots[eventSlotIndex] = eventData;\n\t\n\t // Move to next day of event\n\t dayIndex++;\n\t }\n\t }\n\t });\n\t\n\t return days;\n\t }\n\t }, {\n\t key: 'getCalendarDayObject',\n\t value: function getCalendarDayObject(date) {\n\t var dateArray = date.split('-');\n\t return {\n\t year: dateArray[0],\n\t // Subtract 1 from month to allow for human declared months\n\t month: dateArray[1] - 1,\n\t day: dateArray[2]\n\t };\n\t }\n\t }, {\n\t key: 'getLastIndexOfEvent',\n\t value: function getLastIndexOfEvent(slots) {\n\t\n\t var lastIndexOfEvent = slots.map(function (slot, index) {\n\t return slot !== false ? index : false;\n\t }).filter(function (element) {\n\t return element;\n\t }).pop();\n\t\n\t return lastIndexOfEvent < 3 || lastIndexOfEvent === undefined ? 2 : lastIndexOfEvent;\n\t }\n\t }, {\n\t key: 'getSerializedDay',\n\t value: function getSerializedDay(day) {\n\t return [day.weekDay, day.day, day.month, day.year].join('');\n\t }\n\t }, {\n\t key: 'renderDaysOfTheWeek',\n\t value: function renderDaysOfTheWeek() {\n\t return this.props.daysOfTheWeek.map(function (title, index) {\n\t return _react2.default.createElement(_CalendarTitle2.default, {\n\t key: 'title_' + index,\n\t title: title\n\t });\n\t });\n\t }\n\t }, {\n\t key: 'renderEvents',\n\t value: function renderEvents(day) {\n\t var _this4 = this;\n\t\n\t // Trim excess slots\n\t var eventSlots = day.eventSlots.slice(0, this.getLastIndexOfEvent(day.eventSlots) + 1);\n\t\n\t return eventSlots.map(function (eventData, index) {\n\t return _react2.default.createElement(_CalendarEvent2.default, {\n\t key: 'event_' + index + _this4.getSerializedDay(day),\n\t day: day,\n\t eventData: eventData,\n\t onClick: _this4.props.onEventClick,\n\t onMouseOut: _this4.props.onEventMouseOut,\n\t onMouseOver: _this4.props.onEventMouseOver,\n\t wrapTitle: _this4.props.wrapTitle\n\t });\n\t });\n\t }\n\t }, {\n\t key: 'renderCalendarDays',\n\t value: function renderCalendarDays() {\n\t var _this5 = this;\n\t\n\t return this.getDaysWithEvents().map(function (day, index) {\n\t var isToday = _calendarBase.Calendar.interval(day, _this5.state.today) === 1;\n\t var events = _this5.renderEvents(day);\n\t\n\t return _react2.default.createElement(_CalendarDay2.default, {\n\t key: 'day_' + _this5.getSerializedDay(day),\n\t day: day,\n\t events: events,\n\t isToday: isToday,\n\t onClick: _this5.props.onDayClick\n\t });\n\t });\n\t }\n\t }, {\n\t key: 'render',\n\t value: function render() {\n\t return _react2.default.createElement(\n\t 'div',\n\t { className: 'flexContainer' },\n\t this.renderDaysOfTheWeek(),\n\t this.renderCalendarDays()\n\t );\n\t }\n\t }]);\n\t\n\t return EventCalendar;\n\t}(_react2.default.Component);\n\t\n\tEventCalendar.propTypes = {\n\t daysOfTheWeek: _react2.default.PropTypes.array,\n\t events: _react2.default.PropTypes.array,\n\t maxEventSlots: _react2.default.PropTypes.number,\n\t month: _react2.default.PropTypes.number.isRequired,\n\t onEventClick: _react2.default.PropTypes.func,\n\t onEventMouseOut: _react2.default.PropTypes.func,\n\t onEventMouseOver: _react2.default.PropTypes.func,\n\t onDayClick: _react2.default.PropTypes.func,\n\t wrapTitle: _react2.default.PropTypes.bool,\n\t year: _react2.default.PropTypes.number.isRequired\n\t\n\t};\n\t\n\tEventCalendar.defaultProps = {\n\t daysOfTheWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n\t events: [],\n\t wrapTitle: true,\n\t maxEventSlots: 10\n\t};\n\t\n\texports.default = EventCalendar;\n\n/***/ },\n/* 1 */\n/***/ function(module, exports) {\n\n\tmodule.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n/***/ },\n/* 2 */\n/***/ function(module, exports) {\n\n\t/**\n\t * Calendar constructor\n\t *\n\t * @param {Object} options Calendar options\n\t * @param {Object} options.startDate Date object indicating the selected start date\n\t * @param {Object} options.endDate Date object indicating the selected end date\n\t * @param {Boolean} options.siblingMonths Calculate dates from sibling months (before and after the current month, based on weekStart)\n\t * @param {Boolean} options.weekNumbers Caclulate the week days\n\t * @param {Number} options.weekStart Day of the week to start the calendar, respects `Date.prototype.getDay` (defaults to `0`, Sunday)\n\t */\n\tfunction Calendar (options) {\n\t\toptions = options || {};\n\t\n\t\tthis.startDate = options.startDate;\n\t\tthis.endDate = options.endDate;\n\t\tthis.siblingMonths = options.siblingMonths;\n\t\tthis.weekNumbers = options.weekNumbers;\n\t\tthis.weekStart = options.weekStart;\n\t\n\t\tif (this.weekStart === undefined) {\n\t\t\tthis.weekStart = 0;\n\t\t}\n\t\n\t\tthis.date = new Date(1986, 9, 14, 0, 0, 0);\n\t}\n\t\n\t/**\n\t * Calculate a calendar month\n\t *\n\t * @param {Number} year Year\n\t * @param {Number} month Month [0-11]\n\t * @return {Array} Calendar days\n\t */\n\tCalendar.prototype.getCalendar = function (year, month) {\n\t\tthis.date.setUTCFullYear(year);\n\t\tthis.date.setUTCMonth(month);\n\t\tthis.date.setUTCDate(1);\n\t\n\t\tyear = this.date.getUTCFullYear();\n\t\tmonth = this.date.getUTCMonth();\n\t\n\t\tvar calendar = [],\n\t\t\tfirstDay = this.date.getUTCDay(),\n\t\n\t\t\tfirstDate = - (((7 - this.weekStart) + firstDay) % 7),\n\t\t\tlastDate = Calendar.daysInMonth(year, month),\n\t\t\tlastDay = ((lastDate - firstDate) % 7),\n\t\t\tlastDatePreviousMonth = Calendar.daysInMonth(year, month - 1),\n\t\t\ti = firstDate,\n\t\t\tmax = (lastDate - i) + (lastDay != 0 ? 7 - lastDay : 0) + firstDate,\n\t\t\tcurrentDay,\n\t\t\tcurrentDate,\n\t\t\tcurrentDateObject,\n\t\t\tcurrentWeekNumber = null,\n\t\t\totherMonth,\n\t\t\totherYear;\n\t\n\t\twhile (i < max) {\n\t\t\tcurrentDate = i + 1;\n\t\t\tcurrentDay = ((i < 1 ? 7 + i : i) + firstDay) % 7;\n\t\t\tif (currentDate < 1 || currentDate > lastDate) {\n\t\t\t\tif (this.siblingMonths) {\n\t\t\t\t\tif (currentDate < 1) {\n\t\t\t\t\t\totherMonth = month - 1;\n\t\t\t\t\t\totherYear = year;\n\t\t\t\t\t\tif (otherMonth < 0) {\n\t\t\t\t\t\t\totherMonth = 11;\n\t\t\t\t\t\t\totherYear --;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcurrentDate = lastDatePreviousMonth + currentDate;\n\t\t\t\t\t}\n\t\t\t\t\telse if (currentDate > lastDate) {\n\t\t\t\t\t\totherMonth = month + 1;\n\t\t\t\t\t\totherYear = year;\n\t\t\t\t\t\tif (otherMonth > 11) {\n\t\t\t\t\t\t\totherMonth = 0;\n\t\t\t\t\t\t\totherYear ++;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcurrentDate = i - lastDate + 1;\n\t\t\t\t\t}\n\t\t\t\t\tcurrentDateObject = {\n\t\t\t\t\t\tday: currentDate,\n\t\t\t\t\t\tweekDay: currentDay,\n\t\t\t\t\t\tmonth: otherMonth,\n\t\t\t\t\t\tyear: otherYear,\n\t\t\t\t\t\tsiblingMonth: true\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\tcurrentDateObject = false;\n\t\t\t\t}\n\t\t\t}\n\t\t\telse {\n\t\t\t\tcurrentDateObject = {\n\t\t\t\t\tday: currentDate,\n\t\t\t\t\tweekDay: currentDay,\n\t\t\t\t\tmonth: month,\n\t\t\t\t\tyear: year\n\t\t\t\t};\n\t\t\t}\n\t\n\t\t\tif (currentDateObject && this.weekNumbers) {\n\t\t\t\tif (currentWeekNumber === null) {\n\t\t\t\t\tcurrentWeekNumber = Calendar.calculateWeekNumber(currentDateObject);\n\t\t\t\t}\n\t\t\t\telse if (currentDay == 1 && currentWeekNumber == 52) {\n\t\t\t\t\tcurrentWeekNumber = 1;\n\t\t\t\t}\n\t\t\t\telse if (currentDay == 1) {\n\t\t\t\t\tcurrentWeekNumber ++;\n\t\t\t\t}\n\t\t\t\tcurrentDateObject.weekNumber = currentWeekNumber;\n\t\t\t}\n\t\n\t\t\tif (currentDateObject && this.startDate) {\n\t\t\t\tcurrentDateObject.selected = this.isDateSelected(currentDateObject);\n\t\t\t}\n\t\n\t\t\tcalendar.push(currentDateObject);\n\t\t\ti ++;\n\t\t}\n\t\n\t\treturn calendar;\n\t};\n\t\n\t/**\n\t * Checks if a date is selected\n\t *\n\t * @param {Object} date Date object\n\t * @return {Boolean} Selected status of the date\n\t */\n\tCalendar.prototype.isDateSelected = function (date) {\n\t\tif (date.year == this.startDate.year && date.month == this.startDate.month && date.day == this.startDate.day) {\n\t\t\treturn true;\n\t\t}\n\t\telse if (this.endDate) {\n\t\t\tif (date.year == this.startDate.year && date.month == this.startDate.month && date.day < this.startDate.day) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\telse if (date.year == this.endDate.year && date.month == this.endDate.month && date.day > this.endDate.day) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\telse if (date.year == this.startDate.year && date.month < this.startDate.month) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\telse if (date.year == this.endDate.year && date.month > this.endDate.month) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\telse if (date.year < this.startDate.year) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\telse if (date.year > this.endDate.year) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t};\n\t\n\t/**\n\t * Sets the selected period start\n\t *\n\t * @param {Object} date Date object\n\t */\n\tCalendar.prototype.setStartDate = function (date) {\n\t\tthis.startDate = date;\n\t};\n\t\n\t/**\n\t * Sets the selected period end\n\t *\n\t * @param {Object} date Date object\n\t */\n\tCalendar.prototype.setEndDate = function (date) {\n\t\tthis.endDate = date;\n\t};\n\t\n\t/**\n\t * Sets one selected date\n\t *\n\t * @param {Object} date Date object\n\t */\n\tCalendar.prototype.setDate = Calendar.prototype.setStartDate;\n\t\n\t/**\n\t * Calculates the difference between two dates (date1 - date2), in days\n\t *\n\t * @param {Object} date1 Date object\n\t * @param {Object} date2 Date object\n\t * @return {Number} Days between the dates\n\t */\n\tCalendar.diff = function (date1, date2) {\n\t\tvar oDate1 = new Date(1986, 9, 14, 0, 0, 0), oDate2 = new Date(1986, 9, 14, 0, 0, 0);\n\t\n\t\toDate1.setUTCFullYear(date1.year);\n\t\toDate1.setUTCMonth(date1.month);\n\t\toDate1.setUTCDate(date1.day);\n\t\n\t\toDate2.setUTCFullYear(date2.year);\n\t\toDate2.setUTCMonth(date2.month);\n\t\toDate2.setUTCDate(date2.day);\n\t\n\t\treturn Math.ceil((oDate1.getTime() - oDate2.getTime()) / 86400000);\n\t};\n\t\n\t/**\n\t * Calculates the interval between two dates\n\t *\n\t * @param {Object} date1 Date object\n\t * @param {Object} date2 Date object\n\t * @return {Number} Number of days\n\t */\n\tCalendar.interval = function (date1, date2) {\n\t\treturn Math.abs(Calendar.diff(date1, date2)) + 1;\n\t};\n\t\n\t/**\n\t * Calculates the number of days in a month\n\t *\n\t * @param {Number} year Year\n\t * @param {Number} month Month [0-11]\n\t * @return {Number} Length of the month\n\t */\n\tCalendar.daysInMonth = function (year, month) {\n\t\treturn new Date(year, month + 1, 0).getDate();\n\t};\n\t\n\t/**\n\t * Calculates if a given year is a leap year\n\t *\n\t * @param {Number} year Year\n\t * @return {Boolean} Leap year or not\n\t */\n\tCalendar.isLeapYear = function (year) {\n\t\treturn ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);\n\t}\n\t\n\t/**\n\t * Calculates the week number for a given date\n\t *\n\t * @param {Object} date Date object\n\t * @return {Number} Week number\n\t */\n\t// Adapted from http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html\n\tCalendar.calculateWeekNumber = function (date) {\n\t\t// Creates the requested date\n\t\tvar current = new Date(1986, 9, 14, 0, 0, 0);\n\t\tcurrent.setUTCFullYear(date.year);\n\t\tcurrent.setUTCMonth(date.month);\n\t\tcurrent.setUTCDate(date.day);\n\t\n\t\t// Create a copy of the object\n\t\tvar target = new Date(current.valueOf());\n\t\n\t\t// ISO week date weeks start on monday so correct the day number\n\t\tvar dayNr = (current.getUTCDay() + 6) % 7;\n\t\n\t\t// ISO 8601 states that week 1 is the week with the first thursday of that\n\t\t// year. Set the target date to the thursday in the target week.\n\t\ttarget.setUTCDate(target.getUTCDate() - dayNr + 3);\n\t\n\t\t// Store the millisecond value of the target date\n\t\tvar firstThursday = target.valueOf();\n\t\n\t\t// Set the target to the first thursday of the year\n\t\n\t\t// First set the target to january first\n\t\ttarget.setUTCMonth(0, 1);\n\t\n\t\t// Not a thursday? Correct the date to the next thursday\n\t\tif (target.getUTCDay() != 4) {\n\t\t\ttarget.setUTCMonth(0, 1 + ((4 - target.getUTCDay()) + 7) % 7);\n\t\t}\n\t\n\t\t// The weeknumber is the number of weeks between the first thursday of the\n\t\t// year and the thursday in the target week.\n\t\t// 604800000 = 7 * 24 * 3600 * 1000\n\t\treturn 1 + Math.ceil((firstThursday - target) / 604800000);\n\t}\n\t\n\t/**\n\t * Exports the Calendar\n\t */\n\tmodule.exports = { Calendar: Calendar };\n\n\n/***/ },\n/* 3 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!\n\t Copyright (c) 2016 Jed Watson.\n\t Licensed under the MIT License (MIT), see\n\t http://jedwatson.github.io/classnames\n\t*/\n\t/* global define */\n\t\n\t(function () {\n\t\t'use strict';\n\t\n\t\tvar hasOwn = {}.hasOwnProperty;\n\t\n\t\tfunction classNames () {\n\t\t\tvar classes = [];\n\t\n\t\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\t\tvar arg = arguments[i];\n\t\t\t\tif (!arg) continue;\n\t\n\t\t\t\tvar argType = typeof arg;\n\t\n\t\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\t\tclasses.push(arg);\n\t\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\t\tclasses.push(classNames.apply(null, arg));\n\t\t\t\t} else if (argType === 'object') {\n\t\t\t\t\tfor (var key in arg) {\n\t\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\n\t\t\treturn classes.join(' ');\n\t\t}\n\t\n\t\tif (typeof module !== 'undefined' && module.exports) {\n\t\t\tmodule.exports = classNames;\n\t\t} else if (true) {\n\t\t\t// register as 'classnames', consistent with npm package name\n\t\t\t!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {\n\t\t\t\treturn classNames;\n\t\t\t}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\t\t} else {\n\t\t\twindow.classNames = classNames;\n\t\t}\n\t}());\n\n\n/***/ },\n/* 4 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\t\n\tvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\t\n\tvar _react = __webpack_require__(1);\n\t\n\tvar _react2 = _interopRequireDefault(_react);\n\t\n\tvar _classnames = __webpack_require__(3);\n\t\n\tvar _classnames2 = _interopRequireDefault(_classnames);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\tfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\t\n\tfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\t\n\tfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\t\n\tvar CalendarDay = function (_React$Component) {\n\t _inherits(CalendarDay, _React$Component);\n\t\n\t function CalendarDay() {\n\t _classCallCheck(this, CalendarDay);\n\t\n\t return _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarDay).apply(this, arguments));\n\t }\n\t\n\t _createClass(CalendarDay, [{\n\t key: 'render',\n\t value: function render() {\n\t var _props = this.props;\n\t var day = _props.day;\n\t var isToday = _props.isToday;\n\t var events = _props.events;\n\t var onClick = _props.onClick;\n\t\n\t var dayClasses = (0, _classnames2.default)({\n\t 'flexColumn': true,\n\t 'day': true,\n\t 'inactive': day.siblingMonth,\n\t 'today': isToday\n\t });\n\t\n\t return _react2.default.createElement(\n\t 'div',\n\t {\n\t onClick: onClick.bind(null, this, day),\n\t className: dayClasses },\n\t _react2.default.createElement(\n\t 'div',\n\t { className: 'inner-grid' },\n\t _react2.default.createElement(\n\t 'div',\n\t { className: 'date' },\n\t day.day\n\t ),\n\t events\n\t )\n\t );\n\t }\n\t }]);\n\t\n\t return CalendarDay;\n\t}(_react2.default.Component);\n\t\n\texports.default = CalendarDay;\n\t\n\t\n\tCalendarDay.propTypes = {\n\t day: _react2.default.PropTypes.object.isRequired,\n\t isToday: _react2.default.PropTypes.bool,\n\t events: _react2.default.PropTypes.array,\n\t onClick: _react2.default.PropTypes.func\n\t};\n\t\n\tCalendarDay.defaultProps = {\n\t onClick: function onClick() {}\n\t};\n\t\n\texports.default = CalendarDay;\n\n/***/ },\n/* 5 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\t\n\tvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\t\n\tvar _react = __webpack_require__(1);\n\t\n\tvar _react2 = _interopRequireDefault(_react);\n\t\n\tvar _classnames = __webpack_require__(3);\n\t\n\tvar _classnames2 = _interopRequireDefault(_classnames);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\tfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\t\n\tfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\t\n\tfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\t\n\tfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\t\n\tvar CalendarEvent = function (_React$Component) {\n\t _inherits(CalendarEvent, _React$Component);\n\t\n\t function CalendarEvent(props) {\n\t _classCallCheck(this, CalendarEvent);\n\t\n\t var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CalendarEvent).call(this, props));\n\t\n\t _this.sharedArguments = [null, _this, _this.props.eventData, _this.props.day];\n\t // Bind methods\n\t _this.handleClick = _this.handleClick.bind(_this);\n\t return _this;\n\t }\n\t\n\t _createClass(CalendarEvent, [{\n\t key: 'handleClick',\n\t value: function handleClick(e) {\n\t var _props;\n\t\n\t (_props = this.props).onClick.apply(_props, _toConsumableArray(this.sharedArguments.slice(1)));\n\t e.stopPropagation();\n\t }\n\t }, {\n\t key: 'render',\n\t value: function render() {\n\t var _props$onMouseOut, _props$onMouseOver;\n\t\n\t // Return a placeholder element if there is no event data\n\t if (!this.props.eventData) {\n\t return _react2.default.createElement('div', { className: 'event-slot' });\n\t }\n\t\n\t var showLabel = this.props.eventData.isFirstDay || this.props.day.weekDay === 0 && this.props.wrapTitle;\n\t var title = showLabel ? this.props.eventData.title : '';\n\t\n\t var eventClasses = (0, _classnames2.default)({\n\t 'event-slot': true,\n\t 'event': true,\n\t 'event-first-day': this.props.eventData.isFirstDay,\n\t 'event-last-day': this.props.eventData.isLastDay,\n\t 'event-has-label': showLabel\n\t }, this.props.eventData.eventClasses);\n\t\n\t return _react2.default.createElement(\n\t 'div',\n\t { className: eventClasses,\n\t onClick: this.handleClick,\n\t onMouseOut: (_props$onMouseOut = this.props.onMouseOut).bind.apply(_props$onMouseOut, _toConsumableArray(this.sharedArguments)),\n\t onMouseOver: (_props$onMouseOver = this.props.onMouseOver).bind.apply(_props$onMouseOver, _toConsumableArray(this.sharedArguments))\n\t },\n\t _react2.default.createElement(\n\t 'div',\n\t { className: 'event-title' },\n\t title\n\t )\n\t );\n\t }\n\t }]);\n\t\n\t return CalendarEvent;\n\t}(_react2.default.Component);\n\t\n\tCalendarEvent.propTypes = {\n\t day: _react2.default.PropTypes.object.isRequired,\n\t eventData: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.object, _react2.default.PropTypes.bool]),\n\t onClick: _react2.default.PropTypes.func,\n\t onMouseOut: _react2.default.PropTypes.func,\n\t onMouseOver: _react2.default.PropTypes.func,\n\t wrapTitle: _react2.default.PropTypes.bool\n\t};\n\t\n\tCalendarEvent.defaultProps = {\n\t onClick: function onClick() {},\n\t onMouseOut: function onMouseOut() {},\n\t onMouseOver: function onMouseOver() {}\n\t};\n\t\n\texports.default = CalendarEvent;\n\n/***/ },\n/* 6 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\t\n\tvar _react = __webpack_require__(1);\n\t\n\tvar _react2 = _interopRequireDefault(_react);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\tvar CalendarTitle = function CalendarTitle(_ref) {\n\t var title = _ref.title;\n\t\n\t return _react2.default.createElement(\n\t \"div\",\n\t { className: \"flexColumn\" },\n\t title\n\t );\n\t};\n\t\n\tCalendarTitle.propTypes = {\n\t title: _react2.default.PropTypes.string.isRequired\n\t};\n\t\n\texports.default = CalendarTitle;\n\n/***/ }\n/******/ ])\n});\n;\n\n\n/** WEBPACK FOOTER **\n ** react-event-calendar.min.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap f97ce43a516ef0d50f53\n **/","import React from 'react';\r\nimport {Calendar} from 'calendar-base';\r\nimport classnames from 'classnames';\r\n\r\nimport CalendarDay from './components/CalendarDay';\r\nimport CalendarEvent from './components/CalendarEvent';\r\nimport CalendarTitle from './components/CalendarTitle';\r\n\r\nclass EventCalendar extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this._eventTargets = {};\r\n\r\n this.state = {\r\n today: this.getToday(),\r\n };\r\n \r\n this.calendar = new Calendar({siblingMonths: true, });\r\n\r\n // Bind methods\r\n this.getCalendarDays = this.getCalendarDays.bind(this);\r\n this.getDaysWithEvents = this.getDaysWithEvents.bind(this);\r\n this.getEventMeta = this.getEventMeta.bind(this);\r\n this.getToday = this.getToday.bind(this);\r\n\r\n }\r\n\r\n getToday() {\r\n var today = new Date();\r\n return {\r\n day: today.getDate(),\r\n month: today.getMonth(),\r\n year: today.getFullYear(),\r\n };\r\n }\r\n\r\n getCalendarDays() {\r\n return this.calendar.getCalendar(this.props.year, this.props.month).map((day) => {\r\n day.eventSlots = Array(this.props.maxEventSlots).fill(false); \r\n return day;\r\n });\r\n }\r\n\r\n getEventMeta(days, eventStart, eventEnd) {\r\n const eventStartInView = this.calendar.isDateSelected(eventStart);\r\n const eventEndInView = this.calendar.isDateSelected(eventEnd);\r\n const firstDayOfMonth = days[0];\r\n const lastDayOfMonth = days[days.length - 1];\r\n\r\n const eventMeta = {\r\n // Asserts Event is visible in this month view\r\n isVisibleInView: false,\r\n visibleEventLength: days.length,\r\n // Returns the index (interval from first visible day) of [...days] of event's first \"visible\" day\r\n firstVisibleDayIndex: eventStartInView ? Calendar.interval(firstDayOfMonth, eventStart) - 1 : 0,\r\n };\r\n\r\n // Asserts Event is visible in this month view\r\n if (eventStartInView || eventEndInView) {\r\n // Asserts event's first or last day is visible in this month view\r\n eventMeta.isVisibleInView = true;\r\n } else if (eventStart.month < this.props.month && eventEnd.month > this.props.month) {\r\n // Asserts at least part of month is\r\n eventMeta.isVisibleInView = true;\r\n }\r\n\r\n // Determine the visible length of the event during the month\r\n if (eventStartInView && eventEndInView) {\r\n eventMeta.visibleEventLength = Calendar.interval(eventStart, eventEnd);\r\n } else if (!eventStartInView && eventEndInView) {\r\n eventMeta.visibleEventLength = Calendar.interval(firstDayOfMonth, eventEnd);\r\n } else if (eventStartInView && !eventEndInView) {\r\n eventMeta.visibleEventLength = Calendar.interval(eventStart, lastDayOfMonth);\r\n }\r\n\r\n return eventMeta;\r\n }\r\n\r\n getDaysWithEvents() {\r\n // Get all the days in this months calendar view\r\n // Sibling Months included\r\n const days = this.getCalendarDays();\r\n\r\n // Set Range Limits on calendar\r\n this.calendar.setStartDate(days[0]);\r\n this.calendar.setEndDate(days[days.length - 1]);\r\n\r\n // Iterate over each of the supplied events\r\n this.props.events.forEach((eventItem) => {\r\n\r\n const eventStart = this.getCalendarDayObject(eventItem.start);\r\n const eventEnd = this.getCalendarDayObject(eventItem.end);\r\n const eventMeta = this.getEventMeta(days, eventStart, eventEnd);\r\n\r\n if (eventMeta.isVisibleInView) {\r\n const eventLength = eventMeta.visibleEventLength;\r\n const eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false);\r\n let dayIndex = 0;\r\n\r\n // For each day in the event\r\n while (dayIndex < eventLength) {\r\n // Clone the event object so we acn add day specfic data\r\n const eventData = Object.assign({}, eventItem);\r\n\r\n if (dayIndex === 0) {\r\n // Flag first day of event\r\n eventData.isFirstDay = true;\r\n }\r\n \r\n if (dayIndex === eventLength - 1) {\r\n // Flag last day of event\r\n eventData.isLastDay = true;\r\n }\r\n \r\n if (!eventData.isFirstDay || !eventData.isLastDay) {\r\n // Flag between day of event\r\n eventData.isBetweenDay = true;\r\n }\r\n\r\n // Apply Event Data to the correct slot for that day\r\n days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots[eventSlotIndex] = eventData;\r\n\r\n // Move to next day of event\r\n dayIndex++;\r\n }\r\n }\r\n });\r\n\r\n return days;\r\n }\r\n\r\n getCalendarDayObject(date) {\r\n const dateArray = date.split('-');\r\n return {\r\n year: dateArray[0],\r\n // Subtract 1 from month to allow for human declared months\r\n month: dateArray[1] - 1,\r\n day: dateArray[2],\r\n };\r\n }\r\n\r\n getLastIndexOfEvent(slots) {\r\n\r\n const lastIndexOfEvent = slots.map((slot, index) => {\r\n return slot !== false ? index : false;\r\n }).filter((element) => {\r\n return element;\r\n }).pop();\r\n\r\n return lastIndexOfEvent < 3 || lastIndexOfEvent === undefined ? 2 : lastIndexOfEvent;\r\n }\r\n\r\n getSerializedDay(day) {\r\n return [day.weekDay, day.day, day.month, day.year].join('');\r\n }\r\n\r\n renderDaysOfTheWeek() {\r\n return this.props.daysOfTheWeek.map((title, index) => {\r\n return (\r\n \r\n ) \r\n });\r\n }\r\n\r\n renderEvents(day) {\r\n \r\n // Trim excess slots\r\n const eventSlots = day.eventSlots.slice(0, this.getLastIndexOfEvent(day.eventSlots) + 1)\r\n\r\n return eventSlots.map((eventData, index) => {\r\n return (\r\n \r\n );\r\n });\r\n }\r\n\r\n renderCalendarDays() {\r\n return this.getDaysWithEvents().map((day, index) => {\r\n const isToday = Calendar.interval(day, this.state.today) === 1;\r\n const events = this.renderEvents(day);\r\n \r\n return (\r\n \r\n );\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n {this.renderDaysOfTheWeek()}\r\n {this.renderCalendarDays()}\r\n
\r\n );\r\n }\r\n}\r\n\r\nEventCalendar.propTypes = {\r\n daysOfTheWeek: React.PropTypes.array,\r\n events: React.PropTypes.array,\r\n maxEventSlots: React.PropTypes.number,\r\n month: React.PropTypes.number.isRequired,\r\n onEventClick: React.PropTypes.func,\r\n onEventMouseOut: React.PropTypes.func,\r\n onEventMouseOver: React.PropTypes.func,\r\n onDayClick: React.PropTypes.func,\r\n wrapTitle: React.PropTypes.bool,\r\n year: React.PropTypes.number.isRequired,\r\n\r\n};\r\n\r\nEventCalendar.defaultProps = {\r\n daysOfTheWeek: [\r\n 'Sunday',\r\n 'Monday',\r\n 'Tuesday',\r\n 'Wednesday',\r\n 'Thursday',\r\n 'Friday',\r\n 'Saturday',\r\n ],\r\n events: [],\r\n wrapTitle: true,\r\n maxEventSlots: 10,\r\n};\r\n\r\nexport default EventCalendar;\r\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.js\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"React\",\"root\":\"React\"}\n ** module id = 1\n ** module chunks = 0\n **/","/**\n * Calendar constructor\n *\n * @param {Object} options Calendar options\n * @param {Object} options.startDate Date object indicating the selected start date\n * @param {Object} options.endDate Date object indicating the selected end date\n * @param {Boolean} options.siblingMonths Calculate dates from sibling months (before and after the current month, based on weekStart)\n * @param {Boolean} options.weekNumbers Caclulate the week days\n * @param {Number} options.weekStart Day of the week to start the calendar, respects `Date.prototype.getDay` (defaults to `0`, Sunday)\n */\nfunction Calendar (options) {\n\toptions = options || {};\n\n\tthis.startDate = options.startDate;\n\tthis.endDate = options.endDate;\n\tthis.siblingMonths = options.siblingMonths;\n\tthis.weekNumbers = options.weekNumbers;\n\tthis.weekStart = options.weekStart;\n\n\tif (this.weekStart === undefined) {\n\t\tthis.weekStart = 0;\n\t}\n\n\tthis.date = new Date(1986, 9, 14, 0, 0, 0);\n}\n\n/**\n * Calculate a calendar month\n *\n * @param {Number} year Year\n * @param {Number} month Month [0-11]\n * @return {Array} Calendar days\n */\nCalendar.prototype.getCalendar = function (year, month) {\n\tthis.date.setUTCFullYear(year);\n\tthis.date.setUTCMonth(month);\n\tthis.date.setUTCDate(1);\n\n\tyear = this.date.getUTCFullYear();\n\tmonth = this.date.getUTCMonth();\n\n\tvar calendar = [],\n\t\tfirstDay = this.date.getUTCDay(),\n\n\t\tfirstDate = - (((7 - this.weekStart) + firstDay) % 7),\n\t\tlastDate = Calendar.daysInMonth(year, month),\n\t\tlastDay = ((lastDate - firstDate) % 7),\n\t\tlastDatePreviousMonth = Calendar.daysInMonth(year, month - 1),\n\t\ti = firstDate,\n\t\tmax = (lastDate - i) + (lastDay != 0 ? 7 - lastDay : 0) + firstDate,\n\t\tcurrentDay,\n\t\tcurrentDate,\n\t\tcurrentDateObject,\n\t\tcurrentWeekNumber = null,\n\t\totherMonth,\n\t\totherYear;\n\n\twhile (i < max) {\n\t\tcurrentDate = i + 1;\n\t\tcurrentDay = ((i < 1 ? 7 + i : i) + firstDay) % 7;\n\t\tif (currentDate < 1 || currentDate > lastDate) {\n\t\t\tif (this.siblingMonths) {\n\t\t\t\tif (currentDate < 1) {\n\t\t\t\t\totherMonth = month - 1;\n\t\t\t\t\totherYear = year;\n\t\t\t\t\tif (otherMonth < 0) {\n\t\t\t\t\t\totherMonth = 11;\n\t\t\t\t\t\totherYear --;\n\t\t\t\t\t}\n\t\t\t\t\tcurrentDate = lastDatePreviousMonth + currentDate;\n\t\t\t\t}\n\t\t\t\telse if (currentDate > lastDate) {\n\t\t\t\t\totherMonth = month + 1;\n\t\t\t\t\totherYear = year;\n\t\t\t\t\tif (otherMonth > 11) {\n\t\t\t\t\t\totherMonth = 0;\n\t\t\t\t\t\totherYear ++;\n\t\t\t\t\t}\n\t\t\t\t\tcurrentDate = i - lastDate + 1;\n\t\t\t\t}\n\t\t\t\tcurrentDateObject = {\n\t\t\t\t\tday: currentDate,\n\t\t\t\t\tweekDay: currentDay,\n\t\t\t\t\tmonth: otherMonth,\n\t\t\t\t\tyear: otherYear,\n\t\t\t\t\tsiblingMonth: true\n\t\t\t\t};\n\t\t\t}\n\t\t\telse {\n\t\t\t\tcurrentDateObject = false;\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tcurrentDateObject = {\n\t\t\t\tday: currentDate,\n\t\t\t\tweekDay: currentDay,\n\t\t\t\tmonth: month,\n\t\t\t\tyear: year\n\t\t\t};\n\t\t}\n\n\t\tif (currentDateObject && this.weekNumbers) {\n\t\t\tif (currentWeekNumber === null) {\n\t\t\t\tcurrentWeekNumber = Calendar.calculateWeekNumber(currentDateObject);\n\t\t\t}\n\t\t\telse if (currentDay == 1 && currentWeekNumber == 52) {\n\t\t\t\tcurrentWeekNumber = 1;\n\t\t\t}\n\t\t\telse if (currentDay == 1) {\n\t\t\t\tcurrentWeekNumber ++;\n\t\t\t}\n\t\t\tcurrentDateObject.weekNumber = currentWeekNumber;\n\t\t}\n\n\t\tif (currentDateObject && this.startDate) {\n\t\t\tcurrentDateObject.selected = this.isDateSelected(currentDateObject);\n\t\t}\n\n\t\tcalendar.push(currentDateObject);\n\t\ti ++;\n\t}\n\n\treturn calendar;\n};\n\n/**\n * Checks if a date is selected\n *\n * @param {Object} date Date object\n * @return {Boolean} Selected status of the date\n */\nCalendar.prototype.isDateSelected = function (date) {\n\tif (date.year == this.startDate.year && date.month == this.startDate.month && date.day == this.startDate.day) {\n\t\treturn true;\n\t}\n\telse if (this.endDate) {\n\t\tif (date.year == this.startDate.year && date.month == this.startDate.month && date.day < this.startDate.day) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year == this.endDate.year && date.month == this.endDate.month && date.day > this.endDate.day) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year == this.startDate.year && date.month < this.startDate.month) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year == this.endDate.year && date.month > this.endDate.month) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year < this.startDate.year) {\n\t\t\treturn false;\n\t\t}\n\t\telse if (date.year > this.endDate.year) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t}\n\treturn false;\n};\n\n/**\n * Sets the selected period start\n *\n * @param {Object} date Date object\n */\nCalendar.prototype.setStartDate = function (date) {\n\tthis.startDate = date;\n};\n\n/**\n * Sets the selected period end\n *\n * @param {Object} date Date object\n */\nCalendar.prototype.setEndDate = function (date) {\n\tthis.endDate = date;\n};\n\n/**\n * Sets one selected date\n *\n * @param {Object} date Date object\n */\nCalendar.prototype.setDate = Calendar.prototype.setStartDate;\n\n/**\n * Calculates the difference between two dates (date1 - date2), in days\n *\n * @param {Object} date1 Date object\n * @param {Object} date2 Date object\n * @return {Number} Days between the dates\n */\nCalendar.diff = function (date1, date2) {\n\tvar oDate1 = new Date(1986, 9, 14, 0, 0, 0), oDate2 = new Date(1986, 9, 14, 0, 0, 0);\n\n\toDate1.setUTCFullYear(date1.year);\n\toDate1.setUTCMonth(date1.month);\n\toDate1.setUTCDate(date1.day);\n\n\toDate2.setUTCFullYear(date2.year);\n\toDate2.setUTCMonth(date2.month);\n\toDate2.setUTCDate(date2.day);\n\n\treturn Math.ceil((oDate1.getTime() - oDate2.getTime()) / 86400000);\n};\n\n/**\n * Calculates the interval between two dates\n *\n * @param {Object} date1 Date object\n * @param {Object} date2 Date object\n * @return {Number} Number of days\n */\nCalendar.interval = function (date1, date2) {\n\treturn Math.abs(Calendar.diff(date1, date2)) + 1;\n};\n\n/**\n * Calculates the number of days in a month\n *\n * @param {Number} year Year\n * @param {Number} month Month [0-11]\n * @return {Number} Length of the month\n */\nCalendar.daysInMonth = function (year, month) {\n\treturn new Date(year, month + 1, 0).getDate();\n};\n\n/**\n * Calculates if a given year is a leap year\n *\n * @param {Number} year Year\n * @return {Boolean} Leap year or not\n */\nCalendar.isLeapYear = function (year) {\n\treturn ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);\n}\n\n/**\n * Calculates the week number for a given date\n *\n * @param {Object} date Date object\n * @return {Number} Week number\n */\n// Adapted from http://techblog.procurios.nl/k/news/view/33796/14863/calculate-iso-8601-week-and-year-in-javascript.html\nCalendar.calculateWeekNumber = function (date) {\n\t// Creates the requested date\n\tvar current = new Date(1986, 9, 14, 0, 0, 0);\n\tcurrent.setUTCFullYear(date.year);\n\tcurrent.setUTCMonth(date.month);\n\tcurrent.setUTCDate(date.day);\n\n\t// Create a copy of the object\n\tvar target = new Date(current.valueOf());\n\n\t// ISO week date weeks start on monday so correct the day number\n\tvar dayNr = (current.getUTCDay() + 6) % 7;\n\n\t// ISO 8601 states that week 1 is the week with the first thursday of that\n\t// year. Set the target date to the thursday in the target week.\n\ttarget.setUTCDate(target.getUTCDate() - dayNr + 3);\n\n\t// Store the millisecond value of the target date\n\tvar firstThursday = target.valueOf();\n\n\t// Set the target to the first thursday of the year\n\n\t// First set the target to january first\n\ttarget.setUTCMonth(0, 1);\n\n\t// Not a thursday? Correct the date to the next thursday\n\tif (target.getUTCDay() != 4) {\n\t\ttarget.setUTCMonth(0, 1 + ((4 - target.getUTCDay()) + 7) % 7);\n\t}\n\n\t// The weeknumber is the number of weeks between the first thursday of the\n\t// year and the thursday in the target week.\n\t// 604800000 = 7 * 24 * 3600 * 1000\n\treturn 1 + Math.ceil((firstThursday - target) / 604800000);\n}\n\n/**\n * Exports the Calendar\n */\nmodule.exports = { Calendar: Calendar };\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/calendar-base/lib/calendar-base.js\n ** module id = 2\n ** module chunks = 0\n **/","/*!\n Copyright (c) 2016 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tclasses.push(classNames.apply(null, arg));\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/classnames/index.js\n ** module id = 3\n ** module chunks = 0\n **/","import React from 'react';\r\nimport classnames from 'classnames';\r\n\r\nexport default class CalendarDay extends React.Component {\r\n render () {\r\n const { day, isToday, events, onClick } = this.props;\r\n const dayClasses = classnames({\r\n 'flexColumn': true,\r\n 'day': true,\r\n 'inactive': day.siblingMonth,\r\n 'today': isToday,\r\n });\r\n\r\n return (\r\n
\r\n
\r\n
\r\n {day.day}\r\n
\r\n {events}\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nCalendarDay.propTypes = {\r\n day: React.PropTypes.object.isRequired,\r\n isToday: React.PropTypes.bool,\r\n events: React.PropTypes.array,\r\n onClick: React.PropTypes.func,\r\n};\r\n\r\nCalendarDay.defaultProps = {\r\n onClick: () => {},\r\n}\r\n\r\nexport default CalendarDay;\r\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/CalendarDay.js\n **/","import React from 'react';\r\nimport classnames from 'classnames';\r\n\r\n\r\nclass CalendarEvent extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.sharedArguments = [null, this, this.props.eventData, this.props.day];\r\n // Bind methods\r\n this.handleClick = this.handleClick.bind(this);\r\n }\r\n\r\n handleClick(e) {\r\n this.props.onClick(...this.sharedArguments.slice(1));\r\n e.stopPropagation();\r\n }\r\n\r\n render() {\r\n // Return a placeholder element if there is no event data \r\n if(!this.props.eventData) {\r\n return
;\r\n }\r\n\r\n const showLabel = this.props.eventData.isFirstDay || (this.props.day.weekDay === 0 && this.props.wrapTitle);\r\n const title = showLabel ? this.props.eventData.title : '';\r\n\r\n const eventClasses = classnames({\r\n 'event-slot': true,\r\n 'event': true,\r\n 'event-first-day': this.props.eventData.isFirstDay,\r\n 'event-last-day': this.props.eventData.isLastDay,\r\n 'event-has-label': showLabel,\r\n }, this.props.eventData.eventClasses);\r\n\r\n\r\n return (\r\n
\r\n
\r\n {title} \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nCalendarEvent.propTypes = {\r\n day: React.PropTypes.object.isRequired,\r\n eventData: React.PropTypes.oneOfType([\r\n React.PropTypes.object,\r\n React.PropTypes.bool,\r\n ]),\r\n onClick: React.PropTypes.func,\r\n onMouseOut: React.PropTypes.func,\r\n onMouseOver: React.PropTypes.func,\r\n wrapTitle: React.PropTypes.bool,\r\n};\r\n\r\nCalendarEvent.defaultProps = {\r\n onClick: () => {},\r\n onMouseOut: () => {},\r\n onMouseOver: () => {},\r\n}\r\n\r\nexport default CalendarEvent;\r\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/CalendarEvent.js\n **/","import React from 'react';\r\n\r\nconst CalendarTitle = ({title}) => {\r\n return (\r\n
\r\n {title}\r\n
\r\n )\r\n}\r\n\r\nCalendarTitle.propTypes = {\r\n title: React.PropTypes.string.isRequired,\r\n};\r\n\r\nexport default CalendarTitle;\r\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/components/CalendarTitle.js\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /lib/index_template.ejs: -------------------------------------------------------------------------------- 1 | 2 | manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> 3 | 4 | 5 | <%= htmlWebpackPlugin.options.title || 'Webpack App'%> 6 | 7 | <% if (htmlWebpackPlugin.files.favicon) { %> 8 | 9 | <% } %> 10 | 11 | <% if (htmlWebpackPlugin.options.mobile) { %> 12 | 13 | <% } %> 14 | 15 | <% for (var css in htmlWebpackPlugin.files.css) { %> 16 | 17 | <% } %> 18 | 19 | <% if (htmlWebpackPlugin.options.baseHref) { %> 20 | 21 | <% } %> 22 | 23 | 24 |
25 |
26 | <% if (htmlWebpackPlugin.options.name) { %> 27 |

<%= htmlWebpackPlugin.options.name %>

28 | <% } %> 29 | 30 | <% if (htmlWebpackPlugin.options.description) { %> 31 |
<%= htmlWebpackPlugin.options.description %>
32 | <% } %> 33 |
34 | 35 |
36 |

Demo

37 |
38 |
39 | <%= htmlWebpackPlugin.options.demonstration %> 40 |
41 | 42 |

Documentation

43 |
44 |
45 | <%= htmlWebpackPlugin.options.documentation %> 46 |
47 |
48 |
49 | 50 | <% for (var chunk in htmlWebpackPlugin.files.chunks) { %> 51 | 52 | <% } %> 53 | 54 | 55 | -------------------------------------------------------------------------------- /lib/post_install.js: -------------------------------------------------------------------------------- 1 | // adapted based on rackt/history (MIT) 2 | // Node 0.10+ 3 | var execSync = require('child_process').execSync; 4 | var stat = require('fs').stat; 5 | 6 | // Node 0.10 check 7 | if (!execSync) { 8 | execSync = require('sync-exec'); 9 | } 10 | 11 | function exec(command) { 12 | execSync(command, { 13 | stdio: [0, 1, 2] 14 | }); 15 | } 16 | 17 | stat('dist-modules', function(error, stat) { 18 | // Skip building on Travis 19 | if (process.env.TRAVIS) { 20 | return; 21 | } 22 | 23 | if (error || !stat.isDirectory()) { 24 | exec('npm i babel-cli babel-preset-es2015 babel-preset-react'); 25 | exec('npm run dist:modules'); 26 | } 27 | }); 28 | -------------------------------------------------------------------------------- /lib/render.jsx: -------------------------------------------------------------------------------- 1 | import * as fs from 'fs'; 2 | import * as path from 'path'; 3 | 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom/server'; 6 | import remark from 'remark'; 7 | import reactRenderer from 'remark-react'; 8 | import RemarkLowlight from 'remark-react-lowlight' 9 | 10 | import js from 'highlight.js/lib/languages/javascript'; 11 | 12 | export default function (rootPath, context, demoTemplate) { 13 | demoTemplate = demoTemplate || ''; 14 | 15 | var readme = fs.readFileSync( 16 | path.join(rootPath, 'README.md'), 'utf8' 17 | ); 18 | 19 | return { 20 | name: context.name, 21 | description: context.description, 22 | demonstration: demoTemplate, 23 | documentation: ReactDOM.renderToStaticMarkup( 24 |
25 | {remark().use(reactRenderer, { 26 | remarkReactComponents: { 27 | code: RemarkLowlight({ 28 | js 29 | }) 30 | } 31 | }).process(readme)} 32 |
33 | ) 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-event-calendar", 3 | "version": "0.3.0", 4 | "description": "React JS component that will display supplied event data within a calendar view of a given month.", 5 | "author": "James Lewis", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "test": "jest", 9 | "test:tdd": "", 10 | "test:lint": "eslint . --ext .js --ext .jsx --ignore-path .gitignore --ignore-pattern dist --cache", 11 | "gh-pages": "webpack", 12 | "gh-pages:deploy": "gh-pages -d gh-pages", 13 | "gh-pages:stats": "webpack --profile --json > stats.json", 14 | "dist": "webpack --display-error-details && node-sass style.css dist/style.css", 15 | "dist:min": "webpack --display-error-details", 16 | "dist:modules": "babel ./src --out-dir ./dist-modules", 17 | "pretest": "npm run test:lint", 18 | "preversion": "npm run test && npm run dist && npm run dist:min && git commit --allow-empty -am \"Update dist\"", 19 | "prepublish": "npm run dist:modules", 20 | "postpublish": "npm run gh-pages && npm run gh-pages:deploy", 21 | "postinstall": "node lib/post_install.js" 22 | }, 23 | "main": "dist-modules", 24 | "devDependencies": { 25 | "autoprefixer": "^6.3.6", 26 | "babel-cli": "^6.7.5", 27 | "babel-core": "^6.7.5", 28 | "babel-eslint": "^6.0.2", 29 | "babel-jest": "^12.0.2", 30 | "babel-loader": "^6.2.4", 31 | "babel-preset-es2015": "^6.6.0", 32 | "babel-preset-react": "^6.5.0", 33 | "babel-preset-react-hmre": "^1.1.1", 34 | "babel-register": "^6.7.2", 35 | "bootstrap-loader": "^1.0.10", 36 | "bootstrap-sass": "^3.3.6", 37 | "clean-webpack-plugin": "^0.1.8", 38 | "css-loader": "^0.23.1", 39 | "eslint": "2.7.x", 40 | "eslint-loader": "^1.3.0", 41 | "eslint-plugin-react": "^4.3.0", 42 | "extract-text-webpack-plugin": "^1.0.1", 43 | "file-loader": "^0.8.5", 44 | "gh-pages": "^0.11.0", 45 | "git-prepush-hook": "^1.0.1", 46 | "highlight.js": "^9.3.0", 47 | "html-webpack-plugin": "^2.15.0", 48 | "isparta-instrumenter-loader": "^1.0.0", 49 | "jest-cli": "^12.0.2", 50 | "json-loader": "^0.5.4", 51 | "moment": "^2.13.0", 52 | "node-sass": "^3.6.0", 53 | "postcss-loader": "^0.8.2", 54 | "purecss": "^0.6.0", 55 | "react": "^15.0.0", 56 | "react-addons-test-utils": "^15.0.1", 57 | "react-bootstrap": "^0.29.3", 58 | "react-dom": "^15.0.0", 59 | "react-ghfork": "^0.3.3", 60 | "react-modal": "^1.2.1", 61 | "react-tooltip": "^2.0.0", 62 | "remark": "^4.2.0", 63 | "remark-react": "^2.0.0", 64 | "remark-react-lowlight": "^0.1.0", 65 | "resolve-url-loader": "^1.4.3", 66 | "sass-loader": "^3.2.0", 67 | "style-loader": "^0.13.1", 68 | "sync-exec": "^0.6.2", 69 | "system-bell-webpack-plugin": "^1.0.0", 70 | "url-loader": "^0.5.7", 71 | "webpack": "^1.12.14", 72 | "webpack-dev-server": "^1.14.1", 73 | "webpack-merge": "^0.8.4" 74 | }, 75 | "peerDependencies": { 76 | "react": ">= 0.11.2 < 16.0.0" 77 | }, 78 | "jest": { 79 | "unmockedModulePathPatterns": [ 80 | "/node_modules/react", 81 | "/node_modules/react-dom", 82 | "/node_modules/react-addons-test-utils" 83 | ] 84 | }, 85 | "homepage": "https://github.com/dptoot/react-event-calendar", 86 | "repository": { 87 | "type": "git", 88 | "url": "https://github.com/dptoot/react-event-calendar.git" 89 | }, 90 | "bugs": { 91 | "url": "https://github.com/dptoot/react-event-calendar/issues" 92 | }, 93 | "keywords": [ 94 | "react", 95 | "reactjs", 96 | "react-component" 97 | ], 98 | "license": "MIT", 99 | "pre-push": [ 100 | "test", 101 | "test:lint" 102 | ], 103 | "dependencies": { 104 | "calendar-base": "^0.2.1", 105 | "classnames": "^2.2.4" 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/components/CalendarDay.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | export default class CalendarDay extends React.Component { 5 | render () { 6 | const { day, isToday, events, onClick } = this.props; 7 | const dayClasses = classnames({ 8 | 'flexColumn': true, 9 | 'day': true, 10 | 'inactive': day.siblingMonth, 11 | 'today': isToday, 12 | }); 13 | 14 | return ( 15 |
18 |
19 |
20 | {day.day} 21 |
22 | {events} 23 |
24 |
25 | ); 26 | } 27 | } 28 | 29 | CalendarDay.propTypes = { 30 | day: React.PropTypes.object.isRequired, 31 | isToday: React.PropTypes.bool, 32 | events: React.PropTypes.array, 33 | onClick: React.PropTypes.func, 34 | }; 35 | 36 | CalendarDay.defaultProps = { 37 | onClick: () => {}, 38 | } 39 | -------------------------------------------------------------------------------- /src/components/CalendarEvent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | 5 | class CalendarEvent extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | 10 | this.sharedArguments = [null, this, this.props.eventData, this.props.day]; 11 | // Bind methods 12 | this.handleClick = this.handleClick.bind(this); 13 | } 14 | 15 | componentWillReceiveProps(nextProps) { 16 | this.sharedArguments = [null, this, nextProps.eventData, nextProps.day]; 17 | } 18 | 19 | handleClick(e) { 20 | this.props.onClick(...this.sharedArguments.slice(1)); 21 | e.stopPropagation(); 22 | } 23 | 24 | render() { 25 | // Return a placeholder element if there is no event data 26 | if(!this.props.eventData) { 27 | return
; 28 | } 29 | 30 | const showLabel = this.props.eventData.isFirstDay || (this.props.day.weekDay === 0 && this.props.wrapTitle); 31 | const title = showLabel ? this.props.eventData.title : ''; 32 | 33 | const eventClasses = classnames({ 34 | 'event-slot': true, 35 | 'event': true, 36 | 'event-first-day': this.props.eventData.isFirstDay, 37 | 'event-last-day': this.props.eventData.isLastDay, 38 | 'event-has-label': showLabel, 39 | }, this.props.eventData.eventClasses); 40 | 41 | 42 | return ( 43 |
48 |
49 | {title} 50 |
51 |
52 | ); 53 | } 54 | } 55 | 56 | CalendarEvent.propTypes = { 57 | day: React.PropTypes.object.isRequired, 58 | eventData: React.PropTypes.oneOfType([ 59 | React.PropTypes.object, 60 | React.PropTypes.bool, 61 | ]), 62 | onClick: React.PropTypes.func, 63 | onMouseOut: React.PropTypes.func, 64 | onMouseOver: React.PropTypes.func, 65 | wrapTitle: React.PropTypes.bool, 66 | }; 67 | 68 | CalendarEvent.defaultProps = { 69 | onClick: () => {}, 70 | onMouseOut: () => {}, 71 | onMouseOver: () => {}, 72 | } 73 | 74 | export default CalendarEvent; 75 | -------------------------------------------------------------------------------- /src/components/CalendarTitle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const CalendarTitle = ({title}) => { 4 | return ( 5 |
6 | {title} 7 |
8 | ) 9 | } 10 | 11 | CalendarTitle.propTypes = { 12 | title: React.PropTypes.string.isRequired, 13 | }; 14 | 15 | export default CalendarTitle; 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Calendar} from 'calendar-base'; 3 | import classnames from 'classnames'; 4 | 5 | import CalendarDay from './components/CalendarDay'; 6 | import CalendarEvent from './components/CalendarEvent'; 7 | import CalendarTitle from './components/CalendarTitle'; 8 | 9 | class EventCalendar extends React.Component { 10 | 11 | constructor(props) { 12 | super(props); 13 | 14 | this._eventTargets = {}; 15 | 16 | this.state = { 17 | today: this.getToday(), 18 | }; 19 | 20 | this.calendar = new Calendar({siblingMonths: true, }); 21 | 22 | // Bind methods 23 | this.getCalendarDays = this.getCalendarDays.bind(this); 24 | this.getDaysWithEvents = this.getDaysWithEvents.bind(this); 25 | this.getEventMeta = this.getEventMeta.bind(this); 26 | this.getToday = this.getToday.bind(this); 27 | 28 | } 29 | 30 | getToday() { 31 | var today = new Date(); 32 | return { 33 | day: today.getDate(), 34 | month: today.getMonth(), 35 | year: today.getFullYear(), 36 | }; 37 | } 38 | 39 | getCalendarDays() { 40 | return this.calendar.getCalendar(this.props.year, this.props.month).map((day) => { 41 | day.eventSlots = Array(this.props.maxEventSlots).fill(false); 42 | return day; 43 | }); 44 | } 45 | 46 | getEventMeta(days, eventStart, eventEnd) { 47 | const eventStartInView = this.calendar.isDateSelected(eventStart); 48 | const eventEndInView = this.calendar.isDateSelected(eventEnd); 49 | const firstDayOfMonth = days[0]; 50 | const lastDayOfMonth = days[days.length - 1]; 51 | 52 | const eventMeta = { 53 | // Asserts Event is visible in this month view 54 | isVisibleInView: false, 55 | visibleEventLength: days.length, 56 | // Returns the index (interval from first visible day) of [...days] of event's first "visible" day 57 | firstVisibleDayIndex: eventStartInView ? Calendar.interval(firstDayOfMonth, eventStart) - 1 : 0, 58 | }; 59 | 60 | // Asserts Event is visible in this month view 61 | if (eventStartInView || eventEndInView) { 62 | // Asserts event's first or last day is visible in this month view 63 | eventMeta.isVisibleInView = true; 64 | } else if (eventStart.month < this.props.month && eventEnd.month > this.props.month) { 65 | // Asserts at least part of month is 66 | eventMeta.isVisibleInView = true; 67 | } 68 | 69 | // Determine the visible length of the event during the month 70 | if (eventStartInView && eventEndInView) { 71 | eventMeta.visibleEventLength = Calendar.interval(eventStart, eventEnd); 72 | } else if (!eventStartInView && eventEndInView) { 73 | eventMeta.visibleEventLength = Calendar.interval(firstDayOfMonth, eventEnd); 74 | } else if (eventStartInView && !eventEndInView) { 75 | eventMeta.visibleEventLength = Calendar.interval(eventStart, lastDayOfMonth); 76 | } 77 | 78 | return eventMeta; 79 | } 80 | 81 | getDaysWithEvents() { 82 | // Get all the days in this months calendar view 83 | // Sibling Months included 84 | const days = this.getCalendarDays(); 85 | 86 | // Set Range Limits on calendar 87 | this.calendar.setStartDate(days[0]); 88 | this.calendar.setEndDate(days[days.length - 1]); 89 | 90 | // Iterate over each of the supplied events 91 | this.props.events.forEach((eventItem) => { 92 | 93 | const eventStart = this.getCalendarDayObject(eventItem.start); 94 | const eventEnd = this.getCalendarDayObject(eventItem.end); 95 | const eventMeta = this.getEventMeta(days, eventStart, eventEnd); 96 | 97 | if (eventMeta.isVisibleInView) { 98 | const eventLength = eventMeta.visibleEventLength; 99 | const eventSlotIndex = days[eventMeta.firstVisibleDayIndex].eventSlots.indexOf(false); 100 | let dayIndex = 0; 101 | 102 | // For each day in the event 103 | while (dayIndex < eventLength) { 104 | // Clone the event object so we acn add day specfic data 105 | const eventData = Object.assign({}, eventItem); 106 | 107 | if (dayIndex === 0) { 108 | // Flag first day of event 109 | eventData.isFirstDay = true; 110 | } 111 | 112 | if (dayIndex === eventLength - 1) { 113 | // Flag last day of event 114 | eventData.isLastDay = true; 115 | } 116 | 117 | if (!eventData.isFirstDay || !eventData.isLastDay) { 118 | // Flag between day of event 119 | eventData.isBetweenDay = true; 120 | } 121 | 122 | // Apply Event Data to the correct slot for that day 123 | days[eventMeta.firstVisibleDayIndex + dayIndex].eventSlots[eventSlotIndex] = eventData; 124 | 125 | // Move to next day of event 126 | dayIndex++; 127 | } 128 | } 129 | }); 130 | 131 | return days; 132 | } 133 | 134 | getCalendarDayObject(date) { 135 | const dateArray = date.split('-'); 136 | return { 137 | year: dateArray[0], 138 | // Subtract 1 from month to allow for human declared months 139 | month: dateArray[1] - 1, 140 | day: dateArray[2], 141 | }; 142 | } 143 | 144 | getLastIndexOfEvent(slots) { 145 | 146 | const lastIndexOfEvent = slots.map((slot, index) => { 147 | return slot !== false ? index : false; 148 | }).filter((element) => { 149 | return element; 150 | }).pop(); 151 | 152 | return lastIndexOfEvent < 3 || lastIndexOfEvent === undefined ? 2 : lastIndexOfEvent; 153 | } 154 | 155 | getSerializedDay(day) { 156 | return [day.weekDay, day.day, day.month, day.year].join(''); 157 | } 158 | 159 | renderDaysOfTheWeek() { 160 | return this.props.daysOfTheWeek.map((title, index) => { 161 | return ( 162 | 166 | ) 167 | }); 168 | } 169 | 170 | renderEvents(day) { 171 | 172 | // Trim excess slots 173 | const eventSlots = day.eventSlots.slice(0, this.getLastIndexOfEvent(day.eventSlots) + 1) 174 | 175 | return eventSlots.map((eventData, index) => { 176 | return ( 177 | 186 | ); 187 | }); 188 | } 189 | 190 | renderCalendarDays() { 191 | return this.getDaysWithEvents().map((day, index) => { 192 | const isToday = Calendar.interval(day, this.state.today) === 1; 193 | const events = this.renderEvents(day); 194 | 195 | return ( 196 | 203 | ); 204 | }); 205 | } 206 | 207 | render() { 208 | return ( 209 |
210 | {this.renderDaysOfTheWeek()} 211 | {this.renderCalendarDays()} 212 |
213 | ); 214 | } 215 | } 216 | 217 | EventCalendar.propTypes = { 218 | daysOfTheWeek: React.PropTypes.array, 219 | events: React.PropTypes.array, 220 | maxEventSlots: React.PropTypes.number, 221 | month: React.PropTypes.number.isRequired, 222 | onEventClick: React.PropTypes.func, 223 | onEventMouseOut: React.PropTypes.func, 224 | onEventMouseOver: React.PropTypes.func, 225 | onDayClick: React.PropTypes.func, 226 | wrapTitle: React.PropTypes.bool, 227 | year: React.PropTypes.number.isRequired, 228 | 229 | }; 230 | 231 | EventCalendar.defaultProps = { 232 | daysOfTheWeek: [ 233 | 'Sunday', 234 | 'Monday', 235 | 'Tuesday', 236 | 'Wednesday', 237 | 'Thursday', 238 | 'Friday', 239 | 'Saturday', 240 | ], 241 | events: [], 242 | wrapTitle: true, 243 | maxEventSlots: 10, 244 | }; 245 | 246 | export default EventCalendar; 247 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | $borderRadius: .3rem; 2 | $margin: .5rem ; 3 | $padding: .25rem .5rem; 4 | $eventColor: #3b91ad; 5 | $eventFontSize: 14px; 6 | 7 | html { 8 | box-sizing: border-box; 9 | } 10 | *, *:before, *:after { 11 | box-sizing: inherit; 12 | } 13 | 14 | .flexContainer { 15 | max-width: 100%; 16 | width: 100%; 17 | border-top: 1px solid $eventColor; 18 | border-left: 1px solid $eventColor; 19 | display: flex; 20 | flex-direction: row; 21 | flex-wrap: wrap; 22 | } 23 | 24 | .flexColumn { 25 | display: flex; 26 | width: 14.2857142857%; 27 | border-bottom: 1px solid $eventColor; 28 | border-right: 1px solid $eventColor; 29 | flex: 0 1 auto; 30 | justify-content: center; 31 | } 32 | 33 | .day.inactive { 34 | background-color: #f8f8f8; 35 | color: #ccc; 36 | } 37 | 38 | .day.today { 39 | background-color: #fcf8e3; 40 | } 41 | 42 | .day .inner-grid { 43 | width: 100%; 44 | position:relative; 45 | } 46 | 47 | .day .event-slot { 48 | position: relative; 49 | margin: $margin 0; 50 | min-height: 28px; 51 | font-size: $eventFontSize; 52 | } 53 | 54 | .day .event-slot.event { 55 | background: #3b91ad; 56 | color: #3b91ad; 57 | white-space: nowrap; 58 | text-indent: -10000px; 59 | cursor: pointer; 60 | } 61 | 62 | .day .event-slot .event-title { 63 | position: absolute; 64 | top:($eventFontSize/2)/2; 65 | left:$margin; 66 | z-index: 100; 67 | color: #fff; 68 | z-index:1; 69 | overflow:visible; 70 | text-indent: 0; 71 | } 72 | 73 | .day .event.event-first-day { 74 | margin-left: $margin; 75 | border-top-left-radius: $borderRadius; 76 | border-bottom-left-radius: $borderRadius; 77 | } 78 | 79 | .day .event.event-last-day { 80 | margin-right: $margin; 81 | border-top-right-radius: $borderRadius; 82 | border-bottom-right-radius: $borderRadius; 83 | } 84 | 85 | .day .date { 86 | padding: $padding; 87 | text-align: right; 88 | } -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | 3 | import webpack from 'webpack'; 4 | import HtmlWebpackPlugin from 'html-webpack-plugin'; 5 | import ExtractTextPlugin from 'extract-text-webpack-plugin'; 6 | import SystemBellPlugin from 'system-bell-webpack-plugin'; 7 | import CleanPlugin from 'clean-webpack-plugin'; 8 | import merge from 'webpack-merge'; 9 | import React from 'react'; 10 | import ReactDOM from 'react-dom/server'; 11 | import autoprefixer from 'autoprefixer'; 12 | 13 | import renderJSX from './lib/render.jsx'; 14 | import App from './demo/App.jsx'; 15 | import pkg from './package.json'; 16 | 17 | const RENDER_UNIVERSAL = true; 18 | const TARGET = process.env.npm_lifecycle_event; 19 | const ROOT_PATH = __dirname; 20 | const config = { 21 | paths: { 22 | dist: path.join(ROOT_PATH, 'dist'), 23 | src: path.join(ROOT_PATH, 'src'), 24 | demo: path.join(ROOT_PATH, 'demo'), 25 | tests: path.join(ROOT_PATH, 'tests') 26 | }, 27 | filename: 'react-event-calendar', 28 | library: 'ReactEventCalender' 29 | }; 30 | const CSS_PATHS = [ 31 | config.paths.demo, 32 | path.join(ROOT_PATH, 'style.css'), 33 | path.join(ROOT_PATH, 'node_modules/highlight.js/styles/github.css'), 34 | path.join(ROOT_PATH, 'node_modules/react-ghfork/gh-fork-ribbon.ie.css'), 35 | path.join(ROOT_PATH, 'node_modules/react-ghfork/gh-fork-ribbon.css') 36 | ]; 37 | 38 | const STYLE_ENTRIES = [ 39 | 'react-ghfork/gh-fork-ribbon.ie.css', 40 | 'react-ghfork/gh-fork-ribbon.css', 41 | './style.css', 42 | 'bootstrap-loader' 43 | ]; 44 | 45 | process.env.BABEL_ENV = TARGET; 46 | 47 | const demoCommon = { 48 | resolve: { 49 | extensions: ['', '.js', '.jsx', '.css', '.png', '.jpg'] 50 | }, 51 | module: { 52 | preLoaders: [ 53 | { 54 | test: /\.jsx?$/, 55 | loaders: ['eslint'], 56 | include: [ 57 | config.paths.demo, 58 | config.paths.src 59 | ] 60 | } 61 | ], 62 | loaders: [ 63 | { 64 | test: /\.png$/, 65 | loader: 'url?limit=100000&mimetype=image/png', 66 | include: config.paths.demo 67 | }, 68 | { 69 | test: /\.jpg$/, 70 | loader: 'file', 71 | include: config.paths.demo 72 | }, 73 | { 74 | test: /\.json$/, 75 | loader: 'json', 76 | include: path.join(ROOT_PATH, 'package.json') 77 | }, 78 | { 79 | test: /\.(woff2?|svg)$/, 80 | loader: 'url?limit=10000' 81 | }, 82 | { 83 | test: /\.(ttf|eot)$/, 84 | loader: 'file' 85 | }, 86 | ] 87 | }, 88 | plugins: [ 89 | new SystemBellPlugin() 90 | ] 91 | }; 92 | 93 | if (TARGET === 'start') { 94 | module.exports = merge(demoCommon, { 95 | devtool: 'eval-source-map', 96 | entry: { 97 | demo: [config.paths.demo].concat(STYLE_ENTRIES) 98 | }, 99 | plugins: [ 100 | new webpack.DefinePlugin({ 101 | 'process.env.NODE_ENV': '"development"' 102 | }), 103 | new HtmlWebpackPlugin(Object.assign({}, { 104 | title: pkg.name + ' - ' + pkg.description, 105 | template: 'lib/index_template.ejs', 106 | 107 | inject: false 108 | }, renderJSX(__dirname, pkg))), 109 | new webpack.HotModuleReplacementPlugin() 110 | ], 111 | module: { 112 | loaders: [ 113 | { 114 | test: /\.css$/, 115 | loaders: ['style', 'css', 'postcss', 'sass'], 116 | include: CSS_PATHS 117 | }, 118 | { 119 | test: /\.jsx?$/, 120 | loaders: ['babel?cacheDirectory'], 121 | include: [ 122 | config.paths.demo, 123 | config.paths.src 124 | ] 125 | } 126 | ] 127 | }, 128 | postcss: function() { 129 | return [autoprefixer]; 130 | }, 131 | devServer: { 132 | historyApiFallback: true, 133 | hot: true, 134 | inline: true, 135 | progress: true, 136 | host: process.env.HOST, 137 | port: process.env.PORT, 138 | stats: 'errors-only' 139 | } 140 | }); 141 | } 142 | 143 | function NamedModulesPlugin(options) { 144 | this.options = options || {}; 145 | } 146 | 147 | NamedModulesPlugin.prototype.apply = function(compiler) { 148 | compiler.plugin('compilation', function(compilation) { 149 | compilation.plugin('before-module-ids', function(modules) { 150 | modules.forEach(function(module) { 151 | if (module.id === null && module.libIdent) { 152 | var id = module.libIdent({ 153 | context: this.options.context || compiler.options.context 154 | }); 155 | 156 | // Skip CSS files since those go through ExtractTextPlugin 157 | if (!id.endsWith('.css')) { 158 | module.id = id; 159 | } 160 | } 161 | }, this); 162 | }.bind(this)); 163 | }.bind(this)); 164 | }; 165 | 166 | if (TARGET === 'gh-pages' || TARGET === 'gh-pages:stats') { 167 | module.exports = merge(demoCommon, { 168 | entry: { 169 | app: config.paths.demo, 170 | vendors: [ 171 | 'react' 172 | ], 173 | style: STYLE_ENTRIES 174 | }, 175 | output: { 176 | path: './gh-pages', 177 | filename: '[name].[chunkhash].js', 178 | chunkFilename: '[chunkhash].js' 179 | }, 180 | plugins: [ 181 | new CleanPlugin(['gh-pages'], { 182 | verbose: false 183 | }), 184 | new ExtractTextPlugin('[name].[chunkhash].css'), 185 | new webpack.DefinePlugin({ 186 | // This affects the react lib size 187 | 'process.env.NODE_ENV': '"production"' 188 | }), 189 | new HtmlWebpackPlugin(Object.assign({}, { 190 | title: pkg.name + ' - ' + pkg.description, 191 | template: 'lib/index_template.ejs', 192 | inject: false 193 | }, renderJSX( 194 | __dirname, pkg, RENDER_UNIVERSAL ? ReactDOM.renderToString() : '') 195 | )), 196 | new NamedModulesPlugin(), 197 | new webpack.optimize.DedupePlugin(), 198 | new webpack.optimize.UglifyJsPlugin({ 199 | compress: { 200 | warnings: false 201 | } 202 | }), 203 | new webpack.optimize.CommonsChunkPlugin({ 204 | names: ['vendors', 'manifest'] 205 | }) 206 | ], 207 | module: { 208 | loaders: [ 209 | { 210 | test: /\.css$/, 211 | loader: ExtractTextPlugin.extract('style', 'css!postcss!sass'), 212 | include: CSS_PATHS 213 | }, 214 | { 215 | test: /\.jsx?$/, 216 | loaders: ['babel'], 217 | include: [ 218 | config.paths.demo, 219 | config.paths.src 220 | ] 221 | } 222 | ] 223 | }, 224 | postcss: function() { 225 | return [autoprefixer]; 226 | } 227 | }); 228 | } 229 | 230 | // !TARGET === prepush hook for test 231 | if (TARGET === 'test' || TARGET === 'test:tdd' || !TARGET) { 232 | module.exports = merge(demoCommon, { 233 | module: { 234 | preLoaders: [ 235 | { 236 | test: /\.jsx?$/, 237 | loaders: ['eslint'], 238 | include: [ 239 | config.paths.tests 240 | ] 241 | } 242 | ], 243 | loaders: [ 244 | { 245 | test: /\.jsx?$/, 246 | loaders: ['babel?cacheDirectory'], 247 | include: [ 248 | config.paths.src, 249 | config.paths.tests 250 | ] 251 | } 252 | ] 253 | } 254 | }) 255 | } 256 | 257 | const distCommon = { 258 | devtool: 'source-map', 259 | output: { 260 | path: config.paths.dist, 261 | libraryTarget: 'umd', 262 | library: config.library 263 | }, 264 | entry: path.join(config.paths.src, 'index.js'), 265 | externals: { 266 | 'react': { 267 | commonjs: 'react', 268 | commonjs2: 'react', 269 | amd: 'React', 270 | root: 'React' 271 | } 272 | }, 273 | module: { 274 | loaders: [ 275 | { 276 | test: /\.jsx?$/, 277 | loaders: ['babel'], 278 | include: config.paths.src 279 | } 280 | ] 281 | }, 282 | plugins: [ 283 | new SystemBellPlugin() 284 | ] 285 | }; 286 | 287 | if (TARGET === 'dist') { 288 | module.exports = merge(distCommon, { 289 | output: { 290 | filename: config.filename + '.js' 291 | } 292 | }); 293 | } 294 | 295 | if (TARGET === 'dist:min') { 296 | module.exports = merge(distCommon, { 297 | output: { 298 | filename: config.filename + '.min.js' 299 | }, 300 | plugins: [ 301 | new webpack.optimize.UglifyJsPlugin({ 302 | compress: { 303 | warnings: false 304 | } 305 | }) 306 | ] 307 | }); 308 | } 309 | --------------------------------------------------------------------------------