« powrót

Klasa do wyświetlania kalendarza [Javascript]

Opublikowano: 2010-08-10 , wyświetlono: 20856

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>




Komentarze: