ReactCalendar

35 | 43 | 49 |

55 |         <button
56 |           onClick={this.updateEvent}
57 |           className="btn btn-md btn-block btn-primary">
58 |           Save
59 |         </button>
60 |       </div>
61 |     );
62 |   },
63 | 
64 |   updateEvent() {
65 |     var updateEventData = {
66 |       title: this.state.title.trim(),
67 |       dateArgs: this.state.dateArgs,
68 |       notes: this.state.notes.trim()
69 |     };
70 | 
71 |     if (updateEventData.title.length === 0)
72 |       return;
73 | 
74 |     EventActions.update(this.props.event.id, updateEventData);
75 |   }
76 | });
77 | 
78 | module.exports = FormEditEvent;

--------------------------------------------------------------------------------
/src/components/GridDay.js:
--------------------------------------------------------------------------------
 1 | var React  = require('react');
 2 | var _      = require('lodash');
 3 | var moment = require('moment');
 4 | 
 5 | var UserSelectedActions = require('../actions/UserSelectedActions');
 6 | 
 7 | var styles = {
 8 |   gridBlock: {
 9 |     height: 150,
10 |     width: 100/7 + "%",
11 |     float: 'left',
12 |     border: '1px solid gray',
13 |     position: 'relative',
14 |     overflow: 'scroll',
15 |     cursor: 'pointer'
16 |   },
17 |   date: {
18 |     position: 'absolute',
19 |     top: 0,
20 |     left: 0,
21 |     padding: 10
22 |   },
23 |   label: {
24 |     display:      'inline-block',
25 |     maxWidth:     "100%",
26 |     whiteSpace:   "nowrap",
27 |     overflow:     "hidden",
28 |     textOverflow: "ellipsis",
29 |     cursor: 'pointer'
30 |   }
31 | };
32 | 
33 | var GridDay = React.createClass({
34 | 
35 |   propTypes: {
36 |     isActive: React.PropTypes.bool
37 |   },
38 | 
39 |   render() {
40 |     var dayMoment = this.props.selectedMoment;
41 | 
42 |     return (
43 |       <div style={this._getStyles()} onClick={this.onClickDay.bind(null, dayMoment)}>
44 |         <span style={styles.date}>{dayMoment.format('Do')}</span>
45 |         <ul className="list-unstyled" style={{marginTop: 30, marginLeft: 10}}>
46 |         {this.props.events.map((event) =>
47 |           <li
48 |             key={event.id}
49 |             onClick={this.onClickEvent.bind(null, event)}
50 |             className="label label-info"
51 |             style={styles.label}>
52 |             {event.title}
53 |           </li>)}
54 |         </ul>
55 |       </div>
56 |     )
57 |   },
58 | 
59 |   onClickDay(dayMoment) {
60 |     UserSelectedActions.selectDay(dayMoment);
61 |   },
62 | 
63 |   onClickEvent(eventData, e) {
64 |     e.stopPropagation();
65 |     UserSelectedActions.selectEvent(eventData.id);
66 |   },
67 | 
68 |   _getStyles() {
69 |     var _styles = _.assign({}, styles.gridBlock);
70 |     if (this.props.selectedMoment.day() === 0)
71 |       _styles.clear = 'left';
72 |     if (this.props.isActive)
73 |       _styles.backgroundColor = 'lightgray';
74 |     return _styles;
75 |   }
76 | 
77 | });
78 | 
79 | var GridDayDummy = React.createClass({
80 |   render () {
81 |     return (
82 |       <div style={styles.gridBlock}>
83 |       </div>
84 |     )
85 |   }
86 | });
87 | 
88 | module.exports = GridDay;
89 | module.exports.GridDayDummy = GridDayDummy;

