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 +6 -0
- data/example.html +18 -1
- data/lib/input_calendar/version.rb +1 -1
- data/src/calendar.coffee +13 -3
- data/vendor/assets/javascripts/input_calendar.js +17 -3
- metadata +3 -3
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
|
-
<
|
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>
|
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
|
-
|
115
|
-
|
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">#{@
|
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.
|
179
|
-
|
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=\"#\">←</a></th>\n <th colspan=\"5\" class=\"month_label\">" + (this.label()) + "</th>\n <th class=\"forward\"><a href=\"#\">→</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.
|
197
|
+
html = "<table class=\"" + this.options["class"] + "\" cellspacing=\"0\">\n<thead> \n <tr><th class=\"back\"><a href=\"#\">←</a></th>\n <th colspan=\"5\" class=\"month_label\">" + (this.label()) + "</th>\n <th class=\"forward\"><a href=\"#\">→</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:
|
4
|
+
hash: 23
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 0.0.
|
9
|
+
- 4
|
10
|
+
version: 0.0.4
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Josh Goebel
|