Initial commit.

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules/
+npm-debug.log

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Hanse
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -0,0 +1,17 @@
+
+JSX = node_modules/.bin/jsx
+UGLIFY = node_modules/.bin/uglifyjs
+
+all: dist/calendar.js dist/calendar.min.js
+
+dist/calendar.js: src/calendar.js
+	mkdir -p dist
+	$(JSX) src/calendar.js > dist/calendar.js
+
+dist/calendar.min.js: dist/calendar.js
+	$(UGLIFY) < dist/calendar.js > dist/calendar.min.js
+
+clean:
+	rm -rf dist
+
+.PHONY: clean

Readme.md

@@ -0,0 +1,31 @@
+# react-calendar
+
+Simple [React.js] Calendar component inspired by [CLNDR.js]().
+
+Depends on [react.js]() and [moment.js]().
+
+# See the demo
+```
+open example/index.html
+```
+
+```js
+var React = require('react');
+var Calendar = require('react-calendar');
+
+React.renderComponent(
+  Calendar(),
+  document.getElementById('calendar')
+);
+```
+
+
+# Build it yourself
+
+```bash
+$ npm install
+$ make
+```
+
+# License
+MIT

dist/calendar.js

@@ -0,0 +1,136 @@
+/** @jsx React.DOM */
+;(function(root) {
+
+  moment.lang('nb')
+
+  var Day = React.createClass({displayName: 'Day',
+    render: function() {
+      return (
+        React.DOM.div( {className:this.props.day.classes}, 
+          React.DOM.span( {className:"day-number"}, this.props.day.day.date())
+        )
+      );
+    }
+  });
+
+  var CalendarControls = React.createClass({displayName: 'CalendarControls',
+
+    next: function() {
+      this.props.onNext();
+    },
+
+    prev: function() {
+      this.props.onPrev();
+    },
+
+    render: function() {
+      return (
+        React.DOM.div( {className:"clndr-controls"}, 
+          React.DOM.div( {onClick:this.prev}, "Prev"),
+          React.DOM.div( {className:"current-month"}, this.props.date.format('MMMM YYYY')),
+          React.DOM.div( {onClick:this.next}, "Next")
+        )
+      );
+    }
+  });
+
+  var Calendar = React.createClass({displayName: 'Calendar',
+
+    getDefaultProps: function() {
+      return {
+        weekOffset: 0,
+        lang: 'en',
+        forceSixRows: false,
+      };
+    },
+
+    getInitialState: function() {
+      return {
+        date: moment()
+      };
+    },
+
+    next: function() {
+      this.setState({date: this.state.date.add('months', 1)});
+    },
+
+    prev: function() {
+      this.setState({date: this.state.date.subtract('months', 1)});
+    },
+
+    createDay: function(day) {
+      return {
+        day: day.date(),
+        date: day
+      };
+    },
+
+    /**
+     * Return an array of days for the current month
+     */
+    days: function() {
+      var daysArray = [];
+      var date = this.state.date.startOf('month');
+      var diff = date.weekday() - this.props.weekOffset;
+      if (diff < 0) diff += 7;
+
+      var i;
+      for (var i = 0; i < diff; i++) {
+        var day = moment([this.state.date.year(), this.state.date.month(), i-diff+1])
+        daysArray.push({day: day, classes: 'prev-month'});
+      }
+
+      var numberOfDays = date.daysInMonth();
+      for (i = 1; i <= numberOfDays; i++) {
+        var day = moment([this.state.date.year(), this.state.date.month(), i]);
+        daysArray.push({day: day});
+      }
+
+      i = 1;
+      while (daysArray.length % 7 !== 0) {
+        var day = moment([this.state.date.year(), this.state.date.month(), numberOfDays+i]);
+        daysArray.push({day: day, classes: 'next-month'});
+        i++;
+      }
+
+      if (this.props.forceSixRows && daysArray.length !== 42) {
+        var start = moment(daysArray[daysArray.length-1].date).add('days', 1);
+        while (daysArray.length < 42) {
+          daysArray.push({day: moment(start), classes: 'next-month'});
+          start.add('days', 1);
+        }
+      }
+
+      return daysArray;
+    },
+
+    render: function() {
+      var renderDay = function(day) {
+        return Day( {day:day} );
+      };
+
+      return (
+        React.DOM.div( {className:"clndr"}, 
+          CalendarControls( {date:this.state.date, onNext:this.next, onPrev:this.prev} ),
+          React.DOM.div( {className:"clndr-grid"}, 
+            React.DOM.div( {className:"days"}, 
+              this.days().map(renderDay)
+            ),
+            React.DOM.div( {className:"clearfix"})
+          )
+        )
+      );
+    }
+  });
+
+  if (typeof define === 'function' && define.amd) {
+    define(function() {
+      return Calendar;
+    });
+  } else if (typeof module !== 'undefined' && module.exports) {
+    module.exports = Calendar;
+  } else {
+    root.Calendar = Calendar;
+  }
+
+})(window);

example/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Calendar</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="moment.min.js"></script>
+    <script src="moment-timezone.min.js"></script>
+    <script src="react.js"></script>
+    <script src="../dist/calendar.js"></script>
+    <script>
+      React.renderComponent(
+        Calendar(),
+        document.getElementById('app')
+      );
+    </script>
+  </body>
+</html>