A calendar written in js (Code Part online extraction)

This code is specially posted because it is concise and clear and feels good for everyone to share.
×××××× Function Definition
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var $ = function (id ){
Return "string" = typeof id? Document. getElementById (id): id;
};
Var Class = {
Create: function (){
Return function (){
This. initialize. apply (this, arguments );
}
}
}
Var Extend = function (destination, source ){
For (var property in source ){
Destination [property] = source [property];
}
Return destination;
}
Var Calendar = Class. create ();
Calendar. prototype = {
Initialize: function (container, options ){
This. Container = $ (container); // Container (table structure)
This. Days = []; // Date Object List
This. SetOptions (options );
This. Year = this. options. Year | new Date (). getFullYear ();
This. Month = this. options. Month | new Date (). getMonth () + 1;
This. SelectDay = this. options. SelectDay? New Date (this. options. SelectDay): null;
This. onSelectDay = this. options. onSelectDay;
This. onToday = this. options. onToday;
This. onFinish = this. options. onFinish;
This. Draw ();
},
// Set the default attribute
SetOptions: function (options ){
This. options = {// Default Value
Year: 0, // Year
Month: 0, // display Month
SelectDay: null, // select a date
OnSelectDay: function () {}, // triggered on the selected date
OnToday: function () {}, // triggered on the current day
OnFinish: function () {}// triggered after calendar is painted
};
Extend (this. options, options || {});
},
// Current month
NowMonth: function (){
This. PreDraw (new Date ());
},
// Last month
PreMonth: function (){
This. PreDraw (new Date (this. Year, this. Month-2, 1 ));
},
// Next month
NextMonth: function (){
This. PreDraw (new Date (this. Year, this. Month, 1 ));
},
// Previous year
PreYear: function (){
This. PreDraw (new Date (this. Year-1, this. Month-1, 1 ));
},
// Next year
NextYear: function (){
This. PreDraw (new Date (this. Year + 1, this. Month-1, 1 ));
},
// Draw a calendar by date
PreDraw: function (date ){
// Set attributes again
This. Year = date. getFullYear (); this. Month = date. getMonth () + 1;
// Re-draw the calendar
This. Draw ();
},
// Draw a calendar
Draw: function (){
// Used to save the date list
Var arr = [];
// Use the date value of the first day of the month in the week as the number of days from the first day of the month
For (var I = 1, firstDay = new Date (this. year, this. month-1, 1 ). getDay (); I <= firstDay; I ++) {arr. push (0 );}
// Use the date value of the last day of the month in the month as the number of days of the month
For (var I = 1, monthDay = new Date (this. year, this. month, 0 ). getDate (); I <= monthDay; I ++) {arr. push (I );}
// Clear the original date object list
This. Days = [];
// Insert Date
Var frag = document. createDocumentFragment ();
While (arr. length ){
// Insert a tr every week
Var row = document. createElement ("tr ");
// There are 7 days in a week
For (var I = 1; I <= 7; I ++ ){
Var cell = document. createElement ("td"); cell. innerHTML = "";
If (arr. length ){
Var d = arr. shift ();
If (d ){
Cell. innerHTML = d;
This. Days [d] = cell;
Var on = new Date (this. Year, this. Month-1, d );
// Determine whether or not today
This. IsSame (on, new Date () & this. onToday (cell );
// Determine whether to select a date
This. SelectDay & this. IsSame (on, this. SelectDay) & this. onSelectDay (cell );
}
}
Row. appendChild (cell );
}
Frag. appendChild (row );
}
// Clear the content before inserting it (the table of ie cannot use innerHTML)
While (this. Container. hasChildNodes () {this. Container. removeChild (this. Container. firstChild );}
This. Container. appendChild (frag );
// Additional program
This. onFinish ();
},
// Determine whether or not the same day
IsSame: function (d1, d2 ){
Return (d1.getFullYear () = d2.getFullYear () & d1.getMonth () = d2.getMonth () & d1.getDate () = d2.getDate ());
}
}
</Script>

Definition of a style sheet
Copy codeThe Code is as follows:
<Style type = "text/css">
. Calendar {
Font-family: Verdana;
Font-size: 12px;
Background-color: # e0ecf9;
Text-align: center;
Width: 400px;
Height: 180px;
Padding: 10px;
Line-height: 1.5em;
}
. Calendar {
Color: #1e5494;
}
. Calendar table {
Width: 100%;
Border: 0;
}
. Calendar table thead {color: # acacac ;}
. Calendar table td {
Font-size: 11px;
Padding: 1px;
}
# IdCalendarPre {
Cursor: pointer;
Float: left;
Padding-right: 5px;
}
# IdCalendarNext {
Cursor: pointer;
Float: right;
Padding-right: 5px;
}
# IdCalendar td. onToday {
Font-weight: bold;
Color: # c60;
}
# IdCalendar td. onSelect {
Font-weight: bold;
}
# Buttonposition {
Margin-left: 10%;
}
</Style>

* ********** The main body of the application
Copy codeThe Code is as follows:
<Div class = "Calendar">
<Div id = "idCalendarPre"> </div>
<Div id = "idCalendarNext" >></div>
<Span id = "idCalendarYear"> </span> <span id = "idCalendarMonth"> </span> month
<Table cellspacing = "0">
<Thead>
<Tr>
<Td> day </td>
<Td> 1 </td>
<Td> 2 </td>
<Td> 3 </td>
<Td> 4 </td>
<Td> 5 </td>
<Td> 6 </td>
</Tr>
</Thead>
<Tbody id = "idCalendar">
</Tbody>
</Table>
</Div>
<Div id = "buttonposition"> <! -- Get a style by id -->
<Input id = "idCalendarPreYear" type = "button" class = "bt" value = "Previous Year"/>
<Input id = "idCalendarNow" type = "button" class = "bt" value = "current month"/>
<Input id = "idCalendarNextYear" type = "button" class = "bt" value = "next year"/>
</Div>
<Script language = "JavaScript">
Var cale = new Calendar ("idCalendar ",{
OnToday: function (o) {o. className = "onToday ";},
OnFinish: function (){
$ ("IdCalendarYear"). innerHTML = this. Year; $ ("idCalendarMonth"). innerHTML = this. Month;
}
});
$ ("IdCalendarPre"). onclick = function () {cale. PreMonth ();}
$ ("IdCalendarNext"). onclick = function () {cale. NextMonth ();}
$ ("IdCalendarPreYear"). onclick = function () {cale. PreYear ();}
$ ("IdCalendarNextYear"). onclick = function () {cale. NextYear ();}
$ ("IdCalendarNow"). onclick = function () {cale. NowMonth ();}
</Script>
</Div>