input_calendar 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -23,6 +23,12 @@ Or avoid the inline JS with some jQuery (coffeescript) somewhere:
23
23
 
24
24
  * class - custom CSS class (or multiple classes)
25
25
  * onchange - function that is called each time a date is selected
26
+ * footer - underscore.js style template string for the footer
27
+ * Supports: month (full name), day, year, day_of_week (full name)
28
+
29
+ Example of using footer:
30
+
31
+ Calendar.attach("event_date", {footer: "<strong>Due by:</strong> <%= month %> <%= day %>, <%= year %>"})
26
32
 
27
33
  ## Installing
28
34
 
data/example.html CHANGED
@@ -8,15 +8,32 @@
8
8
  <style>
9
9
  body
10
10
  {
11
+ padding:20px;
11
12
  font-family:'Lucida Grande', Helvetica, Arial, sans-serif;
12
13
  background:#eee;
13
14
  }
15
+ h1 { font-size:1.2em;}
16
+ div { float:left; width:225px;}
14
17
  </style>
15
18
  <body>
16
19
 
17
- <input type="text" value="2001-09-21" id="event_date">
20
+ <div>
21
+ <h1>Default</h1>
22
+ <input type="text" value="2001-09-21" id="event_date" readonly>
18
23
  <script>
19
24
  Calendar.attach("event_date")
20
25
  </script>
26
+ </div>
27
+
28
+ <div>
29
+ <h1>Custom text</h1>
30
+ <input type="text" value="2001-09-21" id="event2_date" readonly>
31
+ <script>
32
+ Calendar.attach("event2_date", {footer: "<strong>Due by:</strong> <%= month %> <%= day %>, <%= year %>"})
33
+ </script>
34
+ </div>
35
+
36
+
37
+
21
38
  </body>
22
39
  </html>
@@ -1,3 +1,3 @@
1
1
  module InputCalendar
2
- VERSION = "0.0.3"
2
+ VERSION = "0.0.4"
3
3
  end
data/src/calendar.coffee CHANGED
@@ -10,6 +10,8 @@ class @Calendar
10
10
  @element=$("<div>").insertAfter(@field)
11
11
  @show()
12
12
  @options["class"] ?= "minicalendar"
13
+ if @options.footer
14
+ @footerTemplate = _.template @options.footer
13
15
  # default to today before we try and fetch from the field
14
16
  @date = new Date
15
17
  @getDateFromField()
@@ -111,8 +113,16 @@ class @Calendar
111
113
  @options.onchange(@field.val())
112
114
  false
113
115
 
114
- currentDateString: ->
115
- "<b>#{@DAYS[@date.getDay()]}</b><br />#{@MONTHS[@date.getMonth()].label} #{@date.getDate()}, #{@date.getFullYear()}"
116
+ generateFooter: ->
117
+ if @footerTemplate
118
+ params =
119
+ day: @date.getDate()
120
+ month: @MONTHS[@date.getMonth()].label
121
+ day_of_week: @DAYS[@date.getDay()]
122
+ year: @date.getFullYear()
123
+ @footerTemplate(params)
124
+ else
125
+ "<b>#{@DAYS[@date.getDay()]}</b><br />#{@MONTHS[@date.getMonth()].label} #{@date.getDate()}, #{@date.getFullYear()}"
116
126
 
117
127
  redraw: () ->
118
128
  html = """<table class="#{@options["class"]}" cellspacing="0">
@@ -124,7 +134,7 @@ class @Calendar
124
134
  </thead>
125
135
  <tbody>#{@buildDateCells()}</tbody>
126
136
  <tfoot>
127
- <tr><td colspan="7" class="selectedtext">#{@currentDateString()}</td></tr>
137
+ <tr><td colspan="7" class="selectedtext">#{@generateFooter()}</td></tr>
128
138
  </tfoot>
129
139
  </table>"""
130
140
  @element.html html
@@ -20,6 +20,9 @@
20
20
  } else {
21
21
  _base["class"] = "minicalendar";
22
22
  };
23
+ if (this.options.footer) {
24
+ this.footerTemplate = _.template(this.options.footer);
25
+ }
23
26
  this.date = new Date;
24
27
  this.getDateFromField();
25
28
  this.pager_date = new Date(this.date);
@@ -175,12 +178,23 @@
175
178
  }
176
179
  return false;
177
180
  };
178
- Calendar.prototype.currentDateString = function() {
179
- return "<b>" + this.DAYS[this.date.getDay()] + "</b><br />" + this.MONTHS[this.date.getMonth()].label + " " + (this.date.getDate()) + ", " + (this.date.getFullYear());
181
+ Calendar.prototype.generateFooter = function() {
182
+ var params;
183
+ if (this.footerTemplate) {
184
+ params = {
185
+ day: this.date.getDate(),
186
+ month: this.MONTHS[this.date.getMonth()].label,
187
+ day_of_week: this.DAYS[this.date.getDay()],
188
+ year: this.date.getFullYear()
189
+ };
190
+ return this.footerTemplate(params);
191
+ } else {
192
+ return "<b>" + this.DAYS[this.date.getDay()] + "</b><br />" + this.MONTHS[this.date.getMonth()].label + " " + (this.date.getDate()) + ", " + (this.date.getFullYear());
193
+ }
180
194
  };
181
195
  Calendar.prototype.redraw = function() {
182
196
  var html;
183
- html = "<table class=\"" + this.options["class"] + "\" 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>";
197
+ html = "<table class=\"" + this.options["class"] + "\" 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.generateFooter()) + "</td></tr>\n </tfoot>\n </table>";
184
198
  this.element.html(html);
185
199
  this.element.find("th.back").click(__bind(function() {
186
200
  return this.back();
metadata CHANGED
@@ -1,13 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: input_calendar
3
3
  version: !ruby/object:Gem::Version
4
- hash: 25
4
+ hash: 23
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
8
  - 0
9
- - 3
10
- version: 0.0.3
9
+ - 4
10
+ version: 0.0.4
11
11
  platform: ruby
12
12
  authors:
13
13
  - Josh Goebel