--------------------------------------------------------------------------------
/src/stores/EventStore.js:
--------------------------------------------------------------------------------
  1 | var _             = require('lodash');
  2 | var moment        = require('moment');
  3 | var AppDispatcher = require('../AppDispatcher');
  4 | var ActionNames   = require('../actions/EventActions').actionNames;
  5 | var ChangeEmitter = require('./ChangeEmitter');
  6 | 
  7 | var _events = {};
  8 | 
  9 | /**
 10 |  * @extends ChangeEmitter
 11 |  */
 12 | var EventStore = _.assign({}, ChangeEmitter, {
 13 | 
 14 |   get(id) {
 15 |    return _events[id];
 16 |   },
 17 | 
 18 |   getAll() {
 19 |     return _events;
 20 |   },
 21 | 
 22 |   /**
 23 |    * @param dayMoment
 24 |    * @return {[]}
 25 |    */
 26 |   getForDay(dayMoment) {
 27 |     return _.filter(_events, (event) => moment(dayMoment).isSame(event.moment, 'day'))
 28 |   },
 29 | 
 30 |   /**
 31 |    * @param monthMoment
 32 |    * @return {[]}
 33 |    */
 34 |   getForMonth(monthMoment) {
 35 |     return _.filter(_events, (event) => moment(monthMoment).isSame(event.moment, 'month'))
 36 |   }
 37 | 
 38 | });
 39 | 
 40 | // TEMP - Dummy _makeId function
 41 | var _curId = 0;
 42 | var _makeId = function () {
 43 |   return ++_curId;
 44 | };
 45 | 
 46 | /**
 47 |  * @param eventData {*}
 48 |  */
 49 | var _createEvent = function (eventData) {
 50 |   var eventId = _makeId();
 51 | 
 52 |   if (!moment.isMoment(eventData.moment))
 53 |     throw new Exception("WTF give a moment date object man...");
 54 | 
 55 |   _events[eventId] = _.assign(eventData, {
 56 |     id: eventId
 57 |   });
 58 |   return eventId;
 59 | };
 60 | 
 61 | 
 62 | var _updateEvent = function (eventId, eventData) {
 63 |   var targetEvent = _events[eventId];
 64 |   var updateData  = {};
 65 |   var {dateArgs, title, notes} = eventData;
 66 |   if (dateArgs) updateData.moment = moment(dateArgs);
 67 |   if (title)    updateData.title  = title;
 68 |   if (notes)    updateData.notes  = notes;
 69 | 
 70 |   _events[eventId] = _.assign({}, targetEvent, updateData);
 71 |   return true;
 72 | };
 73 | 
 74 | /**
 75 |  * @param eventId {number}
 76 |  */
 77 | var _destroyEvent = function (eventId) {
 78 |   delete _events[eventId];
 79 | };
 80 | 
 81 | EventStore.dispatchToken = AppDispatcher.register(function (action) {
 82 | 
 83 |   switch (action.actionType) {
 84 |     case ActionNames.EVENT_CREATE:
 85 |       _createEvent(action.eventData);
 86 |       EventStore.emitChange();
 87 |       break;
 88 | 
 89 |     case ActionNames.EVENT_UPDATE:
 90 |       _updateEvent(action.eventId, action.eventData);
 91 |       EventStore.emitChange();
 92 |       break;
 93 | 
 94 |     case ActionNames.EVENT_DESTROY:
 95 |       _destroyEvent(action.eventId);
 96 |       EventStore.emitChange();
 97 |       break;
 98 |   }
 99 | 
100 |   return true;
101 | 
102 | });
103 | 
104 | module.exports = EventStore;
105 | 
106 | // TEMP - Dummy Data
107 | var DATA_SOURCE = [
108 |   {dateArgs: [2015, 3, 3], title: 'HEYYYYY April 3rd'},
109 |   {dateArgs: [2015, 3, 3], title: 'And another... April 3rd'},
110 |   {dateArgs: [2015, 3, 10], title: 'My Birthday!'},
111 |   {dateArgs: [2015, 4, 5 ], title: 'Sinco De Mayo!'},
112 |   {dateArgs: [2015, 4, 14], title: 'Just another day...'},
113 |   {dateArgs: [2015, 4, 14], title: 'The 14th!'}
114 | ];
115 | DATA_SOURCE.forEach(function (dummyEvent) {
116 |   var eventId = _makeId();
117 |   _events[eventId] = {
118 |     id: eventId,
119 |     title: dummyEvent.title,
120 |     moment: moment(dummyEvent.dateArgs)
121 |   };
122 | });
123 | // TEMP END - Dummy Data

