Calendar plug-in developed by native js

This article mainly shares the sample code of the calendar plug-in developed by native js. It has good reference value. Let's take a look at the following results with the small Editor:

The Code is as follows:

Script function currentWeek (ele) {var obj = offset (ele); var x = obj. left; var y = obj. top + ele. offsetHeight + 1; // create a calendar interface if (! Document. getElementById ('Week ') {var oDiv = document. createElement ('P'); document. body. appendChild (oDiv); oDiv. id = 'Week'; oDiv. style. top = y + "px"; oDiv. style. left = x + "px"; // create a calendar title var h6 = document. createElement ('h6 '); oDiv. appendChild (h6); var prev = document. createElement ('P'); h6.appendChild (prev); prev. className = 'prev'; prev. innerHTML = 'month'; var content = document. createElement ('P'); content. className = "content"; h6.appendChild (content); var next = document. createElement ('P'); h6.appendChild (next); next. className = 'Next'; next. innerHTML = 'Next month'; // create a text line var oPs = document from Sunday to Saturday. createElement ('P'); oPs. className = "rlTitle"; oDiv. appendChild (oPs); var opsCont = ['day', 'yi', '2', '3', '4', '5', '6']; for (var I = 0; I <= 6; I ++) {var oSpan = document. createElement ('spa N '); oPs. appendChild (oSpan); oSpan. innerHTML = opsCont [I];} // variable var oUl = document required to create the number of date rows in the calendar. createElement ('ul '); oUl. className = "rlCenter"; oDiv. appendChild (oUl); var currentDate = new Date (); var currentYear = currentDate. getFullYear (); var currentMonth = currentDate. getMonth (); active (currentMonth); // pass the parameter month // create a calendar prev. onclick = function () {active (-- currentMonth) ;}; next. onclick = Function () {active (++ currentMonth) ;};// dynamically create the date above the calendar and change it to function active (m) {oUl. innerHTML = ''; // do not remove this content. Otherwise, the page is displayed in the order of var activeDate = new Date (currentYear, m, 1) in the calendar ); // The variable date object var year = activeDate. getFullYear (); var month = activeDate. getMonth (); // Save the current month only to get the month content for the title. innerHTML = year + 'Year' + (month + 1) + 'month'; // create the number of date rows in the calendar var n = 1-activeDate. getDay (); If (n = 1) {n =-6;} // display the calendar for three months in a more friendly way, so that users can see more clearly. ActiveDate. setDate (n); // if n is negative, the number of months is reduced. The calendar starts from the day when the last day of the month is subtracted. For (var I = 0; I <42; I ++) {var oLi = document. createElement ('lil'); oUl. appendChild (oLi); var date = activeDate. getDate (); // returns oLi. innerHTML = date; oLi. dateValue = year + "-" + (activeDate. getMonth () + 1) + "-" + date; // The value must be activeDate. getMonth () + 1, cannot use m + 1. Because this is always changing. Otherwise, the calendar belongs to the current month regardless of the day. OLi. onclick = function () {ele. value = this. dateValue; // The year, month, and day document obtained in the text box. body. removeChild (oDiv); // get the year, month, day, and calendar cancel oDiv = null;}; if (activeDate. getMonth ()! = Month) {oLi. style. color = "# ccc"; // the number of days that are not the current month turns gray} // do not add the number of days statement below. You must determine whether the number of days is the number of days of this month, then, add the statement to it. Otherwise, an error may occur. ActiveDate. setDate (date + 1); // if the number of days exceeds the expected number of days in the month, the month is added.} function offset (ele) {var l = ele. offsetLeft; var t = ele. offsetTop; var p = ele. offsetParent; while (p) {if (window. navigator. userAgent. indexOf ("MSIE 8")>-1) {l + = p. offsetLeft; t + = p. offsetTop;} else {l + = p. offsetLeft + p. clientLeft; t + = p. offsetTop + p. clientTop;} p = p. offsetParent;} return {left: l, top: t} script

The above is all the content of this article. I hope this article will help you in your study or work, and I also hope to support PHP!

For more articles about calendar plug-ins developed by native js, please follow the PHP Chinese network!