input_calendar 0.0.1

data/.gitignore

@@ -0,0 +1,4 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in input_calendar.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2011 Josh Goebel
+
+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.

data/README.md

@@ -0,0 +1,70 @@
+# input_calendar
+
+At the current time __input_calendar__ is optimized for static calendars that stay in place and are used in place (how I usually prefer a calendar in apps).  No reason it couldn't be enhanced to hide/show dynamically and support visible date fields.
+
+Interesting in patches to make it more configurable as long as it stays simple and elegant.
+
+## How to use
+
+In your view:
+
+    <% form_for @event do |f| %>
+      <%= f.hidden_field :date, :class => "calendar" %>
+      <%= javascript_tag "Calendar.attach('event_date')" %>
+    <% end %>
+    
+Or avoid the inline JS with some jQuery (coffeescript) somewhere:
+
+    $(document).ready -> 
+      $("input.calendar").each (i, o) -> 
+        Calendar.attach(o)
+
+## Options you can pass attach
+
+TODO: Write up options here
+
+## Installing
+    
+### Requirements
+
+Requires jQuery and underscore.js.
+
+* http://jquery.com/
+* http://documentcloud.github.com/underscore/
+
+
+### Rails 3.1
+
+You'll need to add input_calendar to your Gemfile and then the asset pipeline will see that the appropriate JS and CSS files are included in your app.
+
+Add to your Gemfile:
+
+    gem "input_calendar"
+
+And install:
+
+    bundle install
+
+    
+### Rails 3.0 (using Bundler)
+
+A rake task is included to copy the JS and CSS files into your public folder.
+
+Add to your Gemfile:
+
+    gem "input_calendar"
+    
+Then copy the files locally:
+
+    bundle install
+    bundle exec rake input_calendar:copy_files
+    
+Should give you:
+
+    create  public/javascripts/input_calendar.js
+    create  public/stylesheets/input_calendar.css
+
+    
+### Rails 2.x
+
+TODO: Add directions here.

data/Rakefile

@@ -0,0 +1,17 @@
+require 'bundler/gem_tasks'
+require 'rake'
+require 'fileutils'
+
+task :default => [:compile]
+
+task :compile do
+  `coffee -c -o vendor/assets/javascripts src/*.coffee`
+  FileUtils.mv("vendor/assets/javascripts/calendar.js",
+    "vendor/assets/javascripts/input_calendar.js")
+end
+
+task :build => :compile
+
+task :watch do
+  exec "zsh -c 'coffee -c -w -o vendor/assets/javascripts src/*.coffee '"
+end

data/input_calendar.gemspec

@@ -0,0 +1,20 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "input_calendar/version"
+
+Gem::Specification.new do |s|
+  s.name        = "input_calendar"
+  s.version     = InputCalendar::VERSION
+  s.authors     = ["Josh Goebel"]
+  s.email       = ["me@joshgoebel.com"]
+  s.homepage    = "http://github.com/yyyc514/input_calendar"
+  s.summary     = %q{Simple and clean JS calendar to enter dates on forms}
+  s.description = %q{Simple and clean JS calendar to enter dates on forms}
+
+  s.rubyforge_project = "input_calendar"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+end

data/lib/input_calendar.rb

@@ -0,0 +1,12 @@
+require "input_calendar/version"
+
+module InputCalendar
+  class Engine < Rails::Engine
+    # just to get rails to think we're an engine
+    
+    rake_tasks do
+      load "input_calendar/tasks/copy_files.rake"
+    end
+    
+  end
+end

data/lib/input_calendar/tasks/copy_files.rake

@@ -0,0 +1,25 @@
+require 'thor/group'
+
+class CopyFiles < Thor::Group
+  include Thor::Actions
+  
+  def self.source_root
+    File.join(File.dirname(__FILE__),"../../..")
+  end
+  
+  def copy_files
+    assets="vendor/assets"
+    copy_file "#{assets}/javascripts/input_calendar.js", "public/javascripts/input_calendar.js"
+    copy_file "#{assets}/stylesheets/input_calendar.css", "public/stylesheets/input_calendar.css"
+  end
+
+end
+
+namespace :input_calendar do
+  
+  desc "Copy the input_calendar files into public/javascripts, etc..."
+  task :copy_files do
+    CopyFiles.start
+  end
+  
+end

