Klasa do wyświetlania kalendarza [Javascript]
Opublikowano: 2010-08-10 , wyświetlono: 21486
Kod klasy - Javascript
//
// class calendar
// (c) ChinaSoft, http://www.chinasoft.com.pl
//
function Calendar(name)
{
// object name - necessary for creating navigation links
this.objectName = name;
// div id
this.divId = "calendarDiv";
// table id
this.tableId = "calendarTable";
// month names
this.monthNames = new Array(
"Styczeń",
"Luty",
"Marzec",
"Kwiecień",
"Maj",
"Czerwiec",
"Lipiec",
"Sierpień",
"Wrzesień",
"Październik",
"Listopad",
"Grudzień" );
// short day names
this.shortDayNames = new Array("Pn", "Wt", "Śr", "Cz", "Pt", "So", "Nd");
// days in month
this.monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
// current date settings
this.currentDate = new Date();
this.year = this.currentDate.getFullYear();
this.month = this.currentDate.getMonth() + 1;
this.day = this.currentDate.getDate();
this.weekDay = this.currentDate.getDay();
this.startDate = new Date(this.year, this.month-1, 1);
this.startDay = this.startDate.getDay();
// ------------------------- public methods ---------------------------------
// display calendar
this.Display = function(divId)
{
this.divId = divId;
this.show();
}
// refresh and display calendar
this.Refresh = function(year, month)
{
this.init(year, month);
this.show();
}
// ------------------------- private methods --------------------------------
// init new year and month
this.init = function(year, month)
{
this.year = year;
this.month = month;
this.startDate = new Date(this.year, this.month-1, 1);
this.startDay = this.startDate.getDay();
// check leap year
if (this.isLeapYear())
this.monthDays[1] = 29;
else
this.monthDays[1] = 28;
}
this.isLeapYear = function()
{
if ((this.year % 400 == 0) || (this.year % 100 != 0 && this.year % 4 == 0))
return(true);
else
return(false);
}
// check day
this.isToday = function(day)
{
var currentDate = new Date();
if (
(day == currentDate.getDate()) &&
(this.month == currentDate.getMonth()+1) &&
(this.year == currentDate.getFullYear())
)
return true;
else
return false;
}
// clear div
this.clearDiv = function()
{
var div = document.getElementById(this.divId);
while (div.hasChildNodes())
div.removeChild(div.lastChild);
}
// create caption
this.createCaption = function()
{
var div = document.getElementById(this.divId);
var p = document.createElement("p");
var txt = document.createTextNode(this.day + " " + this.monthNames[this.month-1] + " " + this.year);
p.appendChild(txt);
div.appendChild(p);
}
// create table
this.createTable = function()
{
var div = document.getElementById(this.divId);
var table = document.createElement("table");
table.id = this.tableId;
div.appendChild(table);
}
// creade table head
this.createHead = function()
{
var table = document.getElementById(this.tableId);
var lastRow = table.rows.length;
var row = table.insertRow(lastRow);
var cell;
var textNode;
for (i = 0; i < 7; i++)
{
cell = row.insertCell(i);
cell.setAttribute("class", "head");
cell.className = "head";
textNode = document.createTextNode(this.shortDayNames[i]);
cell.appendChild(textNode);
}
}
// create table foot
this.createFoot = function()
{
var table = document.getElementById(this.tableId);
var lastRow = table.rows.length;
var row = table.insertRow(lastRow);
var cell;
var textNode;
for (i = 0; i < 7; i++)
{
cell = row.insertCell(i);
cell.setAttribute("class", "foot");
cell.className = "foot";
}
}
// add and return row
this.addRow = function()
{
var table = document.getElementById(this.tableId);
var lastRow = table.rows.length;
var row = table.insertRow(lastRow);
return (row);
}
// add cell
this.addCell = function(row, pos, day)
{
var table = document.getElementById(this.tableId);
var cell = row.insertCell(pos);
var textNode;
if (day > 0)
textNode= document.createTextNode(day);
else
textNode= document.createTextNode(" ");
if (this.isToday(day))
{
cell.setAttribute("class", "today");
cell.className = "today";
}
cell.appendChild(textNode);
}
// create navigation links
this.createNavigation = function()
{
var nextYear = this.year;
var nextMonth = this.month + 1;
if (nextMonth > 12)
{
nextMonth = 1;
nextYear++;
}
var prevYear = this.year;
var prevMonth = this.month - 1;
if (prevMonth < 1)
{
prevMonth = 12;
prevYear--;
}
var div = document.getElementById(this.divId);
var p = document.createElement("p");
var span, link;
// prev
span = document.createElement("span");
span.setAttribute("class", "prev");
span.className = "prev";
link = document.createElement("a");
link.setAttribute("class", "prev");
link.className = "prev";
link.setAttribute("href", "javascript:" + this.objectName + ".Refresh(" + prevYear + " ," + prevMonth + ");");
link.innerHTML = "poprzedni";
span.appendChild(link);
p.appendChild(span);
// next
span = document.createElement("span");
span.setAttribute("class", "next");
span.className = "next";
link = document.createElement("a");
link.setAttribute("class", "next");
link.className = "next";
link.setAttribute("href", "javascript:" + this.objectName + ".Refresh(" + nextYear + " ," + nextMonth + ");");
link.innerHTML = "następny";
span.appendChild(link);
p.appendChild(span);
div.appendChild(p);
}
// show calendar
this.show = function()
{
this.clearDiv();
this.createCaption();
this.createTable();
this.createHead();
var day = 1;
var offset = this.startDay;
var row;
if (offset == 0)
offset = 7;
var rowCount = Math.ceil((this.monthDays[this.month - 1] + offset-1) / 7);
for (var i = 0; i < rowCount; i++)
{
row = this.addRow();
for (var j = 0; j < 7; j++)
{
if (offset > 1)
{
this.addCell(row, j, "");
offset--;
}
else
{
if (day > this.monthDays[this.month - 1])
this.addCell(row, j, 0);
else
this.addCell(row, j, day);
day++;
}
}
}
this.createFoot();
this.createNavigation();
}
}
Arkusz stylów
#calendar {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
}
#calendar p {
font-weight: bold;
}
#calendar table {
background-color: #fff;
}
#calendar tr {
}
#calendar td {
background-color: #F6EFDD;
color: #000000;
height: 25px;
width: 23px;
padding: 3px;
text-align: right;
}
#calendar td.head {
background-color: #982100;
color:#ffffff;
padding: 3px;
text-align: center;
height: 25px;
width: 23px;
}
#calendar td.today {
color: #fff;
background-color: red;
}
#calendar td.foot {
background-color: #982100;
color: #000000;
padding: 1px;
text-align: right;
height: 2px;
}
#calendar a {
color: #982100;
}
#calendar span.prev {
text-align: left;
}
#calendar span.next {
margin-left: 90px;
text-align: right;
}
#calendar a.prev {
text-align: left;
}
#calendar a.next {
text-align: right;
}
I strona html z przykładowym użyciem klasy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>
Kalendarz OOP
</title>
<link rel="stylesheet" type="text/css" href="calendar.css">
<script type="text/javascript" src="calendar.js"></script>
</head>
<body>
<h1>Testowanie biblioteki kalendarza</h1>
<hr>
<div id="calendar"></div>
<hr>
<script type="text/javascript">
var cal = new Calendar("cal"); // name of object is necessary for creating navigation links
cal.Display("calendar");
</script>
</div>
</body>
</html>