--------------------------------------------------------------------------------
/src/components/DetailsPane.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var moment = require('moment');
  3 | var EventStore   = require('../stores/EventStore');
  4 | var EventActions = require('../actions/EventActions');
  5 | var UserSelectedStore   = require('../stores/UserSelectedStore');
  6 | var UserSelectedActions = require('../actions/UserSelectedActions');
  7 | var ArrowButton     = require('./ArrowButton');
  8 | var FormAddDayEvent = require('./FormAddDayEvent');
  9 | var FormEditEvent = require('./FormEditEvent');
 10 | 
 11 | /**
 12 |  * <PaneNavUpButton />
 13 |  * @private
 14 |  */
 15 | var PaneNavUpButton = React.createClass({
 16 |   render() {
 17 |     return (
 18 |       <small style={{marginRight: 15}}>
 19 |         <ArrowButton onClick={this.onNavBack} direction="left" style={{float: 'left'}} />
 20 |       </small>
 21 |     );
 22 |   },
 23 | 
 24 |   onNavBack () {
 25 |     UserSelectedActions.paneNavUp();
 26 |   }
 27 | });
 28 | 
 29 | /**
 30 |  * <EventListItem event={eventObject} />
 31 |  * @private
 32 |  */
 33 | var EventListItem = React.createClass({
 34 |   propTypes: {
 35 |     event: React.PropTypes.object.isRequired
 36 |   },
 37 | 
 38 |   render() {
 39 |     var event = this.props.event;
 40 |     return (
 41 |       <li>
 42 |         <span
 43 |           className="glyphicon glyphicon-remove"
 44 |           style={{cursor: 'pointer'}}
 45 |           onClick={this.onClickRemoveEvent}
 46 |           ></span>
 47 |         -
 48 |         <span
 49 |           style={{cursor: 'pointer'}}
 50 |           onClick={this.onClickViewEvent}
 51 |           >
 52 |           {event.title}
 53 |         </span>
 54 |       </li>
 55 |     );
 56 |   },
 57 | 
 58 |   onClickViewEvent() {
 59 |     UserSelectedActions.selectEvent(this.props.event.id);
 60 |   },
 61 | 
 62 |   onClickRemoveEvent() {
 63 |     EventActions.destroy(this.props.event.id)
 64 |   }
 65 | 
 66 | });
 67 | 
 68 | /**
 69 |  * <DetailsPane />
 70 |  */
 71 | var DetailsPane = React.createClass({
 72 | 
 73 |   render() {
 74 |     var paneContents = this.getPaneContents();
 75 |     return (
 76 |       <div>
 77 |         {paneContents}
 78 |       </div>
 79 |     )
 80 |   },
 81 | 
 82 |   getInitialState() {
 83 |     return {
 84 |       selectedType: UserSelectedStore.getPaneType()
 85 |     }
 86 |   },
 87 | 
 88 |   componentDidMount() {
 89 |     UserSelectedStore.addChangeListener(() => {
 90 |       return this.setState({
 91 |         selectedType:   UserSelectedStore.getPaneType()
 92 |       });
 93 |     });
 94 |   },
 95 | 
 96 |   getPaneContents() {
 97 |     var selectedMoment = UserSelectedStore.getMoment();
 98 |     var fallbackListing = <p><strong>Whoops!</strong> No events found!</p>;
 99 | 
100 |     switch (this.state.selectedType) {
101 | 
102 |       case 'month':
103 |         var groupedByDay = {};
104 |         EventStore.getForMonth(selectedMoment).forEach((event) => {
105 |           if (!groupedByDay[event.moment.date()]) groupedByDay[event.moment.date()] = [];
106 |           groupedByDay[event.moment.date()].push(event);
107 |         });
108 |         return (
109 |           <div>
110 |             <h3>{selectedMoment.format('MMMM')}</h3>
111 |             {(Object.keys(groupedByDay).length === 0)
112 |               ? fallbackListing
113 |               : Object.keys(groupedByDay)
114 |                 .map((dayNum) => {
115 |                   var dayDate = moment(selectedMoment).date(dayNum);
116 |                   return (
117 |                     <div key={dayNum}>
118 |                       <h5 className="lead">{dayDate.format('ddd Do')}</h5>
119 |                       <ul>
120 |                         {groupedByDay[dayDate.date()].map((event) => <EventListItem event={event} key={event.id} />)}
121 |                       </ul>
122 |                     </div>
123 |                   )
124 |                 })}
125 |           </div>
126 |         );
127 | 
128 |       case 'day':
129 |         var dayEvents = EventStore.getForDay(selectedMoment);
130 |         return (
131 |           <div>
132 |             <h3><PaneNavUpButton /> {selectedMoment.format('MMMM ddd Do')}</h3>
133 |             <FormAddDayEvent moment={selectedMoment} />
134 |             <hr />
135 |             {(dayEvents.length === 0)
136 |               ? fallbackListing
137 |               : <ul>
138 |                   {dayEvents.map((event) => <EventListItem event={event} key={event.id} />) }
139 |                 </ul>}
140 |           </div>
141 |         );
142 | 
143 |       case 'event':
144 |         var event = UserSelectedStore.getEvent();
145 |         return (
146 |           <div>
147 |             <h5><PaneNavUpButton /> {event.title}</h5>
148 |             <FormEditEvent event={event} />
149 |           </div>
150 |         );
151 |     }
152 |   }
153 | 
154 | });
155 | 
156 | module.exports = DetailsPane;

--------------------------------------------------------------------------------

Calendar

23 | 24 | {monthMoment.format('MMMM')} - {monthMoment.format('YYYY')} 25 | 26 |