data/lib/input_calendar/version.rb

@@ -0,0 +1,3 @@
+module InputCalendar
+  VERSION = "0.0.1"
+end

data/src/calendar.coffee

@@ -0,0 +1,154 @@
+$ = jQuery
+
+class @Calendar
+  # only syntax takes both the id and field
+  constructor: (@id, @field, @options = {}) ->
+    @field=$("##{@field}")
+    if @id?
+      @element=$("##{@id}")
+    else
+      @element=$("<div>").insertAfter(@field)
+    @show()
+    @getDateFromField()
+    @pager_date = new Date(@date)
+    @redraw()
+  # new syntax, just attach to a form field and let us do the rest
+  @attach: (field, options) ->
+    new Calendar(null, field, options)
+
+  getDateFromField: () ->
+    @date = new Date
+    return if @field.val() == ""
+    [year, month, day] = @parseIncomingDate()
+    @date = new Date(year, month-1, day)
+
+  # should override this in a subclass if you're date string looks different
+  parseIncomingDate: () ->
+    # cut off the time element
+    date=@field.val().split(" ")[0] 
+    date.split("-").map (x) -> parseInt(x)
+
+  show: () -> @element.show()
+  hide: () -> @element.hide()
+  label: () ->
+    @MONTHS[@pager_date.getMonth()].label + " " +
+    @pager_date.getFullYear();
+    
+  MONTHS: [
+  	{ label : 'January', days : 31 }
+		{ label : 'February', days : 28 }
+		{ label : 'March', days : 31 }
+		{ label : 'April', days : 30 }
+		{ label : 'May', days : 31 }
+		{ label : 'June', days : 30 }
+		{ label : 'July', days : 31 }
+		{ label : 'August', days : 31 }
+		{ label : 'September', days : 30 }
+		{ label : 'October', days : 31 }
+		{ label : 'November', days : 30 }
+		{ label : 'December', days : 31 }]
+
+  DAYS: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+    
+  dayRows: () ->
+    ("<th>#{day[0..0]}</th>" for day in @DAYS).join ""
+  
+  forward: () ->
+    dh(@pager_date).forward_a_month() 
+    @redraw()
+    false
+
+  back: () ->
+    dh(@pager_date).back_a_month() 
+    @redraw()
+    false
+  
+  days_in_month : (date) ->
+      [ month, year ] = [date.getMonth(), date.getFullYear()]
+      length = @MONTHS[month].days
+      `(month == 1 && (year % 4 == 0) && (year % 100 != 0)) ? 29 : length;`
+  
+  buildDateCells: () ->
+    date = dh(new Date(@pager_date))
+    date.setDate(1)
+    month = @pager_date.getMonth()
+    first_day = date.getDay()
+    for i in [1..first_day]
+      date.go_yesterday() 
+    html = ""
+    i = 0
+    while i < @days_in_month(date) + first_day - 1
+      html += "<tr>"
+      for day in @DAYS
+        html += @buildDayCell(date, month)
+        date.go_tomorrow()
+        i+=1
+      html += "</tr>"
+    html
+  
+  buildDayCell: (date, month) ->
+      classes = []
+      classes.push("day") 
+      classes.push("othermonth") if date.getMonth() != month
+      classes.push("today") if date.same_as(new Date())
+      classes.push("selected") if date.same_as(@date)
+      "<td class='#{classes.join(" ")}'><a data-date='#{date.toLocaleString()}' href='#'>#{date.getDate()}</a></td>"
+
+  clicked: (event) ->
+    o=$(event.target)
+    o=o.children("A") if o[0].tagName=="TD"
+    # @date=new Date(@pager_date)
+    # @date.setDate(parseInt(o.html()))
+    @date=new Date(Date.parse(o.data("date")))
+    @field.val(@date.toLocaleDateString())
+    @element.find(".selected").removeClass "selected"
+    o.parent().addClass("selected")
+    @element.find(".selectedtext").html @currentDateString()
+    if @options.onchange
+      @options.onchange(@field.val())
+    false
+  
+  currentDateString: ->
+    "<b>#{@DAYS[@date.getDay()]}</b><br />#{@MONTHS[@date.getMonth()].label} #{@date.getDate()}, #{@date.getFullYear()}"
+
+  redraw: () ->
+    html = """<table class="minicalendar" cellspacing="0">
+               <thead>  
+                  <tr><th class="back"><a href="#">&larr;</a></th>
+                      <th colspan="5" class="month_label">#{@label()}</th>
+                      <th class="forward"><a href="#">&rarr;</a></th></tr>
+                  <tr class="day_header">#{@dayRows()}</tr>
+                </thead>
+                <tbody>#{@buildDateCells()}</tbody>
+                <tfoot>
+                  <tr><td colspan="7" class="selectedtext">#{@currentDateString()}</td></tr>
+                </tfoot>
+                </table>"""
+    @element.html html
+    @element.find("th.back").click => @back()
+    @element.find("th.forward").click => @forward()
+    @element.find("tbody").click (event) => @clicked(event)
+    
+dh = (date) ->
+  _.extend(date, DateHelper)
+  date    
+
+class DateHelper
+  @forward_a_month: (count = 1) ->
+    month=@getMonth()+count
+    d = new Date(@getFullYear(), month, 1)
+    @setTime(d)
+  @back_a_month: (count = 1) ->
+    month=@getMonth()-count
+    d = new Date(@getFullYear(), month, 1)
+    @setTime(d)
+  @same_as: (date) ->
+    @getFullYear() == date.getFullYear() &&
+    @getMonth() == date.getMonth() &&
+    @getDate() == date.getDate()
+  @go_tomorrow = ->
+    @setTime new Date(@valueOf()+1000*60*60*24)
+  @go_yesterday = ->
+    @setTime new Date(@valueOf()-1000*60*60*24)
+
+`this.Cal = Calendar`

