• R/O
  • SSH

micro-calendar: Commit

calendar gui


Commit MetaInfo

Revisionaf863c424074c33d1346de42dae50740fd770351 (tree)
Time2017-04-13 14:51:54
Authorfrostbane <frostbane@prog...>
Commiterfrostbane

Log Message

(empty log message)

Change Summary

Incremental Difference

diff -r 000000000000 -r af863c424074 .hgflow
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/.hgflow Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,7 @@
1+[branchname]
2+master = default
3+develop = develop
4+feature = feature/
5+release = release/
6+hotfix = hotfix/
7+support = support/
diff -r 000000000000 -r af863c424074 .hgignore
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/.hgignore Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,6 @@
1+syntax: regexp
2+tmp\/.*
3+.zim\/.*
4+bin/*
5+doc/*
6+node_modules/*
diff -r 000000000000 -r af863c424074 .npmignore
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/.npmignore Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,1 @@
1+node_modules/
\ No newline at end of file
diff -r 000000000000 -r af863c424074 LICENSE.md
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/LICENSE.md Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,44 @@
1+# Copyright (c) 2016, 2017 Frostbane Ac. All rights reserved. #
2+
3+Redistribution and use in source and binary forms - with or without
4+modification - are permitted for any purpose, provided that
5+redistributions in source form retain this entire copyright notice and
6+indicate the origin and nature of any modifications.
7+
8+Outright copyright infringement
9+
10+* Don't just copy this and change the name.
11+
12+* Selling the unmodified original with no work done what-so-ever
13+
14+* Modifying the original work to contain hidden harmful content.
15+
16+
17+```
18+THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED
19+WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
20+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
21+IN NO EVENT SHALL FROSTBANE AC BE LIABLE FOR ANY DIRECT, INDIRECT,
22+INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
23+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS
24+OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
26+TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
27+USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH
28+DAMAGE.
29+```
30+
31+Redistribution and use in source and binary forms, with or without
32+modification, are permitted provided that the following conditions are
33+met:
34+
35+1. Redistributions of source code must retain the above copyright
36+notice, this list of conditions and the following disclaimer.
37+
38+2. Redistributions in binary form must reproduce the above copyright
39+notice, this list of conditions and the following disclaimer in the
40+documentation and/or other materials provided with the distribution.
41+
42+3. Neither the name of micro-dialog nor the names of its
43+contributors may be used to endorse or promote products derived from
44+this software without specific prior written permission.
diff -r 000000000000 -r af863c424074 jsdoc.conf.json
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/jsdoc.conf.json Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,26 @@
1+{
2+ "plugins" : [],
3+ "templates": {
4+ "cleverLinks" : true,
5+ "monospaceLinks" : true,
6+ "default" : {
7+ "outputSourceFiles": true
8+ },
9+ "applicationName": "micro-calendar",
10+ "disqus" : "",
11+ "googleAnalytics": "",
12+ "openGraph" : {
13+ "title" : "",
14+ "type" : "website",
15+ "image" : "",
16+ "site_name": "",
17+ "url" : ""
18+ },
19+ "meta" : {
20+ "title" : "",
21+ "description": "",
22+ "keyword" : ""
23+ },
24+ "linenums" : true
25+ }
26+}
diff -r 000000000000 -r af863c424074 package.json
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/package.json Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,35 @@
1+{
2+ "name" : "micro-calendar",
3+ "version" : "v0.0.0",
4+ "description" : "Calendar widget",
5+ "repository" : {
6+ "type": "hg",
7+ "url" : "https://bitbucket.org/frostbane/micro-calendar"
8+ },
9+ "main" : "./microcalendar.js",
10+ "license" : "SEE LICENSE IN LICENSE.md",
11+ "keywords" : [
12+ "micro-calendar",
13+ "calendar-micro",
14+ "calendar",
15+ "widget",
16+ "dialog"
17+ ],
18+ "devDependencies": {
19+ "jxunit" : "latest",
20+ "grunt-jxunit" : "latest",
21+ "jsdoc" : "latest",
22+ "jsdoc-sable" : "latest",
23+ "grunt" : "latest",
24+ "grunt-cli" : "latest",
25+ "grunt-jsdoc" : "latest",
26+ "grunt-contrib-copy" : "latest",
27+ "grunt-contrib-uglify": "latest"
28+ },
29+ "dependencies": {
30+ },
31+ "author" : {
32+ "name" : "Frostbane Ac",
33+ "email": "frostbane@programmer.net"
34+ }
35+}
diff -r 000000000000 -r af863c424074 src/calendar.css
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/calendar.css Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,138 @@
1+/*
2+ * toc
3+ *
4+ * date
5+ * time
6+ *
7+ *
8+ */
9+
10+
11+
12+/* date
13+ ^----------------------------------------------------------------- */
14+
15+.prototype-calendar-root {
16+ position : relative;
17+ width : 255px;
18+}
19+
20+.prototype-calendar {
21+ margin-bottom : 10px;
22+}
23+
24+.prototype-calendar .monthSelector {
25+ text-align : center;
26+ font-size : 16px;
27+ color : #616161;
28+ margin-bottom : 5px;
29+}
30+
31+.prototype-calendar .monthSelector button {
32+ float : left;
33+ /*border : 0;*/
34+ /*text-indent : -9000px;*/
35+ /*width : 20px;*/
36+ /*height : 20px;*/
37+ cursor : pointer;
38+}
39+
40+.prototype-calendar .monthSelector button.back {
41+ /*background : url('../images/backArrow.png') no-repeat;*/
42+}
43+
44+.prototype-calendar .monthSelector button.next {
45+ /*background : url('../images/forwardArrow.png') no-repeat;*/
46+ float : right;
47+}
48+
49+.prototype-calendar th,
50+.prototype-calendar td {
51+ border : 1px solid #DBDBDB;
52+}
53+
54+.prototype-calendar table td,
55+.prototype-calendar table th {
56+ width : 30px;
57+ height : 20px;
58+ line-height : 20px;
59+ text-align : center;
60+}
61+
62+.prototype-calendar th {
63+ color : #FFF;
64+ font-size : 16px;
65+ /*background : #00B1E8 url('../images/calendarHeaderBg.png') repeat-x;*/
66+ background : #00B1E8 repeat-x;
67+}
68+
69+.prototype-calendar table td:hover {
70+ background : #F2F2F2;
71+ cursor : pointer;
72+}
73+
74+.prototype-calendar table td.notThisMonth {
75+ background : #EAE7E7;
76+ color : #DAD7D7;
77+ cursor : auto;
78+}
79+
80+.prototype-calendar table td.selected {
81+ background : #A7DEEF;
82+}
83+
84+
85+
86+/* time
87+ ^----------------------------------------------------------------- */
88+
89+.prototype-calendar .timeSelector {
90+ /*position : absolute;*/
91+ /*bottom : 155px;*/
92+ /*left : 65px;*/
93+ background : #FFF;
94+ box-shadow : 0 0 10px #CCC;
95+ z-index : 100;
96+ width : 350px;
97+ height : 120px;
98+ padding : 20px 10px;
99+ border : 1px solid #A6A6A6;
100+}
101+
102+.prototype-calendar .timeSelector button.close {
103+ /*border : 0;*/
104+ width : 22px;
105+ height : 22px;
106+ /*background : url('../images/closeButton.png') no-repeat;*/
107+ cursor : pointer;
108+ float : right;
109+ margin-top : -10px;
110+}
111+
112+.prototype-calendar .timeSelector .date {
113+ font-size : 16px;
114+ color : #00B1E8;
115+ margin-bottom : 10px;
116+}
117+
118+.prototype-calendar .timeSelector .selectContainer {
119+ background : #F4F4F4;
120+ padding : 10px;
121+}
122+
123+.prototype-calendar .timeSelector .selectContainer div {
124+ margin-bottom : 5px;
125+ font-size : 16px;
126+ color : #616161;
127+}
128+
129+.prototype-calendar .timeSelector .selectContainer button {
130+ background : #00B1E8;
131+ color : #FFF;
132+ font-size : 12px;
133+ border : 0;
134+ width : 80px;
135+ height : 22px;
136+ float : right;
137+ cursor : pointer;
138+}
diff -r 000000000000 -r af863c424074 src/calendar.html
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/calendar.html Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,51 @@
1+<!doctype html>
2+<html lang="en-GB">
3+<head>
4+ <meta charset="utf-8">
5+ <link type="text/css"
6+ rel="stylesheet"
7+ href="calendar.css" />
8+</head>
9+
10+<body>
11+
12+<div>
13+ <div class="selected-date"></div>
14+</div>
15+
16+<br />
17+<hr />
18+
19+<div class="calendar-widget"></div>
20+<br />
21+
22+<div id="scripts"
23+ style="display: none !important;">
24+ <script type="text/javascript"
25+ src="prototype.js"></script>
26+ <script type="text/javascript"
27+ src="calendar.js"></script>
28+ <script type="text/javascript">
29+ document.observe('dom:loaded', function(){
30+ window.calendar = new CalendarUI({
31+ containers: '.calendar-widget',
32+ selectInputs:'.selected-date',
33+
34+ months :["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",],
35+ weekdays :['日', '月', '火', '水', '木', '金', '土'],
36+
37+ setMonthName: function(dateNow){
38+ return dateNow.getFullYear() + "年" +
39+ (dateNow.getMonth() + 1) + "月";
40+ },
41+
42+ meridian: ["午前", "午後"],
43+ military: true,
44+
45+ });
46+ });
47+ </script>
48+</div>
49+</body>
50+
51+</html>
diff -r 000000000000 -r af863c424074 src/calendar.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/calendar.js Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,629 @@
1+/* jshint
2+forin: false,
3+nonew: false
4+ */
5+
6+/* global
7+S2,
8+$,
9+$$
10+ */
11+
12+/**
13+ * @class CalendarUI2
14+ */
15+var CalendarUI2 = function(options){
16+ "use strict";
17+
18+ var zIndex = 1000,
19+ baseClass = "prototype-calendar calendar-ui2",
20+ baseSelector = ".prototype-calendar.calendar-ui2";
21+
22+ var inputs = null,
23+ root = null,
24+ calendar = null,
25+ timeSelector = null,
26+ thisMonth = new Date();
27+
28+ var __settings = {
29+ //todo 外に出す(DialogMicroと同じように)
30+ months :['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
31+ weekdays :['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
32+ meridian :["AM", "PM"],
33+ containers :null,
34+ selectInputs :null,
35+ military :true,
36+
37+ //todo add options
38+ days :[],
39+ hasSeconds :false,
40+ setTime :function(){
41+ return {
42+ hours :0,
43+ minutes :0,
44+ seconds :0,
45+ };
46+ },
47+ };
48+
49+ var __functions = {
50+ onselect :function(){},
51+ format :function(date){
52+ return date.toString();
53+ },
54+ setMonthName :null,
55+ parseDate :function(datestr){
56+ return new Date(Date.parse(datestr));
57+ },
58+ };
59+
60+ var openDate,
61+ viewingDate,
62+ selectedDay;
63+
64+ var __keyCodes = {
65+ enter :13,
66+ up :38,
67+ down :40,
68+ left :37,
69+ right :39,
70+ escape :27,
71+ delete :46,
72+ backSpace :8,
73+ };
74+
75+ var __build = function(input){
76+
77+ var __buildRoot = function(){
78+ var rect = input.cumulativeOffset();
79+
80+ var calendarType = "calendar-" +
81+ input.getAttribute("data-calendar-type");
82+
83+ var div = document.createElement("DIV");
84+ div.setStyle({
85+ top :(rect.top + input.clientHeight) + "px",
86+ left :rect.left + "px",
87+ zIndex :zIndex + 1,
88+ });
89+ div.addClassName(baseClass + " calendar " + calendarType);
90+ div.setAttribute("tabindex", "1");
91+
92+ return div;
93+
94+ };
95+
96+ var __buildHeader = function(root){
97+ var backButton = new Element('button', {
98+ type :'button',
99+ className :'back'
100+ }).update('&laquo;');
101+
102+ if(__settings.minDate !== undefined &&
103+ new Date(viewingDate.getFullYear(), viewingDate.getMonth() - 1, 1) < new Date(__settings.minDate.getFullYear(), __settings.minDate.getMonth(), 1)){
104+ backButton.setAttribute("disabled", true);
105+
106+ }else{
107+ backButton.observe('click', function(){
108+ viewingDate.setMonth(viewingDate.getMonth() - 1);
109+ __rebuildCalendar();
110+ }.bind(this));
111+
112+ }
113+
114+ var nextButton = new Element('button', {
115+ type :'button',
116+ className :'next'
117+ }).update('&raquo;');
118+
119+ if(__settings.maxDate !== undefined &&
120+ new Date(viewingDate.getFullYear(), viewingDate.getMonth() + 1, 1) > new Date(__settings.maxDate.getFullYear(), __settings.maxDate.getMonth(), 1)){
121+ nextButton.setAttribute("disabled", true);
122+
123+ }else{
124+ nextButton.observe('click', function(){
125+ viewingDate.setMonth(viewingDate.getMonth() + 1);
126+ __rebuildCalendar();
127+ }.bind(this));
128+ }
129+
130+
131+ var dragHandle = new Element("div", {
132+ className :"dragHandle",
133+ });
134+ dragHandle.appendChild(backButton);
135+ dragHandle.appendChild(nextButton);
136+
137+ var monthSelector = new Element('div', {
138+ className :'monthSelector'
139+ });
140+ root.appendChild(monthSelector);
141+ monthSelector.appendChild(dragHandle);
142+
143+ var monthNameLink = new Element("a");
144+ monthNameLink.update(__setMonthName());
145+ monthNameLink.setAttribute("tabindex", "-1");
146+
147+ var monthName = new Element('div');
148+ monthName.addClassName("monthName");
149+ monthName.appendChild(monthNameLink);
150+ monthSelector.appendChild(monthName);
151+
152+ $(document.body).appendChild(root);
153+
154+ var table = new Element('table');
155+ root.appendChild(table);
156+
157+ $(monthNameLink).observe("click", __changeViewDate.bind(input));
158+ };
159+
160+ var __changeViewDate = function(e){
161+ //console.log(e);
162+ var yearMonthInput = new Element("input");
163+ yearMonthInput.setAttribute("type", "text");
164+ yearMonthInput.addClassName("change-year-month");
165+ yearMonthInput.value = viewingDate.getFullYear() + "/" +
166+ (viewingDate.getMonth() + 1);
167+
168+ $(e.target).replace(yearMonthInput);
169+ $$(baseSelector + " button").map(function(button){
170+ button.setStyle({
171+ display :"none",
172+ });
173+ });
174+
175+ var setNewViewDate = function(e){
176+ var inputValue = new RegExp("^ *([0-9]{4})[ /-]+([0-1]?[0-9]) *$")
177+ .exec(e.target.value);
178+ var valueStrArr = inputValue ?
179+ inputValue.splice(1) :
180+ "";
181+
182+ var newDate = valueStrArr.length === 2 ?
183+ new Date(valueStrArr[0], valueStrArr[1] - 1, 1) :
184+ viewingDate;
185+
186+ viewingDate = isNaN(newDate) ?
187+ viewingDate :
188+ newDate;
189+
190+ //var aaa = new Element("a");
191+ //aaa.update(__setMonthName());
192+ //aaa.setAttribute("tabindex", "-1");
193+ //
194+ //$(e.target).replace(aaa);
195+ //$(aaa).observe("click", __changeViewDate.bind(this));
196+ //
197+ //$$(baseSelector + " button").map(function(button){
198+ // button.setStyle({
199+ // display :"",
200+ // });
201+ //});
202+
203+ __rebuildCalendar();
204+ };
205+
206+ $(yearMonthInput).observe("blur", setNewViewDate);
207+ $(yearMonthInput).observe("keydown", function(e){
208+ if(e.keyCode === __keyCodes.enter){
209+ $(yearMonthInput).stopObserving("blur", setNewViewDate);
210+ setNewViewDate(e);
211+ }
212+ });
213+
214+ $(yearMonthInput).focus();
215+ $(yearMonthInput).select();
216+
217+ };
218+
219+ var __buildWeekDays = function(){
220+ var table = $$(baseSelector + " table")[0];
221+
222+ var thead = new Element('thead');
223+ table.appendChild(thead);
224+
225+ thead.update('');
226+ //todo maybe stop using tables
227+ var header = new Element('tr');
228+ thead.appendChild(header);
229+
230+ for(var i = 0; i < 7; i++){
231+ var th = new Element('th')
232+ .update(__settings.weekdays[i]);
233+
234+ header.appendChild(th);
235+ }
236+ };
237+
238+ var __buildDays = function(){
239+ var table = $$(baseSelector + " table")[0];
240+
241+ var tbody = new Element('tbody');
242+ table.appendChild(tbody);
243+
244+ tbody.update('');
245+
246+ thisMonth.setDate(1);
247+ thisMonth.setMonth(viewingDate.getMonth());
248+ thisMonth.setYear(viewingDate.getFullYear());
249+
250+ var totalDays = __daysInMonth(thisMonth.getMonth(), thisMonth.getFullYear());
251+ var daysInPrevMonth = __daysInMonth(thisMonth.getMonth() - 1, thisMonth.getFullYear());
252+ var daysInNextMonth = __daysInMonth(thisMonth.getMonth() + 1, thisMonth.getFullYear());
253+
254+ var startPadding = thisMonth.getDay();
255+ var start = 0 - startPadding;
256+ ///! 42 was chosen so that the calendar will have a constant height
257+ var endPadding = 42 - (startPadding + totalDays);
258+ //var endPadding = 7 - (startPadding + totalDays) % 7;
259+ var row;
260+
261+ var now = new Date();
262+ var todayClass = viewingDate.getMonth() === now.getMonth() ?
263+ "today" :
264+ "";
265+
266+ for(var i = start; i < (totalDays + endPadding); i++){
267+ if(i === start || (i + startPadding) % 7 === 0){
268+ row = new Element('tr');
269+ tbody.appendChild(row);
270+ }
271+
272+ var day;
273+ var td = new Element('td');
274+
275+ if(i >= 0 && i < totalDays){
276+ day = i + 1;
277+
278+ if((__settings.maxDate !== undefined &&
279+ new Date(viewingDate.getFullYear(), viewingDate.getMonth(), day) > __settings.maxDate) ||
280+ (__settings.minDate !== undefined &&
281+ new Date(viewingDate.getFullYear(), viewingDate.getMonth(), day) < __settings.minDate)){
282+
283+ td.addClassName('invalidDay');
284+
285+ }else{
286+ td.observe('click', __dayClick.bind(this));
287+ td.setAttribute("tabindex", "-1");
288+
289+ }
290+
291+ td.store('day', day);
292+
293+ td.addClassName('thisMonth');
294+
295+
296+ }
297+ else{
298+ if(i >= totalDays)
299+ day = i - (totalDays - 1);
300+ else
301+ day = daysInPrevMonth + i + 1;
302+
303+ td.addClassName('notThisMonth');
304+
305+ }
306+
307+ if(day === now.getDay())
308+ td.addClassName(todayClass);
309+
310+ if(i === start || (i + startPadding) % 7 === 0)
311+ td.addClassName("sunday");
312+ else if((i + startPadding + 1) % 7 === 0)
313+ td.addClassName("saturday");
314+
315+ var a = new Element("a");
316+ a.update(day);
317+ td.appendChild(a);
318+
319+ row.appendChild(td);
320+ }
321+
322+ };
323+
324+ var __setMonthName = function(){
325+ var defaultName = __settings.months[viewingDate.getMonth()] +
326+ ' ' +
327+ viewingDate.getFullYear();
328+
329+ if(typeof __functions.setMonthName === typeof function(){}){
330+ defaultName = __functions.setMonthName(viewingDate);
331+ }
332+
333+ return defaultName;
334+ };
335+
336+ var __daysInMonth = function(month, year){
337+ return 32 - new Date(year, month, 32).getDate();
338+ };
339+
340+ var __clearSelectedDay = function(){
341+ var tbody = $$(baseSelector + " table tbody")[0];
342+
343+ tbody.select('td').each(function(element){
344+ element.removeClassName('selected');
345+ });
346+
347+ };
348+
349+ var __dayClick = function(event){
350+ __clearSelectedDay();
351+
352+ var element = event.currentTarget
353+ .addClassName('selected');
354+
355+ selectedDay = element.retrieve('day');
356+
357+ var prevDate = new Date(openDate.getTime());
358+
359+ var selectedDate = viewingDate;
360+ selectedDate.setDate(selectedDay);
361+
362+ var typefunc = typeof function(){};
363+
364+ if(typeof __functions.format === typefunc){
365+ input.value = __functions.format(selectedDate);
366+ }
367+
368+ if(typeof __functions.onselect === typefunc){
369+ __functions.onselect.call(null, {
370+ date :selectedDate,
371+ el :input,
372+ //week :NaN, //future
373+ previousDate :prevDate,
374+ });
375+ }
376+
377+ __closeCalendar();
378+ //__drawTimeSelector();
379+ };
380+
381+ var __buildCalendar = function(basediv){
382+ __buildHeader(basediv);
383+ __buildWeekDays();
384+ __buildDays();
385+
386+ new S2.UI.Behavior.Drag($$(baseSelector + ".calendar")[0], {
387+ handle :$$(baseSelector + " .dragHandle")[0]
388+ });
389+
390+ };
391+
392+ var __rebuildCalendar = function(){
393+ root.update("");
394+ __buildCalendar(root);
395+ };
396+
397+ root = __buildRoot();
398+ __buildCalendar(root);
399+
400+ };
401+
402+ var __createCalendar = function(){
403+ var input = this; //e.originalTarget;
404+
405+ __closeCalendar();
406+ var windowrect = {
407+ width :window.innerWidth,
408+ height :window.innerHeight,
409+ left :input.cumulativeOffset().left,
410+ };
411+
412+ var overlay = document.createElement("DIV");
413+ overlay.setStyle({
414+ zIndex :zIndex,
415+ });
416+ overlay.addClassName("overlay " + baseClass);
417+
418+ $(document.body).appendChild(overlay);
419+ $(overlay).observe("click", __closeCalendar);
420+
421+ __build(input);
422+ openDate = new Date(viewingDate.getTime());
423+ var calendar = $$(baseSelector + ".calendar")[0];
424+ input.blur();
425+ //calendar.getElementsBySelector(".monthName")[0].focus();
426+ //calendar.removeAttribute("tabindex");
427+
428+ __reposition(windowrect);
429+
430+ //Event.observe(window, "resize", function(){
431+ // var w = window.innerWidth;
432+ //
433+ // window.setTimeout(function(){
434+ // if(w === window.innerWidth){
435+ // __reposition({
436+ // width :window.innerWidth,
437+ // height :window.innerHeight,
438+ // });
439+ //
440+ //
441+ // }
442+ // //else {
443+ // // console.log("resizing");
444+ // //}
445+ //
446+ // }, 250);
447+ //
448+ //});
449+
450+ $(document.body).observe("keyup", __keyEventHandler);
451+
452+ };
453+
454+ var __keyEventHandler = function(e){
455+ if(e.keyCode === __keyCodes.escape)
456+ __closeCalendar();
457+
458+ };
459+
460+ var __focused = function(e){
461+ if($$(".overlay" + baseSelector).length > 0)
462+ return;
463+
464+ var input = this; //e.originalTarget;
465+
466+ var date = __functions.parseDate(input.value);
467+ viewingDate = isNaN(date) ?
468+ new Date() :
469+ date;
470+
471+ __createCalendar.call(input);
472+
473+ };
474+
475+ var __reposition = function(windowrect){
476+ var calendar = $$(baseSelector + ".calendar")[0];
477+
478+ var offsetLeft = calendar.offsetLeft;
479+ var left = calendar.getStyle("left");
480+
481+ calendar.setStyle({
482+ "left" :0
483+ });
484+
485+ var clientWidth = calendar.clientWidth;
486+ var calendarRightBound = offsetLeft + clientWidth;
487+
488+ calendar.setStyle({
489+ "left" :left,
490+ });
491+
492+ if(calendarRightBound > windowrect.width){
493+ if(clientWidth >= windowrect.width){
494+ calendar.setStyle({
495+ left :0,
496+ });
497+
498+ }else{
499+ calendar.setStyle({
500+ left :Math.ceil((windowrect.width - clientWidth + 1) / 2) + "px",
501+ });
502+
503+ }
504+
505+ }
506+ //else{
507+ // calendar.setStyle({
508+ // left :windowrect.left + "px",
509+ // });
510+ //
511+ //}
512+
513+ };
514+
515+ var __closeCalendar = function(e){
516+ var calendar = $$(baseSelector);
517+
518+ calendar.map(function(div){
519+ div.remove();
520+ });
521+
522+ $(document.body).stopObserving("keyup", __keyEventHandler);
523+ };
524+
525+ var __initInput = function(input, options){
526+ input.setAttribute("data-calendar-type", options.type);
527+
528+ input.setAttribute("readonly", "");
529+
530+ $(input).observe("focus", __focused);
531+ };
532+
533+ /**
534+ * @summary
535+ * キャレンダーの日付を更新する
536+ *
537+ * @param {Date} date
538+ * @param {Number} [index] el の 0-based インデックス
539+ *
540+ * @private
541+ */
542+ var __setViewingDate = function(date, index){
543+ viewingDate = date;
544+
545+ if(typeof __functions.format === typeof function(){}){
546+ if(typeof index !== typeof undefined)
547+ inputs[index].value = __functions.format(date);
548+ else
549+ inputs.map(function(input){
550+ input.value = __functions.format(date);
551+ });
552+ }
553+
554+ };
555+
556+ /**
557+ * @constructor
558+ *
559+ * @private
560+ */
561+ var __initialize = function(options){
562+ //if($$(".style.prototype-calendar.calendar-ui2").length <= 0){
563+ // var style = document.createElement("STYLE");
564+ // style.addClassName("style " + baseClass);
565+ // //style.update("" +
566+ // // baseSelector + " {" +
567+ // // "padding: 5px;" +
568+ // // "}" +
569+ // // "");
570+ //
571+ // $(document.body).appendChild(style);
572+ //}
573+
574+ inputs = $$(options.selector);
575+
576+ __functions.onselect = options.onselect || __functions.onselect;
577+ __functions.format = options.format || __functions.format;
578+ __functions.setMonthName = options.setMonthName || __functions.setMonthName;
579+ __functions.parseDate = options.parseDate || __functions.parseDate;
580+ __settings.months = options.months || __settings.months;
581+ __settings.weekdays = options.weekdays || __settings.weekdays;
582+ __settings.minDate = options.minDate || undefined;
583+ __settings.maxDate = options.maxDate || undefined;
584+
585+ inputs.map(function(input){
586+ __initInput(input, options);
587+ });
588+
589+ };
590+
591+ __initialize(options);
592+
593+ return {
594+ initialize :__initialize,
595+ getRoot :function(){
596+ return root;
597+ },
598+ getFunctions :function(){
599+ return __functions;
600+ },
601+ getInputs :function(){
602+ return inputs;
603+ },
604+ setDate :__setViewingDate,
605+ };
606+
607+
608+};
609+
610+/**
611+ *
612+ * @type {{DATE: string, DATE_TIME: string, DATE_TIME_SECONDS: string, TIME: string, TIME_SECONDS: string, WEEK: string, WEEK_TIME: string, WEEK_TIME_SECONDS: string, MONTH: string, MONTH_TIME: string, MONTH_TIME_SECONDS: string, YEAR: string, YEAR_TIME: string, YEAR_TIME_SECONDS: string}}
613+ */
614+CalendarUI2.types = {
615+ DATE :"DATE",
616+ DATE_TIME :"DATE_TIME",
617+ DATE_TIME_SECONDS :"DATE_TIME_SECONDS",
618+ TIME :"TIME",
619+ TIME_SECONDS :"TIME_SECONDS",
620+ WEEK :"WEEK",
621+ WEEK_TIME :"WEEK_TIME",
622+ WEEK_TIME_SECONDS :"WEEK_TIME_SECONDS",
623+ MONTH :"MONTH",
624+ MONTH_TIME :"MONTH_TIME",
625+ MONTH_TIME_SECONDS :"MONTH_TIME_SECONDS",
626+ YEAR :"YEAR",
627+ YEAR_TIME :"YEAR_TIME",
628+ YEAR_TIME_SECONDS :"YEAR_TIME_SECONDS",
629+};
diff -r 000000000000 -r af863c424074 src/calendar.tmp.css
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/calendar.tmp.css Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,107 @@
1+.prototype-calendar.calendar-ui2 {
2+ padding : 5px;
3+ border : 1px solid;
4+ position : absolute;
5+ background-color : #FFF;
6+ border-radius : 4px;
7+}
8+
9+.prototype-calendar.calendar-ui2 thead th {
10+ padding : 5px;
11+ width : 40px;
12+ text-align : center;
13+}
14+
15+.prototype-calendar.calendar-ui2 tbody td {
16+ height : 30px;
17+ line-height : 30px;
18+ text-align : center;
19+}
20+
21+.prototype-calendar.calendar-ui2 a {
22+ color : #00B1E8;
23+ text-decoration : none;
24+ cursor : pointer;
25+}
26+
27+.prototype-calendar.calendar-ui2 .monthName a {
28+ cursor : pointer;
29+}
30+
31+.prototype-calendar.calendar-ui2 tbody td.sunday a {
32+ color : red;
33+}
34+
35+.prototype-calendar.calendar-ui2 tbody td.saturday a {
36+ color : green;
37+}
38+
39+.prototype-calendar.calendar-ui2 tbody td.today a {
40+ color : goldenrod;
41+}
42+
43+.prototype-calendar.calendar-ui2 tbody td.notThisMonth a,
44+.prototype-calendar.calendar-ui2 tbody td.invalidDay a {
45+ color : darkgray;
46+}
47+
48+.prototype-calendar.calendar-ui2 tbody td.notThisMonth:hover,
49+.prototype-calendar.calendar-ui2 tbody td.notThisMonth a:hover,
50+.prototype-calendar.calendar-ui2 tbody td.invalidDay a:hover{
51+ text-decoration : none;
52+ cursor : default;
53+}
54+
55+.prototype-calendar.calendar-ui2.calendar {
56+ width : 350px;
57+}
58+
59+.prototype-calendar.calendar-ui2.overlay {
60+ position : fixed;
61+ top : 0;
62+ left : 0;
63+ right : 0;
64+ bottom : 0;
65+ background-color : #000;
66+ opacity : 0;
67+}
68+
69+.prototype-calendar.calendar-ui2 .monthSelector button {
70+ height : 30px;
71+ line-height : 30px;
72+ width : 30px;
73+ padding : 0;
74+ margin : 0;
75+ font-size : 0.95rem;
76+}
77+
78+.prototype-calendar.calendar-ui2 .monthSelector button.back {
79+}
80+
81+.prototype-calendar.calendar-ui2 .monthSelector button.next {
82+ float : right;
83+}
84+
85+.prototype-calendar.calendar-ui2 .monthSelector .monthName {
86+ text-align : center;
87+}
88+
89+.prototype-calendar.calendar-ui2 .monthSelector input[type="text"] {
90+ padding : 6px 10px;
91+ background-color : #FFF;
92+ border : 1px solid #D1D1D1;
93+ border-radius : 4px;
94+ box-shadow : none;
95+ box-sizing : border-box;
96+ height : 30px;
97+ margin-top : 1.75rem;
98+ /*margin-top : 2.4rem;*/
99+ margin-bottom : 0;
100+ width : 90px;
101+}
102+
103+.prototype-calendar.calendar-ui2.calendar-WEEK tbody tr:hover,
104+.prototype-calendar.calendar-ui2.calendar-DATE tbody td.thisMonth:hover {
105+ background-color : #FFF6AF;
106+}
107+
diff -r 000000000000 -r af863c424074 src/calendar2.html
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/calendar2.html Thu Apr 13 14:51:54 2017 +0900
@@ -0,0 +1,52 @@
1+<!doctype html>
2+<html lang="en-GB">
3+<head>
4+ <meta charset="utf-8">
5+ <link type="text/css"
6+ rel="stylesheet"
7+ href="calendar.tmp.css" />
8+</head>
9+
10+<body>
11+
12+<br />
13+<hr />
14+
15+<div>
16+ <input type="text"
17+ class="calendar-date" />
18+</div>
19+<br />
20+
21+<div id="scripts"
22+ style="display: none !important;">
23+ <script type="text/javascript"
24+ src="prototype.js"></script>
25+ <script type="text/javascript"
26+ src="../scripty2/dist/s2.js"></script>
27+ <script type="text/javascript"
28+ src="calendar.js"></script>
29+ <script type="text/javascript">
30+ document.observe('dom:loaded', function(){
31+ new CalendarUI2({
32+ selector :".calendar-date",
33+ type :CalendarUI2.types.DATE,
34+ onselect :function(e){
35+ console.log(e);
36+ },
37+ format :function(date){
38+ return date.getFullYear() + "/" + (date.getMonth() + 1);
39+ },
40+ months :["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",],
41+ weekdays :["日", "月", "火", "水", "木", "金", "土",],
42+ parseDate :function(datestr){
43+ var arr = datestr.split("/");
44+ return new Date(arr[0], arr[1] - 1, arr[2]);
45+ },
46+ });
47+ });
48+ </script>
49+</div>
50+</body>
51+
52+</html>
Show on old repository browser