Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit bdbb994632f9c80a6ebaf02e5ba005c092dc9c39 @tj tj committed Sep 18, 2012
Showing with 644 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +20 −0 Makefile
  3. +54 −0 Readme.md
  4. +22 −0 component.json
  5. +2 −0 index.js
  6. +24 −0 lib/calendar.css
  7. +148 −0 lib/calendar.js
  8. +270 −0 lib/days.js
  9. +11 −0 lib/template.html
  10. +1 −0 lib/template.js
  11. +14 −0 lib/utils.js
  12. +76 −0 test/index.html
@@ -0,0 +1,2 @@
+components
+build
@@ -0,0 +1,20 @@
+
+SRC = index.js \
+ lib/template.js \
+ lib/Calendar.js \
+ lib/Days.js \
+ lib/calendar.css
+
+build: components $(SRC)
+ @component build --dev
+
+components:
+ @component install --dev
+
+lib/template.js: lib/template.html
+ @component convert $<
+
+clean:
+ rm -fr build components lib/template.js
+
+.PHONY: clean
@@ -0,0 +1,54 @@
+
+# Calendar
+
+ Calendar UI component designed for use as a date-picker,
+ full-sized calendar or anything in-between.
+
+ ![javascript calendar component](http://f.cl.ly/items/043N1r0e1L130y162R2f/Screen%20Shot%202012-09-17%20at%209.17.32%20PM.png)
+
+## Installation
+
+ $ component install component/calendar
+
+## Example
+
+```js
+var Calendar = require('calendar');
+var cal = new Calendar;
+cal.el.appendTo('body');
+```
+
+## Events
+
+ - `prev` when the prev link is clicked
+ - `next` when the next link is clicked
+ - `change` (date) when the selected date is modified
+
+## API
+
+### new Calendar(date)
+
+ Initialize a new `Calendar` with the given `date` shown,
+ defaulting to now.
+
+### Calendar#select(date)
+
+ Select the given `date` (`Date` object).
+
+### Calendar#show(date)
+
+ Show the given `date`. This does _not_ select the given date,
+ it simply ensures that it is visible in the current view.
+
+### Calendar#prev()
+
+ Show the previous view (month).
+
+### Calendar#next()
+
+ Show the next view (month).
+
+# License
+
+ MIT
+
@@ -0,0 +1,22 @@
+{
+ "name": "calendar",
+ "repo": "component/calendar",
+ "description": "Calendar component",
+ "version": "0.0.1",
+ "keywords": ["calendar", "date", "ui"],
+ "development": {
+ "component/jquery": "*",
+ "component/emitter": "*",
+ "component/in-groups-of": "*"
+ },
+ "styles": [
+ "lib/calendar.css"
+ ],
+ "scripts": [
+ "index.js",
+ "lib/utils.js",
+ "lib/template.js",
+ "lib/calendar.js",
+ "lib/days.js"
+ ]
+}
@@ -0,0 +1,2 @@
+
+module.exports = require('./lib/calendar');
@@ -0,0 +1,24 @@
+
+.calendar-table {
+ border: 1px solid #eee;
+ padding: 5px;
+ margin: 5px;
+}
+
+.calendar-table .prev-day,
+.calendar-table .next-day {
+ color: #999;
+}
+
+.calendar-table td {
+ text-align: center;
+}
+
+.calendar-table .selected {
+ background: #0085CC;
+ color: white;
+}
+
+.calendar-table td {
+ user-select: none;
+}
@@ -0,0 +1,148 @@
+
+/**
+ * Module dependencies.
+ */
+
+var o = require('jquery')
+ , Emitter = require('emitter')
+ , template = require('./template')
+ , Days = require('./days')
+ , clamp = require('./utils').clamp;
+
+/**
+ * Expose `Calendar`.
+ */
+
+module.exports = Calendar;
+
+/**
+ * Initialize a new `Calendar`
+ * with the given `date` defaulting
+ * to now.
+ *
+ * Events:
+ *
+ * - `prev` when the prev link is clicked
+ * - `next` when the next link is clicked
+ * - `change` (date) when the selected date is modified
+ *
+ * @params {Date} date
+ * @api public
+ */
+
+function Calendar(date) {
+ Emitter.call(this);
+ var self = this;
+ this.el = o('<div class=calendar></div>');
+ this.days = new Days;
+ this.el.append(this.days.el);
+ this.on('change', this.show.bind(this));
+ this.days.on('prev', this.prev.bind(this));
+ this.days.on('next', this.next.bind(this));
+ this.show(date || new Date);
+ this.days.on('change', function(date){
+ self.emit('change', date);
+ });
+}
+
+/**
+ * Mixin emitter.
+ */
+
+Emitter(Calendar.prototype);
+
+/**
+ * Add class `name` to differentiate this
+ * specific calendar for styling purposes,
+ * for example `calendar.addClass('date-picker')`.
+ *
+ * @param {String} name
+ * @return {Calendar}
+ * @api public
+ */
+
+Calendar.prototype.addClass = function(name){
+ this.el.addClass(name);
+ return this;
+};
+
+/**
+ * Select `date`.
+ *
+ * @param {Date} date
+ * @return {Calendar}
+ * @api public
+ */
+
+Calendar.prototype.select = function(date){
+ this.selected = date;
+ this.days.select(date);
+ this.show(date);
+ return this;
+};
+
+/**
+ * Show `date`.
+ *
+ * @param {Date} date
+ * @return {Calendar}
+ * @api public
+ */
+
+Calendar.prototype.show = function(date){
+ this._date = date;
+ this.days.show(date);
+ return this;
+};
+
+/**
+ * Return the previous month.
+ *
+ * @return {Date}
+ * @api private
+ */
+
+Calendar.prototype.prevMonth = function(){
+ var date = new Date(this._date);
+ date.setMonth(date.getMonth() - 1);
+ return date;
+};
+
+/**
+ * Return the next month.
+ *
+ * @return {Date}
+ * @api private
+ */
+
+Calendar.prototype.nextMonth = function(){
+ var date = new Date(this._date);
+ date.setMonth(date.getMonth() + 1);
+ return date;
+};
+
+/**
+ * Show the prev view.
+ *
+ * @return {Calendar}
+ * @api public
+ */
+
+Calendar.prototype.prev = function(){
+ this.show(this.prevMonth());
+ this.emit('prev');
+ return this;
+};
+
+/**
+ * Show the next view.
+ *
+ * @return {Calendar}
+ * @api public
+ */
+
+Calendar.prototype.next = function(){
+ this.show(this.nextMonth());
+ this.emit('next');
+ return this;
+};
Oops, something went wrong.

0 comments on commit bdbb994

Please sign in to comment.