data/vendor/assets/javascripts/input_calendar.js

@@ -0,0 +1,228 @@
+(function() {
+  var $, DateHelper, dh;
+  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  $ = jQuery;
+  this.Calendar = (function() {
+    function Calendar(id, field, options) {
+      this.id = id;
+      this.field = field;
+      this.options = options != null ? options : {};
+      this.field = $("#" + this.field);
+      if (this.id != null) {
+        this.element = $("#" + this.id);
+      } else {
+        this.element = $("<div>").insertAfter(this.field);
+      }
+      this.show();
+      this.getDateFromField();
+      this.pager_date = new Date(this.date);
+      this.redraw();
+    }
+    Calendar.attach = function(field, options) {
+      return new Calendar(null, field, options);
+    };
+    Calendar.prototype.getDateFromField = function() {
+      var day, month, year, _ref;
+      this.date = new Date;
+      if (this.field.val() === "") {
+        return;
+      }
+      _ref = this.parseIncomingDate(), year = _ref[0], month = _ref[1], day = _ref[2];
+      return this.date = new Date(year, month - 1, day);
+    };
+    Calendar.prototype.parseIncomingDate = function() {
+      var date;
+      date = this.field.val().split(" ")[0];
+      return date.split("-").map(function(x) {
+        return parseInt(x);
+      });
+    };
+    Calendar.prototype.show = function() {
+      return this.element.show();
+    };
+    Calendar.prototype.hide = function() {
+      return this.element.hide();
+    };
+    Calendar.prototype.label = function() {
+      return this.MONTHS[this.pager_date.getMonth()].label + " " + this.pager_date.getFullYear();
+    };
+    Calendar.prototype.MONTHS = [
+      {
+        label: 'January',
+        days: 31
+      }, {
+        label: 'February',
+        days: 28
+      }, {
+        label: 'March',
+        days: 31
+      }, {
+        label: 'April',
+        days: 30
+      }, {
+        label: 'May',
+        days: 31
+      }, {
+        label: 'June',
+        days: 30
+      }, {
+        label: 'July',
+        days: 31
+      }, {
+        label: 'August',
+        days: 31
+      }, {
+        label: 'September',
+        days: 30
+      }, {
+        label: 'October',
+        days: 31
+      }, {
+        label: 'November',
+        days: 30
+      }, {
+        label: 'December',
+        days: 31
+      }
+    ];
+    Calendar.prototype.DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    Calendar.prototype.dayRows = function() {
+      var day;
+      return ((function() {
+        var _i, _len, _ref, _results;
+        _ref = this.DAYS;
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          day = _ref[_i];
+          _results.push("<th>" + day.slice(0, 1) + "</th>");
+        }
+        return _results;
+      }).call(this)).join("");
+    };
+    Calendar.prototype.forward = function() {
+      dh(this.pager_date).forward_a_month();
+      this.redraw();
+      return false;
+    };
+    Calendar.prototype.back = function() {
+      dh(this.pager_date).back_a_month();
+      this.redraw();
+      return false;
+    };
+    Calendar.prototype.days_in_month = function(date) {
+      var length, month, year, _ref;
+      _ref = [date.getMonth(), date.getFullYear()], month = _ref[0], year = _ref[1];
+      length = this.MONTHS[month].days;
+      return (month == 1 && (year % 4 == 0) && (year % 100 != 0)) ? 29 : length;;
+    };
+    Calendar.prototype.buildDateCells = function() {
+      var date, day, first_day, html, i, month, _i, _len, _ref;
+      date = dh(new Date(this.pager_date));
+      date.setDate(1);
+      month = this.pager_date.getMonth();
+      first_day = date.getDay();
+      for (i = 1; 1 <= first_day ? i <= first_day : i >= first_day; 1 <= first_day ? i++ : i--) {
+        date.go_yesterday();
+      }
+      html = "";
+      i = 0;
+      while (i < this.days_in_month(date) + first_day - 1) {
+        html += "<tr>";
+        _ref = this.DAYS;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          day = _ref[_i];
+          html += this.buildDayCell(date, month);
+          date.go_tomorrow();
+          i += 1;
+        }
+        html += "</tr>";
+      }
+      return html;
+    };
+    Calendar.prototype.buildDayCell = function(date, month) {
+      var classes;
+      classes = [];
+      classes.push("day");
+      if (date.getMonth() !== month) {
+        classes.push("othermonth");
+      }
+      if (date.same_as(new Date())) {
+        classes.push("today");
+      }
+      if (date.same_as(this.date)) {
+        classes.push("selected");
+      }
+      return "<td class='" + (classes.join(" ")) + "'><a data-date='" + (date.toLocaleString()) + "' href='#'>" + (date.getDate()) + "</a></td>";
+    };
+    Calendar.prototype.clicked = function(event) {
+      var o;
+      o = $(event.target);
+      if (o[0].tagName === "TD") {
+        o = o.children("A");
+      }
+      this.date = new Date(Date.parse(o.data("date")));
+      this.field.val(this.date.toLocaleDateString());
+      this.element.find(".selected").removeClass("selected");
+      o.parent().addClass("selected");
+      this.element.find(".selectedtext").html(this.currentDateString());
+      if (this.options.onchange) {
+        this.options.onchange(this.field.val());
+      }
+      return false;
+    };
+    Calendar.prototype.currentDateString = function() {
+      return "<b>" + this.DAYS[this.date.getDay()] + "</b><br />" + this.MONTHS[this.date.getMonth()].label + " " + (this.date.getDate()) + ", " + (this.date.getFullYear());
+    };
+    Calendar.prototype.redraw = function() {
+      var html;
+      html = "<table class=\"minicalendar\" cellspacing=\"0\">\n<thead>  \n   <tr><th class=\"back\"><a href=\"#\">&larr;</a></th>\n       <th colspan=\"5\" class=\"month_label\">" + (this.label()) + "</th>\n       <th class=\"forward\"><a href=\"#\">&rarr;</a></th></tr>\n   <tr class=\"day_header\">" + (this.dayRows()) + "</tr>\n </thead>\n <tbody>" + (this.buildDateCells()) + "</tbody>\n <tfoot>\n   <tr><td colspan=\"7\" class=\"selectedtext\">" + (this.currentDateString()) + "</td></tr>\n </tfoot>\n </table>";
+      this.element.html(html);
+      this.element.find("th.back").click(__bind(function() {
+        return this.back();
+      }, this));
+      this.element.find("th.forward").click(__bind(function() {
+        return this.forward();
+      }, this));
+      return this.element.find("tbody").click(__bind(function(event) {
+        return this.clicked(event);
+      }, this));
+    };
+    return Calendar;
+  })();
+  dh = function(date) {
+    _.extend(date, DateHelper);
+    return date;
+  };
+  DateHelper = (function() {
+    function DateHelper() {}
+    DateHelper.forward_a_month = function(count) {
+      var d, month;
+      if (count == null) {
+        count = 1;
+      }
+      month = this.getMonth() + count;
+      d = new Date(this.getFullYear(), month, 1);
+      return this.setTime(d);
+    };
+    DateHelper.back_a_month = function(count) {
+      var d, month;
+      if (count == null) {
+        count = 1;
+      }
+      month = this.getMonth() - count;
+      d = new Date(this.getFullYear(), month, 1);
+      return this.setTime(d);
+    };
+    DateHelper.same_as = function(date) {
+      return this.getFullYear() === date.getFullYear() && this.getMonth() === date.getMonth() && this.getDate() === date.getDate();
+    };
+    DateHelper.go_tomorrow = function() {
+      return this.setTime(new Date(this.valueOf() + 1000 * 60 * 60 * 24));
+    };
+    DateHelper.go_yesterday = function() {
+      return this.setTime(new Date(this.valueOf() - 1000 * 60 * 60 * 24));
+    };
+    return DateHelper;
+  })();
+  this.Cal = Calendar;
+}).call(this);

