2015-01-23 13:09:30 +00:00
|
|
|
Htk.Calendar = new Class
|
|
|
|
({
|
|
|
|
Extends: Htk.Field
|
|
|
|
,Tag: 'htk-calendar'
|
2015-07-15 13:39:07 +00:00
|
|
|
,Properties:
|
|
|
|
{
|
|
|
|
restrictFunc:
|
|
|
|
{
|
|
|
|
type: Function
|
|
|
|
,set: function (x)
|
|
|
|
{
|
|
|
|
this._restrictFunc = x;
|
|
|
|
}
|
|
|
|
,get: function (x)
|
|
|
|
{
|
|
|
|
return this._restrictFunc;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2015-07-15 13:39:07 +00:00
|
|
|
,cells: []
|
|
|
|
,selectedCell: -1
|
2015-01-23 13:09:30 +00:00
|
|
|
,year: null
|
|
|
|
,month: null
|
|
|
|
|
|
|
|
,initialize: function (props)
|
|
|
|
{
|
|
|
|
var len = Vn.Date.WDays.length;
|
|
|
|
|
|
|
|
this.createElement ('div');
|
2015-03-06 23:33:54 +00:00
|
|
|
this.node.className = 'htk-calendar';
|
2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
var table = document.createElement ('table');
|
|
|
|
this.node.appendChild (table);
|
|
|
|
|
|
|
|
var colgroup = document.createElement ('colgroup');
|
|
|
|
table.appendChild (colgroup);
|
|
|
|
|
|
|
|
for (var i = 0; i < len; i++)
|
|
|
|
colgroup.appendChild (document.createElement ('col'));
|
|
|
|
|
|
|
|
var thead = document.createElement ('thead');
|
|
|
|
table.appendChild (thead);
|
|
|
|
|
|
|
|
var tr = document.createElement ('tr');
|
|
|
|
thead.appendChild (tr);
|
|
|
|
|
|
|
|
var th = document.createElement ('th');
|
|
|
|
th.appendChild (document.createTextNode ('<'));
|
|
|
|
th.className = 'button';
|
|
|
|
th.addEventListener ('click', this.prevMonthClicked.bind (this));
|
|
|
|
tr.appendChild (th);
|
|
|
|
|
2015-07-15 13:39:07 +00:00
|
|
|
var th = document.createElement ('th');
|
|
|
|
th.colSpan = 5;
|
|
|
|
tr.appendChild (th);
|
|
|
|
|
|
|
|
var monthNode = document.createElement ('span');
|
|
|
|
th.appendChild (monthNode);
|
|
|
|
|
|
|
|
var space = document.createTextNode (' ');
|
|
|
|
th.appendChild (space);
|
|
|
|
|
|
|
|
var yearNode = document.createElement ('span');
|
|
|
|
th.appendChild (yearNode);
|
2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
var th = document.createElement ('th');
|
|
|
|
th.appendChild (document.createTextNode ('>'));
|
|
|
|
th.className = 'button';
|
|
|
|
th.addEventListener ('click', this.nextMonthClicked.bind (this));
|
|
|
|
tr.appendChild (th);
|
|
|
|
|
|
|
|
var tr = document.createElement ('tr');
|
|
|
|
thead.appendChild (tr);
|
|
|
|
|
2015-07-17 14:34:42 +00:00
|
|
|
for (var i = 1; i <= len; i++)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
|
|
|
var th = document.createElement ('th');
|
|
|
|
tr.appendChild (th);
|
|
|
|
|
|
|
|
var weekday = Vn.Date.AbrWDays [i%len];
|
|
|
|
th.appendChild (document.createTextNode (weekday));
|
|
|
|
}
|
2015-07-15 13:39:07 +00:00
|
|
|
/*
|
2015-01-23 13:09:30 +00:00
|
|
|
var tfoot = document.createElement ('tfoot');
|
|
|
|
table.appendChild (tfoot);
|
|
|
|
|
|
|
|
var tr = document.createElement ('tr');
|
|
|
|
tfoot.appendChild (tr);
|
|
|
|
|
|
|
|
var th = document.createElement ('th');
|
|
|
|
th.appendChild (document.createTextNode ('<'));
|
|
|
|
th.className = 'button';
|
|
|
|
th.addEventListener ('click', this.prevYearClicked.bind (this));
|
|
|
|
tr.appendChild (th);
|
|
|
|
|
|
|
|
var yearNode = document.createElement ('th');
|
|
|
|
yearNode.colSpan = 5;
|
|
|
|
tr.appendChild (yearNode);
|
|
|
|
|
|
|
|
var th = document.createElement ('th');
|
|
|
|
th.appendChild (document.createTextNode ('>'));
|
|
|
|
th.className = 'button';
|
|
|
|
th.addEventListener ('click', this.nextYearClicked.bind (this));
|
|
|
|
tr.appendChild (th);
|
2015-07-15 13:39:07 +00:00
|
|
|
*/
|
2015-01-23 13:09:30 +00:00
|
|
|
var tbody = document.createElement ('tbody');
|
|
|
|
table.appendChild (tbody);
|
|
|
|
|
2015-07-17 14:34:42 +00:00
|
|
|
for (var i = 0; i < 6; i++)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-07-17 14:34:42 +00:00
|
|
|
var tr = document.createElement ('tr');
|
2015-01-23 13:09:30 +00:00
|
|
|
tbody.appendChild (tr);
|
|
|
|
|
2015-07-17 14:34:42 +00:00
|
|
|
for (var j = 0; j < len; j++)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-07-17 14:34:42 +00:00
|
|
|
var td = document.createElement ('td');
|
2015-01-23 13:09:30 +00:00
|
|
|
td.addEventListener ('click', this.dayClicked.bind (this, td, i*len+j));
|
|
|
|
tr.appendChild (td);
|
2015-07-15 13:39:07 +00:00
|
|
|
|
2015-07-17 14:34:42 +00:00
|
|
|
var div = document.createElement ('div');
|
2015-07-15 13:39:07 +00:00
|
|
|
td.appendChild (div);
|
|
|
|
|
|
|
|
this.cells.push ({
|
|
|
|
node: div,
|
|
|
|
enabled: false,
|
|
|
|
day: -1
|
|
|
|
});
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.monthNode = monthNode;
|
|
|
|
this.yearNode = yearNode;
|
|
|
|
this.goToCurrentMonth ();
|
2015-11-09 08:14:33 +00:00
|
|
|
this.parent (props);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
,getMonthDays: function ()
|
|
|
|
{
|
|
|
|
if (this.month > 6)
|
|
|
|
return (this.month % 2 != 0) ? 31 : 30;
|
|
|
|
else if (this.month != 1)
|
|
|
|
return (this.month % 2 != 1) ? 31 : 30;
|
|
|
|
else
|
|
|
|
return (this.year % 4 != 0) ? 28 : 29;
|
|
|
|
}
|
|
|
|
|
|
|
|
,goToMonth: function (year, month)
|
|
|
|
{
|
|
|
|
if (year)
|
|
|
|
this.year = year;
|
2015-01-31 01:05:12 +00:00
|
|
|
if (!isNaN (month))
|
2015-01-23 13:09:30 +00:00
|
|
|
this.month = month;
|
|
|
|
|
|
|
|
this.refresh ();
|
|
|
|
}
|
|
|
|
|
|
|
|
,goToSelectedMonth: function ()
|
|
|
|
{
|
|
|
|
var date = this._value;
|
|
|
|
|
|
|
|
if (date instanceof Date)
|
|
|
|
this.goToMonth (date.getFullYear (), date.getMonth ());
|
|
|
|
else
|
|
|
|
this.goToCurrentMonth ();
|
|
|
|
}
|
|
|
|
|
|
|
|
,goToCurrentMonth: function ()
|
|
|
|
{
|
|
|
|
var date = new Date ();
|
|
|
|
this.goToMonth (date.getFullYear (), date.getMonth ());
|
|
|
|
}
|
|
|
|
|
|
|
|
,refresh: function ()
|
|
|
|
{
|
|
|
|
Vn.Node.setText (this.yearNode, this.year);
|
|
|
|
Vn.Node.setText (this.monthNode, Vn.Date.Months[this.month]);
|
|
|
|
|
|
|
|
var day = 1;
|
2015-07-15 13:39:07 +00:00
|
|
|
var cellDate = new Date (this.year, this.month, 1);
|
|
|
|
|
|
|
|
var weekDay = cellDate.getDay ();
|
|
|
|
var firstWeekDay = (weekDay != 0) ? weekDay - 1 : 6;
|
|
|
|
var monthDays = this.getMonthDays ();
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2015-07-17 14:34:42 +00:00
|
|
|
for (var i = 0; i < this.cells.length; i++)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-07-15 13:39:07 +00:00
|
|
|
var cell = this.cells[i];
|
|
|
|
|
2015-01-23 13:09:30 +00:00
|
|
|
if (firstWeekDay <= i && day <= monthDays)
|
2015-07-15 13:39:07 +00:00
|
|
|
{
|
|
|
|
Vn.Node.setText (cell.node, day);
|
|
|
|
cell.enabled = true;
|
|
|
|
cell.day = day++;
|
|
|
|
|
|
|
|
if (this._restrictFunc)
|
|
|
|
{
|
|
|
|
cell.enabled = this._restrictFunc (cellDate);
|
|
|
|
cellDate.setTime (cellDate.getTime () + 86400000);
|
|
|
|
}
|
|
|
|
}
|
2015-01-23 13:09:30 +00:00
|
|
|
else
|
2015-07-15 13:39:07 +00:00
|
|
|
{
|
|
|
|
Vn.Node.removeChilds (cell.node);
|
|
|
|
cell.enabled = false;
|
|
|
|
cell.day = -1;
|
|
|
|
}
|
|
|
|
|
|
|
|
cell.node.className = cell.enabled ? 'enabled' : 'disabled';
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-07-15 13:39:07 +00:00
|
|
|
|
2015-01-23 13:09:30 +00:00
|
|
|
// Marks the current day
|
2015-07-15 13:39:07 +00:00
|
|
|
|
2015-01-23 13:09:30 +00:00
|
|
|
var today = new Date ();
|
|
|
|
|
|
|
|
if (this.year == today.getFullYear ()
|
|
|
|
&& this.month == today.getMonth ())
|
|
|
|
{
|
2015-07-15 13:39:07 +00:00
|
|
|
var cellIndex = (firstWeekDay + today.getDate ()) - 1;
|
|
|
|
Vn.Node.addClass (this.cells[cellIndex].node, 'today');
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Marks the selected day
|
|
|
|
|
|
|
|
var date = this._value;
|
|
|
|
|
|
|
|
if (date instanceof Date
|
|
|
|
&& this.year == date.getFullYear ()
|
|
|
|
&& this.month == date.getMonth ())
|
2015-07-15 13:39:07 +00:00
|
|
|
this.selectCell ((firstWeekDay + date.getDate ()) - 1);
|
2015-01-23 13:09:30 +00:00
|
|
|
else
|
2015-07-15 13:39:07 +00:00
|
|
|
this.selectCell (-1);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2015-07-15 13:39:07 +00:00
|
|
|
,selectCell: function (cellIndex)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-07-15 13:39:07 +00:00
|
|
|
if (this.selectedCell != -1)
|
|
|
|
{
|
|
|
|
var node = this.cells[this.selectedCell].node;
|
|
|
|
Vn.Node.removeClass (node, 'selected');
|
|
|
|
}
|
|
|
|
if (cellIndex != -1)
|
|
|
|
{
|
|
|
|
var node = this.cells[cellIndex].node;
|
|
|
|
Vn.Node.addClass (node, 'selected');
|
|
|
|
}
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2015-07-15 13:39:07 +00:00
|
|
|
this.selectedCell = cellIndex;
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
,putValue: function (value)
|
|
|
|
{
|
|
|
|
this.goToSelectedMonth ();
|
|
|
|
}
|
|
|
|
|
2015-07-15 13:39:07 +00:00
|
|
|
,dayClicked: function (td, cellIndex)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-07-15 13:39:07 +00:00
|
|
|
var cell = this.cells[cellIndex];
|
|
|
|
|
|
|
|
if (cell.enabled)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-07-15 13:39:07 +00:00
|
|
|
this.selectCell (cellIndex);
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2015-07-15 13:39:07 +00:00
|
|
|
var newDate = new Date (this.year, this.month, cell.day);
|
2015-01-23 13:09:30 +00:00
|
|
|
this.valueChanged (newDate);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
,prevMonthClicked: function ()
|
|
|
|
{
|
|
|
|
if (this.month > 0)
|
|
|
|
this.month--;
|
|
|
|
else
|
|
|
|
{
|
|
|
|
this.month = 11;
|
|
|
|
this.year--;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.refresh ();
|
|
|
|
}
|
|
|
|
|
|
|
|
,nextMonthClicked: function ()
|
|
|
|
{
|
|
|
|
if (this.month < 11)
|
|
|
|
this.month++;
|
|
|
|
else
|
|
|
|
{
|
|
|
|
this.month = 0;
|
|
|
|
this.year++;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.refresh ();
|
|
|
|
}
|
2015-07-15 13:39:07 +00:00
|
|
|
/*
|
2015-01-23 13:09:30 +00:00
|
|
|
,prevYearClicked: function ()
|
|
|
|
{
|
|
|
|
this.year--;
|
|
|
|
this.refresh ();
|
|
|
|
}
|
|
|
|
|
|
|
|
,nextYearClicked: function ()
|
|
|
|
{
|
|
|
|
this.year++;
|
|
|
|
this.refresh ();
|
2015-07-15 13:39:07 +00:00
|
|
|
}*/
|
2015-01-23 13:09:30 +00:00
|
|
|
});
|