Page calendar implemented by Javascript

Source: Internet
Author: User

:

CSS code:

Copy codeThe Code is as follows: <style type = "text/css">
*{
Margin: 0;
Padding: 0;
Font: 10px tahoma;
}
# Calender {
Text-align: center;
Width: 147px;
Font-size: 10px;
/* Color: #27B0C1 ;*/
Margin: 12px 0 12px 6px;
Border-top: 1px solid # EEEEEE;
Border-left: 1px solid # EEEEEE;
}
# Calender. arrow_over {
Color: # FF1493;
}
# Calender. arrow_out {
Color: # FF8C00;
}
# Calender td {
Border-bottom: 1px solid # EEEEEE;
Border-right: 1px solid # EEEEEE;
Width: 21px;
Height: 20px;
Line-height: 16px;
Color: #666666;
}
# Calender # cal_title {
Width: 147px; background: # EFEFEF;
}
# Calender # week td {
Background: # F8F8F8;
}
# Calender. current {
Background: # AAE7E8;
Display: block;
Margin: 2px;
}
# Calender. notcurrent {
Display: block;
Margin: 2px;
Background: # EDEDED;
}
</Style>

Script code:Copy codeThe Code is as follows: <script type = "text/javascript">
<! --
Document. writeln ("<div id = 'calenderdiv 'style> loading calendar... </div> ");
Var press_tag;
Function changecal (action, year, month)
{
Var strcal;
Switch (action)
{
Case "nextmonth ":
If (month = 11)
{
Month = 1;
Year = year * 1 + 1;
} Else {
Month = month * 1 + 2;
}
Strcal = "<span onmouseover = \" this. className = 'arrow _ over' \ "onmouseout = \" this. className = 'arrow _ out' \ "class = 'arrow _ out' onclick = 'calender (" + year + "," + month + ") 'title = 'Next month' style = 'cursor: hand; '>></span> ";
Break;
Case "premonth ":
If (month = 0)
{
Month = 12;
Year = year * 1-1;
}
Strcal = "<span onmouseover = \" this. className = 'arrow _ over' \ "onmouseout = \" this. className = 'arrow _ out' \ "class = 'arrow _ out' onclick = 'calender (" + year + "," + month + ") 'title = 'style = 'cursor: hand; '> </span> ";
Break;
Case "nextyear ":
Year = year * 1 + 1;
Month = month * 1 + 1;
Strcal = "<span onmouseover = \" this. className = 'arrow _ over' \ "onmouseout = \" this. className = 'arrow _ out' \ "class = 'arrow _ out' onclick = 'calender (" + year + "," + month + ") 'title = 'Next year' style = 'cursor: hand; '>>></span> ";
Break;
Case "preyear ":
Year = year * 1-1;
Month = month * 1 + 1;
Strcal = "<span onmouseover = \" this. className = 'arrow _ over' \ "onmouseout = \" this. className = 'arrow _ out' \ "class = 'arrow _ out' onclick = 'calender (" + year + "," + month + ") 'title = 'previous year' style = 'cursor: hand; '> </span> ";
Break;
Default :;
}
Strcal = "" + strcal + "";
Return (strcal );
}
Function calender (cyear, cmonth)
{
Var d, d_date, d_day, d_month;
// Define the number of days per month Array
Var monthdates = ["31", "28", "31", "30", "31", "30", "31", "31", "30 ", "31", "30", "31"]
D = new Date ();
D_year = d. getYear (); // obtain the year
// Determine the leap month and change monthdates's February to 29
If (d_year % 4 = 0) & (d_year % 100! = 0) | (d_year % 400 = 0) monthdates [1] = "29 ";
If (cyear! = "") | (Cmonth! = ""))
{
// If you have selected the month and year, the current time is changed to the User-Defined time.
D. setYear (cyear );
D. setMonth (cmonth-1 );
D. setDate (1 );
}
D_month = d. getMonth (); // obtain the current month.
D_year = d. getYear (); // obtain the year
D_date = d. getDate (); // get the date
// Fixed the error that showed only two digits in 19XX.
If (d_year <2000) {d_year = d_year + 1900}
// ============ Output calendar ============
Var str;
Str = "<table cellspacing = '0' cellpadding = '0' id = 'calender'> ";
Str + = "<tr> <td id = 'cal _ title' colspan = '7'>"
Str + = changecal ("preyear", d_year, d_month)
Str + = changecal ("premonth", d_year, d_month)
Str + = d_year + "-" + (d_month * 1 + 1)
Str + = changecal ("nextmonth", d_year, d_month)
Str + = changecal ("nextyear", d_year, d_month)
Str + = "</td> </tr> ";
Str + = "<tr id = 'Week '> <td> Su </td> <td> Mo </td> <td> Tu </td> <td> We </td> <td> Th </td> <td> Fr </td> <td> Sa </td> </tr> ";
Str + = "<tr> ";
Var firstday, lastday, totalcounts, firstspace, lastspace, monthdays;
// The number of months to be displayed is several days, which can be obtained using a defined array.
Monthdays = monthdates [d. getMonth ()];
// Set the date to the first day of the month.
D. setDate (1 );
// The first day of the month to be displayed is the day of the week
Firstday = d. getDay ();
// Number of empty cells to be supplemented before 1
Firstspace = firstday;
// Set the date to the last day of the month
D. setDate (monthdays );
// The last day of the month to be displayed is the day of the week
Lastday = d. getDay ();
// The number of empty cells required after the last day
Lastspace = 6-lastday;
// Empty cells + Total Number of days + empty cells are used to control loops.
Totalcounts = firstspace * 1 + monthdays * 1 + lastspace * 1;
// Count: the variable of the Large Loop; f_space: the variable of the loop that outputs the first empty cell; l_space: the variable of the loop that outputs the last empty cell.
Var count, flag, f_space, l_space;
// Flag: after the first empty cell is input, the flag = 1 will not continue this small loop.
Flag = 0;
For (count = 1; count <= totalcounts; count ++)
{
// Flag = 0 at the beginning. First, empty cells are output. After the input, flag = 1. This loop will not be executed in the future.
If (flag = 0)
{
If (firstspace! = 0)
{
For (f_space = 1; f_space <= firstspace; f_space ++)
{
Str + = "<td> </td> ";
If (f_space! = Firstspace) count ++;
}
Flag = 1;
Continue;
}
}
If (count-firstspace) <= monthdays)
{
// Output all days in the month
Curday = d_year + "," + (d_month * 1 + 1) + "," + (count-firstspace) + "|"
Linkday = d_year + "," + (d_month * 1 + 1) + "," + (count-firstspace)
Var today = new Date ();
If (d_year = today. getYear () & (d_month = today. getMonth () & (count-firstspace) = today. getDate ()))
{
// Highlight the current days in the Local System
Str + = "<td> <span class = 'current'>" + (count-firstspace) + "</span> </td> ";
} Else {
// No highlighted part, no logs
Str + = "<td>" + (count-firstspace) + "</td> ";
}
If (count % 7 = 0)
{
If (count <totalcounts)
{
Str + = "</tr> <tr> ";
} Else {
Str + = "</tr> ";
}
}
} Else {
// If the last day of the month has been output, the empty cells are added.
For (l_space = 1; l_space <= lastspace; l_space ++)
{
Str + = "<td> </td> ";
If (l_space! = Lastspace) count ++;
}
Continue;
}
}
Str + = "<tr> <td colspan = '7' style = 'text-indent: 9px; '> <a href = 'HTTP: // www.jb51.net 'title = 'website'> www.sugood.cn </a> </td> </tr> </table>"
Document. getElementById ("calenderdiv"). innerHTML = "<div id = 'calenderdiv '>" + str + "</div> ";
}
// Call a function
Calender ("","")
// -->
</Script>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.