data/vendor/assets/stylesheets/input_calendar.css

@@ -0,0 +1,54 @@
+table.minicalendar
+{
+  border-collapse:collapse;
+  border:2px solid #aaa;
+}
+
+table.minicalendar tr td
+{
+  padding:3px;
+  background:white;
+}
+
+table.minicalendar tr th
+{
+  text-align:center;
+}
+
+table.minicalendar tr td.today
+{
+  background:#CDD9EB;
+}
+
+table.minicalendar tr td.othermonth
+{
+  background:#eee;
+}
+
+table.minicalendar tr td.othermonth a { color:#999;}
+
+table.minicalendar td.day
+{
+  text-align:center;
+  font-size:0.8em;
+  cursor:pointer;
+}
+
+table.minicalendar td.selected
+{
+  background:#000 !important;
+}
+
+table.minicalendar td.day a { text-decoration:none; }
+table.minicalendar td.selected a { color:white;   color:gold; }
+
+table.minicalendar tfoot tr td
+{
+  text-align:center;
+  font-size:0.8em;
+  padding:5px 0;
+}
+table.minicalendar tfoot tr td b
+{
+  color:#111;
+}

metadata

@@ -0,0 +1,80 @@
+--- !ruby/object:Gem::Specification 
+name: input_calendar
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Josh Goebel
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-06-07 00:00:00 -04:00
+default_executable: 
+dependencies: []
+
+description: Simple and clean JS calendar to enter dates on forms
+email: 
+- me@joshgoebel.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- example.png
+- input_calendar.gemspec
+- lib/input_calendar.rb
+- lib/input_calendar/tasks/copy_files.rake
+- lib/input_calendar/version.rb
+- src/calendar.coffee
+- vendor/assets/javascripts/input_calendar.js
+- vendor/assets/stylesheets/input_calendar.css
+has_rdoc: true
+homepage: http://github.com/yyyc514/input_calendar
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: input_calendar
+rubygems_version: 1.6.2
+signing_key: 
+specification_version: 3
+summary: Simple and clean JS calendar to enter dates on forms
+test_files: []
+