vitalif-js
/
calendar
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update calendar.{css,js}: implement year and month tables instead of selects, fix leap years

master
vitalif 2015-05-03 14:59:30 +00:00 committed by Vitaliy Filippov
parent 5978ddb1ba
commit 7784be4ff7
2 changed files with 124 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
calendar.css
View File

@ -1,16 +1,22 @@
/* Default CSS for calendar.js, version: 2015-05-03 */
.calendar-box {
display:none;
background:#fff;
position:absolute;
padding:5px;
z-index:100;
box-shadow:0 0 4px #aaa;
display: none;
background: #fff;
position: absolute;
padding: 5px;
z-index: 100;
box-shadow: 0 0 4px #aaa;
}
.calendar-box select.calendar-month { width:90px; margin-right: 10px; }
.calendar-box select.calendar-year { width:70px; }
.calendar-box .calendar-cancel { width:100%; }
.calendar-box table td { width:14%; text-align: center; }
.calendar-box .calendar-title { text-align:center; white-space: nowrap; }
.calendar-box a { text-decoration:none; }
.calendar-box .today { background-color:#ffe9c6; }
.calendar-box .selected { background-color:#c9ff8b; }
.calendar-box select.calendar-month { width: 9 0px; margin-right: 3px; }
.calendar-box select.calendar-year { width: 70px; }
.calendar-box .calendar-cancel { width: 100%; }
.calendar-box table td { width: 14%; text-align: center; }
.calendar-box a { text-decoration: none; display: block; padding: 5px; }
.calendar-box a:hover { background: #e8ffd0; }
.calendar-box tr.header td { font-weight: bold; padding: 5px; }
.calendar-box td { background: #f4f6f8; }
.calendar-box td.future { color: #606060; }
.calendar-box .today { background-color: #ffe9c6; }
.calendar-box .selected { background-color: #c9ff8b; }
.calendar-box .calendar-title { text-align: center; white-space: nowrap; }
.calendar-box .calendar-title a { display: inline-block; padding: 3px 7px; border: 1px solid #d0d2d4; background: #eef0f2; }

162
calendar.js
View File

@ -5,6 +5,7 @@
* Original: http://www.openjs.com/scripts/ui/calendar/
* Modified: http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/{util.js,calendar.js,calendar.css}
* (uses addListener() and getOffset() from util.js)
* Version: 2015-05-03
* License: MIT-like, http://www.openjs.com/license.php
*
* Example:
@ -14,14 +15,21 @@
* </script>
*/
var Calendar = {
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июлья","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
// Configuration:
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
close_label: 'Закрыть',
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
sunday: 6,
month_days: [31,28,31,30,31,30,31,31,30,31,30,31],
years: {min: -70, max: 10},
// Get today's date - year, month, day and date
today: new Date(),
selectboxes: false, // true: use selectboxes for year and month, false: show months and years in table
years: {min: -70, max: 10}, // range of displayed years if selectboxes==true
format: 'd.m.Y', // either d.m.Y or Y-m-d, other formats are not supported
// State variables:
month_days: [31,28,31,30,31,30,31,31,30,31,30,31],
// Today's date
today: new Date(),
// Selected date
selected: new Date(),
opt: {},
data: [],
addedListener: false,
@ -31,6 +39,11 @@ var Calendar = {
wrt:function(txt) {
this.data.push(txt);
},
fin:function() {
this.wrt("<input type='button' value='"+this.close_label+"' class='calendar-cancel' onclick='Calendar.hideCalendar();' />");
document.getElementById(this.opt['calendar']).innerHTML = this.data.join("");
this.data = [];
},
/// Called when the user clicks on a date in the calendar.
selectDate:function(year,month,day) {
@ -43,47 +56,92 @@ var Calendar = {
ths.hideCalendar();
},
/// Creates a calendar with the date given in the argument as the selected date.
makeCalendar:function(year, month, day) {
year = parseInt(year);
month= parseInt(month);
day = parseInt(day);
showMonths:function(year, month) {
var cur_y = this.today.getFullYear();
var cur_m = this.today.getMonth();
var sel_m = this.selected.getFullYear() == year ? this.selected.getMonth() : -1;
this.wrt("<table>");
this.wrt("<tr><th colspan='4' class='calendar-title'><a href='javascript:Calendar.showMonths("+(year-1)+")' title='"+(year-1)+"'>&lt;</a>");
this.wrt(" <a href='javascript:Calendar.showYears("+year+")'>"+year+"</a>");
this.wrt(" <a href='javascript:Calendar.showMonths("+(year+1)+")' title='"+(year+1)+"'>&gt;</a></th></tr>");
this.wrt("<tr>");
for (var i in this.month_names) {
if (i && !(i % 3))
this.wrt("</tr><tr>");
var class_name = (year < cur_y || year == cur_y && i < cur_m ? 'past' :
(year > cur_y || year == cur_y && i > cur_m ? 'future' : 'today'))
+ (i == sel_m ? ' selected' : '');
this.wrt("<td class='months "+class_name+"'><a href='javascript:Calendar.makeCalendar("+year+","+i+")'>"+this.month_names[i]+"</a></td>");
}
this.wrt("</tr>");
this.wrt("</table>");
this.fin();
},
//Display the table
showYears:function(year) {
var beg = year & ~15;
var cur_y = this.today.getFullYear();
var sel_y = this.selected.getFullYear();
this.wrt("<table>");
this.wrt("<tr><th colspan='4' class='calendar-title'>");
this.wrt(" <a href='javascript:Calendar.showYears("+(year-16)+");' title='"+(beg-16)+" - "+(beg-1)+"'>&lt;</a>");
this.wrt(" <b>"+beg+" - "+(beg+15)+"</b>");
this.wrt(" <a href='javascript:Calendar.showYears("+(year+16)+");' title='"+(beg+16)+" - "+(beg+31)+"'>&gt;</a>");
this.wrt("</th></tr>");
this.wrt("<tr>");
for (var i = 0; i < 16; i++) {
if (i && !(i % 4))
this.wrt("</tr><tr>");
var class_name = (beg+i < cur_y ? 'past' : (beg+i > cur_y ? 'future' : 'today'))
+ (beg+i == sel_y ? ' selected' : '');
this.wrt("<td class='years "+class_name+"'><a href='javascript:Calendar.showMonths("+(beg+i)+")'>"+(beg+i)+"</a></td>");
}
this.wrt("</tr>");
this.wrt("</table>");
this.fin();
},
/// Creates a calendar with the date given in the argument as the selected date.
makeCalendar:function(year, month) {
// Display the table
var next_month = month+1;
var next_month_year = year;
if(next_month>=12) {
if (next_month >= 12) {
next_month = 0;
next_month_year++;
}
var previous_month = month-1;
var previous_month_year = year;
if(previous_month<0) {
if (previous_month < 0) {
previous_month = 11;
previous_month_year--;
}
this.wrt("<table>");
this.wrt("<tr><th colspan='7' class='calendar-title'><a href='javascript:Calendar.makeCalendar("+(previous_month_year)+","+(previous_month)+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"'>&lt;</a>");
this.wrt(" <select name='calendar-month' class='calendar-month' onChange='Calendar.makeCalendar("+year+",this.value);'>");
for(var i in this.month_names) {
this.wrt("<option value='"+i+"'");
if(i == month) this.wrt(" selected='selected'");
this.wrt(">"+this.month_names[i]+"</option>");
}
this.wrt("</select>");
this.wrt("<select name='calendar-year' class='calendar-year' onChange='Calendar.makeCalendar(this.value, "+month+");'>");
var current_year = this.today.getYear();
if(current_year < 1900) current_year += 1900;
var current_year = this.today.getFullYear();
for(var i=current_year+this.years.min; i<current_year+this.years.max; i++) {
this.wrt("<option value='"+i+"'")
if(i == year) this.wrt(" selected='selected'");
this.wrt(">"+i+"</option>");
this.wrt("<table>");
this.wrt("<tr><th colspan='7' class='calendar-title'><a href='javascript:Calendar.makeCalendar("+previous_month_year+","+previous_month+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"'>&lt;</a>");
if (!this.selectboxes) {
this.wrt(" <a href='javascript:Calendar.showMonths("+year+", "+month+")'>"+this.month_names[month]+"</a>");
this.wrt(" <a href='javascript:Calendar.showYears("+year+")'>"+year+"</a>");
} else {
this.wrt(" <select name='calendar-month' class='calendar-month' onChange='Calendar.makeCalendar("+year+",this.value);'>");
for (var i in this.month_names) {
this.wrt("<option value='"+i+"'");
if (i == month) this.wrt(" selected='selected'");
this.wrt(">"+this.month_names[i]+"</option>");
}
this.wrt("</select>");
this.wrt("<select name='calendar-year' class='calendar-year' onChange='Calendar.makeCalendar(this.value, "+month+");'>");
for (var i = current_year+this.years.min; i < current_year+this.years.max; i++) {
this.wrt("<option value='"+i+"'")
if (i == year) this.wrt(" selected='selected'");
this.wrt(">"+i+"</option>");
}
this.wrt("</select>");
}
this.wrt("</select>");
this.wrt(" <a href='javascript:Calendar.makeCalendar("+(next_month_year)+","+(next_month)+");' title='"+this.month_names[next_month]+" "+(next_month_year)+"'>&gt;</a></th></tr>");
this.wrt(" <a href='javascript:Calendar.makeCalendar("+next_month_year+","+next_month+");' title='"+this.month_names[next_month]+" "+next_month_year+"'>&gt;</a></th></tr>");
this.wrt("<tr class='header'>");
for (var weekday = 0; weekday < 7; weekday++)
this.wrt("<td>"+this.weekdays[weekday]+"</td>");
@ -97,32 +155,28 @@ var Calendar = {
var flag = 0;
// Leap year support
if (year % 4 == 0)
if (!(year % 4) && ((year % 100) || !(year % 400)))
this.month_days[1] = 29;
else
this.month_days[1] = 28;
var days_in_this_month = this.month_days[month];
// Create the calender
var yea = this.today.getYear();
if (yea < 1900)
yea += 1900;
// Create the calendar
var yea = this.today.getFullYear();
var all_diff = (year - yea) || (month - this.today.getMonth());
for (var i = 0; i <= 5; i++)
{
var sel_day = year == this.selected.getFullYear() && month == this.selected.getMonth() ? this.selected.getDate() : -1;
for (var i = 0; i <= 5; i++) {
if (w >= days_in_this_month)
break;
this.wrt("<tr>");
for (var j = 0; j < 7; j++)
{
for (var j = 0; j < 7; j++) {
if (d > days_in_this_month)
flag = 0; // If the days has overshooted the number of days in this month, stop writing
else if (j >= start_day && !flag)
flag = 1; // If the first day of this month has come, start the date writing
if (flag)
{
if (flag) {
var w = d, mon = month+1;
if (w < 10)
w = "0" + w;
@ -140,7 +194,7 @@ var Calendar = {
else
class_name = ' future';
if (day == d)
if (d == sel_day)
class_name += ' selected';
class_name += " " + this.weekdays[j].toLowerCase();
@ -149,17 +203,12 @@ var Calendar = {
d++;
}
else
{
this.wrt("<td class='days'>&nbsp;</td>");
}
}
this.wrt("</tr>");
}
this.wrt("</table>");
this.wrt("<input type='button' value='Закрыть' class='calendar-cancel' onclick='Calendar.hideCalendar();' />");
document.getElementById(this.opt['calendar']).innerHTML = this.data.join("");
this.data = [];
this.fin();
},
/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
@ -175,13 +224,13 @@ var Calendar = {
div.style.top = (xy.top+height-1)+"px";
// Show the calendar with the date in the input as the selected date
var existing_date = new Date();
this.selected = new Date();
var date_in_input = input.value.replace(/\s+.*$/, ''); //Remove time
if(date_in_input) {
// date format is HARDCODE
var selected_date = false;
var date_parts = date_in_input.split("-");
if(date_parts.length == 3) {
if (date_parts.length == 3) {
// Y-m-d
date_parts[1]--; //Month starts with 0
selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]);
@ -193,19 +242,16 @@ var Calendar = {
selected_date = new Date(date_parts[2], date_parts[1], date_parts[0]);
}
}
if(selected_date && !isNaN(selected_date.getYear())) { //Valid date.
existing_date = selected_date;
if (selected_date && !isNaN(selected_date.getFullYear())) { //Valid date.
this.selected = selected_date;
}
}
var the_year = existing_date.getYear();
if(the_year < 1900) the_year += 1900;
this.makeCalendar(the_year, existing_date.getMonth(), existing_date.getDate());
this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth());
document.getElementById(this.opt['calendar']).style.display = "block";
_calendar_active_instance = this;
if (!Calendar.addedListener)
{
if (!Calendar.addedListener) {
addListener(div, "mousedown", function(ev) {
ev = ev || window.event;
if (ev.stopPropagation)