Skip to content

Commit e32aa68

Browse files
hansehanse
committed
Initial commit.
0 parents  commit e32aa68

13 files changed

+17674
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.DS_Store
2+
node_modules/
3+
npm-debug.log

‎LICENSE.md

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

‎Makefile

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
JSX = node_modules/.bin/jsx
3+
UGLIFY = node_modules/.bin/uglifyjs
4+
5+
all: dist/calendar.js dist/calendar.min.js
6+
7+
dist/calendar.js: src/calendar.js
8+
mkdir -p dist
9+
$(JSX) src/calendar.js > dist/calendar.js
10+
11+
dist/calendar.min.js: dist/calendar.js
12+
$(UGLIFY) < dist/calendar.js > dist/calendar.min.js
13+
14+
clean:
15+
rm -rf dist
16+
17+
.PHONY: clean

‎Readme.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# react-calendar
2+
3+
Simple [React.js] Calendar component inspired by [CLNDR.js]().
4+
5+
Depends on [react.js]() and [moment.js]().
6+
7+
# See the demo
8+
```
9+
open example/index.html
10+
```
11+
12+
```js
13+
var React = require('react');
14+
var Calendar = require('react-calendar');
15+
16+
React.renderComponent(
17+
Calendar(),
18+
document.getElementById('calendar')
19+
);
20+
```
21+
22+
23+
# Build it yourself
24+
25+
```bash
26+
$ npm install
27+
$ make
28+
```
29+
30+
# License
31+
MIT

‎dist/calendar.js

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/** @jsx React.DOM */
2+
;(function(root) {
3+
4+
moment.lang('nb')
5+
6+
var Day = React.createClass({displayName: 'Day',
7+
render: function() {
8+
return (
9+
React.DOM.div( {className:this.props.day.classes},
10+
React.DOM.span( {className:"day-number"}, this.props.day.day.date())
11+
)
12+
);
13+
}
14+
});
15+
16+
var CalendarControls = React.createClass({displayName: 'CalendarControls',
17+
18+
next: function() {
19+
this.props.onNext();
20+
},
21+
22+
prev: function() {
23+
this.props.onPrev();
24+
},
25+
26+
render: function() {
27+
return (
28+
React.DOM.div( {className:"clndr-controls"},
29+
React.DOM.div( {onClick:this.prev}, "Prev"),
30+
React.DOM.div( {className:"current-month"}, this.props.date.format('MMMM YYYY')),
31+
React.DOM.div( {onClick:this.next}, "Next")
32+
)
33+
);
34+
}
35+
});
36+
37+
var Calendar = React.createClass({displayName: 'Calendar',
38+
39+
getDefaultProps: function() {
40+
return {
41+
weekOffset: 0,
42+
lang: 'en',
43+
forceSixRows: false,
44+
};
45+
},
46+
47+
getInitialState: function() {
48+
return {
49+
date: moment()
50+
};
51+
},
52+
53+
next: function() {
54+
this.setState({date: this.state.date.add('months', 1)});
55+
},
56+
57+
prev: function() {
58+
this.setState({date: this.state.date.subtract('months', 1)});
59+
},
60+
61+
createDay: function(day) {
62+
return {
63+
day: day.date(),
64+
date: day
65+
};
66+
},
67+
68+
/**
69+
* Return an array of days for the current month
70+
*/
71+
days: function() {
72+
var daysArray = [];
73+
var date = this.state.date.startOf('month');
74+
var diff = date.weekday() - this.props.weekOffset;
75+
if (diff < 0) diff += 7;
76+
77+
var i;
78+
for (var i = 0; i < diff; i++) {
79+
var day = moment([this.state.date.year(), this.state.date.month(), i-diff+1])
80+
daysArray.push({day: day, classes: 'prev-month'});
81+
}
82+
83+
var numberOfDays = date.daysInMonth();
84+
for (i = 1; i <= numberOfDays; i++) {
85+
var day = moment([this.state.date.year(), this.state.date.month(), i]);
86+
daysArray.push({day: day});
87+
}
88+
89+
i = 1;
90+
while (daysArray.length % 7 !== 0) {
91+
var day = moment([this.state.date.year(), this.state.date.month(), numberOfDays+i]);
92+
daysArray.push({day: day, classes: 'next-month'});
93+
i++;
94+
}
95+
96+
if (this.props.forceSixRows && daysArray.length !== 42) {
97+
var start = moment(daysArray[daysArray.length-1].date).add('days', 1);
98+
while (daysArray.length < 42) {
99+
daysArray.push({day: moment(start), classes: 'next-month'});
100+
start.add('days', 1);
101+
}
102+
}
103+
104+
return daysArray;
105+
},
106+
107+
render: function() {
108+
var renderDay = function(day) {
109+
return Day( {day:day} );
110+
};
111+
112+
return (
113+
React.DOM.div( {className:"clndr"},
114+
CalendarControls( {date:this.state.date, onNext:this.next, onPrev:this.prev} ),
115+
React.DOM.div( {className:"clndr-grid"},
116+
React.DOM.div( {className:"days"},
117+
this.days().map(renderDay)
118+
),
119+
React.DOM.div( {className:"clearfix"})
120+
)
121+
)
122+
);
123+
}
124+
});
125+
126+
if (typeof define === 'function' && define.amd) {
127+
define(function() {
128+
return Calendar;
129+
});
130+
} else if (typeof module !== 'undefined' && module.exports) {
131+
module.exports = Calendar;
132+
} else {
133+
root.Calendar = Calendar;
134+
}
135+
136+
})(window);

‎dist/calendar.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Calendar</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="moment.min.js"></script>
11+
<script src="moment-timezone.min.js"></script>
12+
<script src="react.js"></script>
13+
<script src="../dist/calendar.js"></script>
14+
<script>
15+
React.renderComponent(
16+
Calendar(),
17+
document.getElementById('app')
18+
);
19+
</script>
20+
</body>
21+
</html>

‎example/moment-timezone.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/moment.min.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)