Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

boosh!

  • Loading branch information...
commit 4683e5f4d0acc0d6fabbf5ec2acb1d43b213c646 0 parents
Dustin Diaz authored November 01, 2011
1  .gitignore
... ...
@@ -0,0 +1 @@
  1
+node_modules
2  Makefile
... ...
@@ -0,0 +1,2 @@
  1
+boosh:
  2
+	node Makefile.js
25  Makefile.js
... ...
@@ -0,0 +1,25 @@
  1
+require('smoosh').config({
  2
+  "JAVASCRIPT": {
  3
+    "DIST_DIR": "./",
  4
+    "calender": [
  5
+      "./calender.js"
  6
+    ]
  7
+  },
  8
+  "JSHINT_OPTS": {
  9
+      "boss": true
  10
+    , "forin": false
  11
+    , "curly": false
  12
+    , "debug": false
  13
+    , "devel": false
  14
+    , "evil": true
  15
+    , "regexp": false
  16
+    , "undef": false
  17
+    , "sub": true
  18
+    , "white": false
  19
+    , "indent": 2
  20
+    , "whitespace": true
  21
+    , "asi": true
  22
+    , "laxbreak": true
  23
+    , "plusplus": false
  24
+  }
  25
+}).run().build().analyze()
26  README.md
Source Rendered
... ...
@@ -0,0 +1,26 @@
  1
+# CalEnder
  2
