jQuery Realizes Calendar Effect
- 2021-08-16 23:02:44
- OfStack
In this paper, we share the specific code of jQuery calendar effect for your reference, the specific contents are as follows
jquery is in version 2.0.
1. html code
<!DOCTYPE html>
<!-- Based on W3C Standard You don't need to make any changes -->
<html>
<!-- Initial criteria -->
<head>
<!-- Setting initialization document information and document management annotations -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Entire page coding utf-8 International code The most versatile, GBK/gb2312 Chinese -->
<!-- Page 3 Elements -->
<title> Display detailed sign-in details </title>
<style>
* {
margin: 0px;
padding: 0px;
font-size: 14px;
font-family: ' Microsoft Yahei '
}
.signincalendar {
}
.signincalendar table {
margin: 0 auto;
border-radius: 0.5em;
border: 1px solid #00D3D3;
box-shadow: 0px 0px 7.5px 5px #00D3D3;
}
.signincalendar table tr {
}
.signincalendar table tr td {
width: 50px;
height: 34px;
text-align: center;
border: 1px solid black;
border-radius: 0.5em;
font-weight: bolder;
}
.signincalendar table tr.firsttr td, .signincalendar table tr.secondtr td
{
border: 0px;
}
table tr.secondtr td:nth-child(1) {
color: #E13838;
border-radius: 0px -1px 1px #FFFF68;
}
table tr.secondtr td:nth-child(2) {
color: orange;
border-radius:0px -1px 1px #FFFF68;
}
table tr.secondtr td:nth-child(3) {
color: #C2C200;
border-radius:0px -1px 1px #FFFF68;
}
table tr.secondtr td:nth-child(4) {
color: green;
border-radius:0px -1px 1px #FFFF68;
}
table tr.secondtr td:nth-child(5) {
color: #00D3D3;
border-radius:0px -1px 1px #FFFF68;
}
table tr.secondtr td:nth-child(6) {
color: blue;
border-radius:0px -1px 1px #FFFF68;
}
table tr.secondtr td:nth-child(7) {
color: purple;
border-radius: 0px -1px 1px #FFFF68;
}
table tr td.cantsign {
background: none repeat scroll 0% 0% #9B9B9B;
color: #F2F2F2;
}
table tr.threetr td {
background: #9AFAA0;
}
</style>
</head>
<body>
<div data-role="content">
<div class="signincalendar"></div>
</div>
<script type="text/javascript" src="jquery1.9.js"></script>
<script type="text/javascript" src="mycanledar.js"></script>
</body>
</html>2. Here is the code for mycanledar. js
// JavaScript Document
var nstr = new Date(); // Get the current date
var changedYear = nstr.getFullYear(); // Year
var changedMonth = nstr.getMonth(); // Month
var dnow = nstr.getDate(); // Today's date
var n1str = new Date(changedYear, changedMonth, 1); // The first day of the month 1 Days Date
var initfirstday = n1str.getDay(); // The first day of the month 1 Day and week
var daynumber = getMonthAllDay(changedMonth, changedYear);
showCanledar(changedMonth, initfirstday, dnow, daynumber);
reloadyear();
reloadmonth(1);
function reloadyear() {
var initYearSelect = $("#currentyear option");
initYearSelect.each(function() {
if ($(this).val().substring(0, 4) == changedYear) {
$(this).attr("selected", true);
}
});
}
function reloadmonth(isinit) {
var initMonthSelect = $("#currentmonth option");
initMonthSelect.each(function() {
if (isinit == 1) {
if ($(this).index() == changedMonth) {
$(this).attr("selected",true);
}
} else {
if ($(this).index() == changedMonth - 1) {
$(this).attr("selected", true);
}
}
});
}
// Is it a leap year
function is_leap(year) {
return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0)
: res = (year % 4 == 0 ? 1 : 0));
}
// Get the year of the drop-down list
function getNewYear() {
// alert(" Get year ");
return $("#currentyear option:selected").text().substring(0, 4);
}
// Get the month of the drop-down list
function getNewMonth() {
// alert(" Get month ");
return $("#currentmonth option:selected").text();
}
// Get the number of days in the current month
function getMonthAllDay(month, year) {
var m_days = new Array(31, 28 + is_leap(year), 31, 30, 31, 30, 31, 31, 30,
31, 30, 31);
return m_days[month];
}
// What day of the week is it to get a certain year, month and day
function getFirstWeekDay(year, month, day) {
var date = new Date();
date.setFullYear(year);
date.setMonth(month);
date.setDate(day);
return date.getDay();
}
// Get the number of rows in the table
function requiredRows(allday, firstday) {
var trstr = Math.ceil((allday + firstday) / 7);
// alert("trstr"+trstr);
return trstr;
}
/* Show Calendar */
function showCanledar(month, firstday, dnow, allday) {
var rows = requiredRows(allday, firstday);
var tb = "<table data-role='none' cellpadding='0px' cellspacing='3px' id='dates'>";
tb += "<tr class='firsttr'><td colspan='7' align='center'>";
tb += "<select data-role='none' id='currentyear'><option>2015</option><option>2016</option><option>2017</option><option>2018</option><option>2019</option><option>2020</option></select>";
tb += "<select data-role='none' id='currentmonth'><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option></select>";
tb += "</td></tr>";
tb += "<tr class='secondtr'>";
tb += "<td> Day </td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>";
tb += "</tr>";
for (var i = 0; i < rows; i++) {
tb += "<tr>";
for (var k = 0; k < 7; k++) { // Cells per row of the table
var idx = i * 7 + k; // Cell natural sequence number
var date_str = idx - firstday + 1; // Calculation date
(date_str <= 0 || date_str > allday) ? tb+="<td style='background:#DBDBDB'> </td>"
: tb += "<td>" +date_str + "</td>"; // Filter invalid dates (less than or equal to zero, greater than the total number of days in the month)
// Print date: Today's background color is red
// Query monthly sign-in status
}
tb += "</tr>";
// End of row of table
}
tb += "</table>"; // End of table
$(".signincalendar").html(tb);
}
/** Change the trigger event after the year ,jquery1.9 Version repealed live() Method, using the on Substitute * */
var reg = new RegExp("^[0-9]*$");
$(function() {
$(document).on('change', '#currentyear',function() {
changedYear = getNewYear();
changedMonth = getNewMonth();
commChanged();
reloadyear();
reloadmonth(0);
});
$(document).on('change','#currentmonth', function() {
changedMonth = getNewMonth();
commChanged();
reloadyear();
reloadmonth(0);
});
});
function commChanged() {
var firstweekday = getFirstWeekDay(changedYear, parseInt(changedMonth) - 1,
1);
// alert("firstweekday="+firstweekday);
var allday = getMonthAllDay(parseInt(changedMonth) - 1, changedYear);
// alert("allday="+allday);
showCanledar(changedMonth, firstweekday, 9, allday);
}