Calendar: javascript calendar

Last Update:2018-12-03 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Txer: javascript calendar

<HTML>
<Head>
<Title> txer: javascript calendar </title>
<! --
========================================================== ==========
=
= Author: tianxueer@gmail.com, 2007 =
=
========================================================== ==========
// -->
<Meta http-equiv = Content-Type content = "text/html; charset = gb2312">
<Style type = "text/CSS">
A: link {text-Decoration: none; color: Black}
A: hover {text-Decoration: underline; color: Red}
A: active {text-Decoration: none ;}
A: visited {text-Decoration: none; color: Black}

/* The first table (displays the year and month input boxes and the previous and next buttons )*/
Table. One
{
Border-collapse: Separate;
Border-Spacing: 1px 1px;
Font-family: verdana;
Color: # 9db34e; // The text color of table 1;
Text-align: center;
Font-size: 10pt;
Width: 176px;
Border: 1px solid # a6fe8a;
Cursor: default;
Text-align: center;
Background-color: # a6fe8a; // background color of table 1;
}

/* Second table (display day, and day ,....)*/
Table. Two
{
Border-collapse: Separate;
Border-Spacing: 1px 1px;
Font-family: verdana;
Color: # 9db34e; // The text color of table 1;
Text-align: center;
Font-size: 10pt;
Width: 176px;
Border: 1px solid # a6fe8a;
Cursor: default;
Text-align: center;
Background-color: # a6fe8a; // background color of table 2;
Color: #000000; // The text color of table 2;
Border-bottom: none;
}

/* Third (display date) Table */
Table. Three
{
Border-collapse: Separate;
Border-Spacing: 1px 1px;
Font-family: verdana;
Color: # 9db34e; // The text color of table 1;
Text-align: center;
Font-size: 10pt;
Width: 176px;
Border: 1px solid # a6fe8a;
Cursor: default;
Text-align: center;
Border-top: none;
Color: #000000; // The text color of table 3;
Font-size: 8pt;
Background-color: # ffffff; // background color of table 3;
Cursor: default;
}


/* Define the input style of the input year/month */
Input. shuru
{
Border: 0px;
Background-color: # a6fe8a;
Font-size: 10pt;
Text-align: center;
Font-family: verdana;
Color: # 9db34e;
}

/* Define the buttons of the previous year and next year */
Input. anniu
{
Border: 0px;
Background-color: # a6fe8a;
Font-size: 10pt;
Text-align: center;
Font-family: verdana;
Color: # 9db34e;

Width: 16px;
Font-size: 7pt;
Align: center;
Size: 6;
}

</Style>
</Head>
<Body>

<SCRIPT type = "text/JavaScript">

VaR out = "<Div id = 'did1' style =/" position: relative; Z-index: 0; visibility: Visible/"> ";
Out + = "<form> <Table class = 'one' id = 'one'> <tbody> ";
Out + = "<tr> ";
Out + = "<TD> <input type = 'button 'class = 'anniu' style =/" cursor: pointer/"onclick = 'change (1) 'title = 'previous year' onmouseover =/"this. style. color = 'black'/"onmouseout =/" this. style. color = ''/" onfocus =/"Blur ()/" value = '<'> </TD> ";
Out + = "<TD> <input type = 'button 'class = 'anniu' style =/" cursor: pointer/"onclick = 'change (2) 'title = 'last February 'onmouseover =/"this. style. color = 'black'/"onmouseout =/" this. style. color = ''/" onfocus =/"Blur ()/" value = '<'> </TD> ";
Out + = "<TD> <input class = 'shuru 'Type = 'text' id = 'Year' size = 3 onkeydown =/" If (event. keycode = 13) {set (); this. style. borderbottom = ''; blur () ;}/" onblur =/"set (); this. style. borderbottom = ''/" onfocus =/"this. style. borderbottom = '1px solid # ffd700 '/"> year </TD> ";
Out + = "<TD> <input class = 'shuru 'Type = 'text' id = 'month' size = 1 onkeydown =/" If (event. keycode = 13) {set (); this. style. borderbottom = ''; blur () ;}/" onblur =/"set (); this. style. borderbottom = ''/" onfocus =/"this. style. borderbottom = '1px solid # ffd700 '/"> month </TD> ";
Out + = "<TD> <input type = 'button 'class = 'anniu' style =/" cursor: pointer/"onclick = 'change (3) 'title = 'Next month 'onmouseover =/"this. style. color = 'black'/"onmouseout =/" this. style. color = ''/" onfocus =/"Blur ()/" value = '> </TD> ";
Out + = "<TD> <input type = 'button 'class = 'anniu' style =/" cursor: pointer/"onclick = 'change (4) 'title = 'Next year' onmouseover =/"this. style. color = 'black'/"onmouseout =/" this. style. color = ''/" onfocus =/"Blur ()/" value = '> </TD> ";
Out + = "</tr> </tbody> </table> <Table class = 'two' id = 'two'> <tbody> ";
Out + = "<TD style =/" color: # ff0000/"> day </TD> <TD> 1 </TD> <TD> 2 </TD> <TD> 3 </TD> <TD> 4 </ TD> <TD> 5 </TD> <TD style =/"color: # ff0000/"> 6 </TD>"; // specifies the background color of day and day;
Out + = "</tr> </tbody> </table> <Table class = 'three 'Id = 'three'> <tbody> ";
For (I = 0; I <6; I ++)
{
Out + = "<tr id = 't" + I + "'> <TD> & nbsp; </TD> <TD> & nbsp; </TD> <TD> & nbsp; </TD> <TD> & nbsp; </TD> </tr> "; // Add & nbsp; here because: if not, there is no firstchild of TD, document cannot be used later. getelementbyid (TR ). childnodes [J]. firstchild. nodevalue, which is a place in the Dom that is prone to mistakes.
}
Out + = "</tbody> </table> </form> ";
Out + = "</div> ";