+A basic, themeable calendar datepicker for [Ender](http://ender.no.de)
  3
+
  4
+![calender](http://dustindiaz.com/basement/img/calender.png)
  5
+
  6
+Currently, this depends on Enders minimal starter pack [The Jeesh](https://github.com/ender-js/jeesh)
  7
+
  8
+Use it like this:
  9
+
  10
+```html
  11
+<link rel="stylesheet" type="text/css" href="calender.css">
  12
+<script src="http://ender-js.s3.amazonaws.com/jeesh.min.js"></script>
  13
+<script src="calender.js"></script>
  14
+<script>
  15
+  $('input.my-date').calender()
  16
+</script>
  17
+```
  18
+
  19
+If you're already using ender, you can add it to your existing instance
  20
+
  21
+    $ ender add calender
  22
+
  23
+# Features
  24
+There's currently no features other than it being a datepicker. More will come. Thanks.
  25
+
  26
+Enjoy!
59  calender.css
... ...
@@ -0,0 +1,59 @@
  1
+.date {
  2
+  width: 200px;
  3
+  font-size: 12px;
  4
+  font-family: lucida grande, lucida;
  5
+  display: none;
  6
+  position: absolute;
  7
+  user-select: none;
  8
+  -webkit-user-select: none;
  9
+  z-index: 999999999;
  10
+}
  11
+.date.active {
  12
+  display: block;
  13
+}
  14
+.date table {
  15
+  width: 100%;
  16
+  background-color: #222;
  17
+  border-radius: 5px;
  18
+  border-collapse: collapse;
  19
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  20
+  cursor: default;
  21
+}
  22
+.date table tr.date-header th {
  23
+  text-align: center;
  24
+}
  25
+.date table th.date-month-year {
  26
+  color: yellow;
  27
+}
  28
+.date table tr.date-daysofweek th {
  29
+  color: #aaa;
  30
+}
  31
+.date table tbody tr:hover,
  32
+.date table tbody td.hover {
  33
+  background-color: #333;
  34
+}
  35
+.date table td,
  36
+.date table th {
  37
+  color: #fff;
  38
+  font-weight: bold;
  39
+  text-align: right;
  40
+  border: 0;
  41
+  padding: 5px;
  42
+}
  43
+.date table tbody td,
  44
+.date tr.date-daysofweek th {
  45
+  border-right: 2px groove #444;
  46
+}
  47
+.date table tbody td:last-child,
  48
+.date table tr.date-daysofweek th:last-child {
  49
+  border-right-width: 0;
  50
+}
  51
+.date table td.today {
  52
+  color: yellow;
  53
+}
  54
+.date table .inactive {
  55
+  color: #555;
  56
+}
  57
+.date-month-previous {
  58
+  -webkit-transform: rotate(180deg);
  59
+}
181  calender.js
... ...
@@ -0,0 +1,181 @@
  1
+/**
  2
+  * CalEnder: A Datepicker for Ender
  3
+  * copyright Dustin Diaz @ded 2011 | License MIT
  4
+  * https://github.com/ded/calEnder
  5
+  */
  6
+!function ($) {
  7
+
  8
+  var template = "" +
  9
+    "<div class='date'>" +
  10
+    "  <table>" +
  11
+    "    <thead>" +
  12
+    "      <tr class='date-header'>" +
  13
+    "        <th class='date-nav date-month-previous'>&#8227;</th>" +
  14
+    "        <th colspan='5' class='date-month-year'>" +
  15
+    "          <span class='date-current-month'></span>" +
  16
+    "          <span class='date-current-year'></span></th>" +
  17
+    "        <th class='date-nav date-month-next'>&#8227;</th>" +
  18
+    "      </tr>" +
  19
+    "      <tr class='date-daysofweek'>" +
  20
+    "        <th>S</th>" +
  21
+    "        <th>M</th>" +
  22
+    "        <th>T</th>" +
  23
+    "        <th>W</th>" +
  24
+    "        <th>R</th>" +
  25
+    "        <th>F</th>" +
  26
+    "        <th>S</th>" +
  27
+    "      </tr>" +
  28
+    "    </thead>" +
  29
+    "    <tbody class='date-days'></tbody>" +
  30
+    "  </table>" +
  31
+    "</div>"
  32
+
  33
+
  34
+  var months = [
  35
+      'January', 'February', 'March', 'April'
  36
+    , 'May', 'June', 'July', 'August'
  37
+    , 'September', 'October', 'November', 'December'
  38
+  ]
  39
+
  40
+  function isLeapYear(year) {
  41
+    return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
  42
+  }
  43
+  function getDaysInMonth(year, month) {
  44
+    return [31, (isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]
  45
+  }
  46
+
  47
+  function getMonthNumberFromName(name) {
  48
+    return months.indexOf(name) + 1
  49
+  }
  50
+
  51
+
  52
+  function Calendar (el, options) {
  53
+    var self = this
  54
+    this.options = options || {}
  55
+    this.$input = $(el).first()
  56
+    this.$calendar = $(template).appendTo('body')
  57
+    this.$calendar.delegate('tbody td', 'mouseover', function () {
  58
+      $(this).closest('tbody').find('td:nth-child(' + (this.cellIndex + 1) + ')').addClass('hover')
  59
+    })
  60
+
  61
+    $(document).bind('click', function (e) {
  62
+      self.$calendar.removeClass('active')
  63
+    })
  64
+
  65
+    this.$calendar.bind('mousedown click', function (e) {
  66
+      e.stopPropagation()
  67
+      e.preventDefault()
  68
+    })
  69
+
  70
+    this.$calendar.delegate('tbody td', 'mouseout', function () {
  71
+      $(this).closest('tbody').find('td:nth-child(' + (this.cellIndex + 1) + ')').removeClass('hover')
  72
+    })
  73
+    this.$calendar.delegate('tbody td:not(.inactive)', 'click.day', function (e) {
  74
+      var day = $(this).html()
  75
+      self.$input.val([
  76
+          getMonthNumberFromName(self.$calendar.find('.date-current-month').html())
  77
+        , day
  78
+        , self.$calendar.find('.date-current-year').html()].join('-')
  79
+      )
  80
+      self.$calendar.removeClass('active')
  81
+    })
  82
+
  83
+    this.$calendar.delegate('.date-month-previous', 'click', function (e) {
  84
+      var y = parseFloat(self.$calendar.find('.date-current-year').html())
  85
+        , m = getMonthNumberFromName(self.$calendar.find('.date-current-month').html()) - 1
  86
+      if (--m == -1) --y && (m = 11)
  87
+      self.setDate(months[m] + ' 1,' + y)
  88
+    })
  89
+
  90
+    this.$calendar.delegate('.date-month-next', 'click', function (e) {
  91
+      var y = parseFloat(self.$calendar.find('.date-current-year').html())
  92
+        , m = getMonthNumberFromName($('.date-current-month').html())
  93
+      if ((m == 12)) ++y && (m = 0)
  94
+      self.setDate(months[m] + ' 1,' + y)
  95
+    })
  96
+
  97
+    this.setDate((this.options.date || new Date()).toDateString())
  98
+  }
  99
+
  100
+  Calendar.prototype.setDate = function (date) {
  101
+    var d = new Date(date)
  102
+      , monthStart = (new Date(d.getFullYear(), d.getMonth(), 1).getDay())
  103
+      , daysInPreviousMonth = getDaysInMonth(
  104
+            d.getMonth() ? d.getFullYear() : d.getFullYear() - 1
  105
+          , d.getMonth() ? d.getMonth() - 1 : d.getMonth()
  106
+        )
  107
+      , html = []
  108
+      , firstWeek = 1
  109
+      , theDay = 0
  110
+      , dateBegin = daysInPreviousMonth - monthStart
  111
+      , daysInMonth = getDaysInMonth(d.getYear(), d.getMonth())
  112
+      , remainingWeeks = Math.floor((daysInMonth + monthStart - 7) / 7)
  113
+      , i = 0
  114
+
  115
+    this.$calendar.find('.date-current-year,.date-current-month,tbody.date-days').empty()
  116
+    this.$calendar.find('.date-current-year').html(d.getFullYear())
  117
+    this.$calendar.find('.date-current-month').html(months[d.getMonth()])
  118
+
  119
+    html.push('<tr>')
  120
+    while (dateBegin < daysInPreviousMonth) {
  121
+      html.push('<td class="inactive">' + (++dateBegin) + '</td>')
  122
+    }
  123
+    while (monthStart < 7) {
  124
+      html.push('<td>' + (++theDay) + '</td>')
  125
+      monthStart++
  126
+    }
  127
+    html.push('</tr>')
  128
+    for (; i < remainingWeeks; i++) {
  129
+      html.push('<tr>')
  130
+      var j = 0
  131
+      while (j < 7) {
  132
+        html.push('<td>' + (++theDay) + '</td>')
  133
+        j++
  134
+      }
  135
+      html.push('</tr>')
  136
+    }
  137
+    if (theDay < daysInMonth) {
  138
+      html.push('<tr>')
  139
+      i = 0
  140
+      var finalDays = theDay + 7
  141
+        , newDays = 0
  142
+      while (i < 7) {
  143
+        if (theDay < daysInMonth) {
  144
+          html.push('<td>' + (++theDay) + '</td>')
  145
+        } else {
  146
+          html.push('<td class="inactive">' + (++newDays) + '</td>')
  147
+        }
  148
+        i++
  149
+      }
  150
+      html.push('</tr>')
  151
+    }
  152
+    this.$calendar.find('tbody.date-days').append(html.join(''))
  153
+
  154
+    var now = new Date()
  155
+    if (d.getMonth() == now.getMonth() && d.getFullYear() == now.getFullYear()) {
  156
+      this.$calendar.find('.date tbody.date-days td').each(function (el) {
  157
+        if (el.innerHTML == now.getDate() && !$(el).hasClass('inactive')) $(el).addClass('today')
  158
+      })
  159
+    }
  160
+  }
  161
+
  162
+  $.ender({
  163
+    calender: function (options) {
  164
+      $(this).forEach(function (el) {
  165
+        var $el = $(el)
  166
+          , offset = $el.offset()
  167
+          , calendar = new Calendar(el, options)
  168
+        $el
  169
+          .bind('focus click', function (e) {
  170
+            e.stopPropagation()
  171
+            calendar.$calendar.css({ left: offset.left, top: offset.top + offset.height}).addClass('active')
  172
+          })
  173
+          .bind('keydown', function (e) {
  174
+            if (e.keyCode == 9) {
  175
+              calendar.$calendar.removeClass('active')
  176
+            }
  177
+          })
  178
+      })
  179
+    }
  180
+  }, true)
  181
+}(ender);
6  calender.min.js
... ...
@@ -0,0 +1,6 @@
  1
+/**
  2
+  * CalEnder: A Datepicker for Ender
  3
+  * copyright Dustin Diaz @ded 2011 | License MIT
  4
+  * https://github.com/ded/calEnder
  5
+  */
  6
+!function(a){function d(a){return a%4===0&&a%100!==0||a%400===0}function e(a,b){return[31,d(a)?29:28,31,30,31,30,31,31,30,31,30,31][b]}function f(a){return c.indexOf(a)+1}function g(d,e){var g=this;this.options=e||{},this.$input=a(d).first(),this.$calendar=a(b).appendTo("body"),this.$calendar.delegate("tbody td","mouseover",function(){a(this).closest("tbody").find("td:nth-child("+(this.cellIndex+1)+")").addClass("hover")}),a(document).bind("click",function(a){g.$calendar.removeClass("active")}),this.$calendar.bind("mousedown click",function(a){a.stopPropagation(),a.preventDefault()}),this.$calendar.delegate("tbody td","mouseout",function(){a(this).closest("tbody").find("td:nth-child("+(this.cellIndex+1)+")").removeClass("hover")}),this.$calendar.delegate("tbody td:not(.inactive)","click.day",function(b){var c=a(this).html();g.$input.val([f(g.$calendar.find(".date-current-month").html()),c,g.$calendar.find(".date-current-year").html()].join("-")),g.$calendar.removeClass("active")}),this.$calendar.delegate(".date-month-previous","click",function(a){var b=parseFloat(g.$calendar.find(".date-current-year").html()),d=f(g.$calendar.find(".date-current-month").html())-1;--d==-1&&--b&&(d=11),g.setDate(c[d]+" 1,"+b)}),this.$calendar.delegate(".date-month-next","click",function(b){var d=parseFloat(g.$calendar.find(".date-current-year").html()),e=f(a(".date-current-month").html());e==12&&++d&&(e=0),g.setDate(c[e]+" 1,"+d)}),this.setDate((this.options.date||new Date).toDateString())}var b="<div class='date'>  <table>    <thead>      <tr class='date-header'>        <th class='date-nav date-month-previous'>&#8227;</th>        <th colspan='5' class='date-month-year'>          <span class='date-current-month'></span>          <span class='date-current-year'></span></th>        <th class='date-nav date-month-next'>&#8227;</th>      </tr>      <tr class='date-daysofweek'>        <th>S</th>        <th>M</th>        <th>T</th>        <th>W</th>        <th>R</th>        <th>F</th>        <th>S</th>      </tr>    </thead>    <tbody class='date-days'></tbody>  </table></div>",c=["January","February","March","April","May","June","July","August","September","October","November","December"];g.prototype.setDate=function(b){var d=new Date(b),f=(new Date(d.getFullYear(),d.getMonth(),1)).getDay(),g=e(d.getMonth()?d.getFullYear():d.getFullYear()-1,d.getMonth()?d.getMonth()-1:d.getMonth()),h=[],i=1,j=0,k=g-f,l=e(d.getYear(),d.getMonth()),m=Math.floor((l+f-7)/7),n=0;this.$calendar.find(".date-current-year,.date-current-month,tbody.date-days").empty(),this.$calendar.find(".date-current-year").html(d.getFullYear()),this.$calendar.find(".date-current-month").html(c[d.getMonth()]),h.push("<tr>");while(k<g)h.push('<td class="inactive">'+ ++k+"</td>");while(f<7)h.push("<td>"+ ++j+"</td>"),f++;h.push("</tr>");for(;n<m;n++){h.push("<tr>");var o=0;while(o<7)h.push("<td>"+ ++j+"</td>"),o++;h.push("</tr>")}if(j<l){h.push("<tr>"),n=0;var p=j+7,q=0;while(n<7)j<l?h.push("<td>"+ ++j+"</td>"):h.push('<td class="inactive">'+ ++q+"</td>"),n++;h.push("</tr>")}this.$calendar.find("tbody.date-days").append(h.join(""));var r=new Date;d.getMonth()==r.getMonth()&&d.getFullYear()==r.getFullYear()&&this.$calendar.find(".date tbody.date-days td").each(function(b){b.innerHTML==r.getDate()&&!a(b).hasClass("inactive")&&a(b).addClass("today")})},a.ender({calender:function(b){a(this).forEach(function(c){var d=a(c),e=d.offset(),f=new g(c,b);d.bind("focus click",function(a){a.stopPropagation(),f.$calendar.css({left:e.left,top:e.top+e.height}).addClass("active")}).bind("keydown",function(a){a.keyCode==9&&f.$calendar.removeClass("active")})})}},!0)}(ender)
34  demo.html
... ...
@@ -0,0 +1,34 @@
  1
+<!DOCTYPE HTML>
  2
+<html lang="en-us">
  3
+  <head>
  4
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5
+    <title>CalEnder Demo</title>
  6
+    <style type="text/css" media="screen">
  7
+      body {
  8
+        width: 600px;
  9
+        margin: 0 auto;
  10
+      }
  11
+      h1 {
  12
+        font: 100 46px/1.4 "lucida grande", lucida;
  13
+        color: #555;
  14
+      }
  15
+      input {
  16
+        font: 36px lucida grande, lucida, helvetica, arial;
  17
+        padding: 10px;
  18
+        border: 1px solid #999;
  19
+      }
  20
+    </style>
  21
+    <link rel="stylesheet" href="./calender.css" type="text/css">
  22
+    <script src="http://ender-js.s3.amazonaws.com/jeesh.min.js"></script>
  23
+    <script src="./calender.min.js"></script>
  24
+    <script>
  25
+      $(document).ready(function () {
  26
+        $('input').calender()
  27
+      })
  28
+    </script>
  29
+  </head>
  30
+  <body>
  31
+    <h1>pick a date</h1>
  32
+    <p><input type="text" name="some_date" value="" id="some_date"></p>
  33
+  </body>
  34
+</html>
23  package.json
... ...
@@ -0,0 +1,23 @@
  1
+{
  2
+    "name": "bonzo"
  3
+  , "description": "Simple, themable, Datepicker for Ender"
  4
+  , "version": "0.0.1"
  5
+  , "homepage": "https://github.com/ded/calEnder"
  6
+  , "author": "Dustin Diaz <dustin@dustindiaz.com> (http://dustindiaz.com)"
  7
+  , "keywords": ["ender", "calendar", "date", "datepicker", "datechooser", ""]
  8
+  , "main": "./datepicker.js"
  9
+  , "ender": "noop"
  10
+  , "repository": {
  11
+      "type": "git"
  12
+    , "url": "https://github.com/ded/calEnder.git"
  13
+  }
  14
+  , "dependencies": {
  15
+      "jeesh": "*"
  16
+  }
  17
+  , "scripts": {
  18
+      "build": "node Makefile.js"
  19
+  }
  20
+  , "devDependencies": {
  21
+      "smoosh": "*"
  22
+  }
  23
+}

0 notes on commit 4683e5f

Edd Sowden

I think this needs to be "./calender.js".

Dustin Diaz

yep. apparently missed that

Please sign in to comment.
Something went wrong with that request. Please try again.