Home > Developer > JavaScript

Calendar: javascript calendar

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.

Related Keywords:
javascript calendar scheduler calendar api javascript droid calendar gtk calendar install calendar imap calendar php calendar

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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