Document. Write (out );

VaR year = Document. getelementbyid ('Year ');
VaR month = Document. getelementbyid ('month ');

VaR length;
VaR length_month;
// Form_data, form_year, form_month is used only for the first time to enter the page, followed by year. Value, month. value, where year is the text element year, month is the same
// Obtain the date of the current day
VaR form_date = new date ();
VaR form_month = form_date.getmonth () + 1;
VaR form_year = form_date.getfullyear ();
VaR form_today = form_date.getdate ();
VaR tmp_year; // set ();
VaR tmp_month;

// Enter the date of today in the year and month text
Year. value = form_year;
Month. value = form_month;

Tmp_year = form_year;
Tmp_month = form_month;


// When you click the last year or last month
Function Change (N)
{
Switch (N)
{
Case 1:
If (Year. value = 1)
Year. value = 9999;
Else
-- Year. value;
Break;

Case 2:
If (month. value = 1)
Month. value = 12;
Else
-- Month. value;
Break;
Case 3:
If (month. value = 12)
Month. value = 1;
Else
+ + Month. value;
Break;
Case 4:
If (Year. value = 9999)
Year. value = 1;
Else
+ + Year. value;
Break;
}
Set (); // change data and then display
}

Function show ()
{

// Get the number of days in the current month
VaR length_month = flength_month ();

// Obtain the day of the week on the first day of the current month.
VaR first = new date (year. Value, month. Value-1, 1 );
VaR first_day = first. getday ();

VaR date_num = 1;

For (I = 0; I <6; I ++)
{
For (j = 0; j <7; j ++)
{
Tr = 'T' + I;
If (I = 0) & (j <first_day) // blank before the first day
{
Document. getelementbyid (TR). childnodes [J]. firstchild. nodevalue = "";
Document. getelementbyid (TR). childnodes [J]. style. backgroundcolor = "# a6fe8a"; // the background color of the Region with no date is displayed;
Document. getelementbyid (TR). childnodes [J]. style. cursor = "";
}
Else if (date_num <= length_month) // Date
{

If (Year. value = form_year) & (month. value = form_month) & (date_num = form_today) // day
{
Document. getelementbyid (TR). childnodes [J]. style. backgroundcolor = "#8fe111"; // the background color of the day of the region is displayed on the date;
Document. getelementbyid (TR). childnodes [J]. style. color = "# ffffff"
Document. getelementbyid (TR). childnodes [J]. Title = "today ";
}
Else // other normal dates
{
Document. getelementbyid (TR). childnodes [J]. style. backgroundcolor = "# a6fe8a"; // The date display area contains the background color of the date;
Document. getelementbyid (TR). childnodes [J]. style. color = "#333333"
}


Document. getelementbyid (TR). childnodes [J]. style. cursor = "Pointer ";
Document. getelementbyid (TR). childnodes [J]. firstchild. nodevalue = date_num; // display date
Date_num ++;
}
Else
{
Document. getelementbyid (TR ). childnodes [J]. firstchild. nodevalue = ""; // The content after the date is blank. If there are 31 in the previous month, but this month does not, 31 will be cleared.
Document. getelementbyid (TR). childnodes [J]. style. backgroundcolor = "# a6fe8a"; // the background color of the Region with no date is displayed;
Document. getelementbyid (TR). childnodes [J]. style. cursor = "";
}
If (I = 5 & J = 6)
{
Document. getelementbyid (TR). childnodes [J]. firstchild. nodevalue = "T"; // click here and return to today
Document. getelementbyid (TR). childnodes [J]. style. cursor = "Pointer ";
Document. getelementbyid (TR). childnodes [J]. Title = "today is:" + form_year + "year" + form_month + "month" + form_today + "day ";
}

}
}

}

// When Manually changing the input text of the year and month, first determine whether or not it has changed (because it may have changed for half a day, and finally it has changed back to the original value)
Function set ()
{
If (Year. value> = 1 & year. value <= 9999 & month. value <= 12 & month. value> = 1) // If the input is correct
{
If (tmp_year! = Year. Value | tmp_month! = Month. Value) // If the year and month are changed, display it again.
{
Tmp_year = year. value;
Tmp_month = month. value;
}
Show ();
}
Else // If the input is incorrect, the previous value is returned.
{
Year. value = tmp_year;
Month. value = tmp_month;
}
}

// Add a mouse stroke for TD to change the color
For (I = 0; I <6; I ++)
{
T = 'T' + I;
N = Document. getelementbyid (t );
For (j = n. firstchild; J! = NULL; j = J. nextsibling)
{
J. onmouseover = function () {c = This. style. backgroundcolor; this. style. backgroundcolor = '# ff33ff' ;}; // specifies the background color of the area in which the cursor is displayed;
J. onmouseout = function () {This. style. backgroundcolor = C ;};
If (I = 5) & (J. nextsibling = NULL) // returns today (go to today !) Button
J. onclick = function () {year. value = form_year; month. value = form_month; Set ();};
}
}

Function flength_month () // used to obtain the maximum number of days per month
{
Length = new array (, 31, 31); // Date list of each month
Length [1] = (Year. Value % 4 = 0) & (Year. Value % 100! = 0) | (Year. Value % 400 = 0 ))? 29:28; // determine the number of days on January 1, February
Return length [month. Value-1];
}

Show ();

</SCRIPT>


</Body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Calendar: javascript calendar

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Calendar: javascript calendar

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support