思路
1.明确知道每月多少天
2.每天对应星期几
3.怎么切换上下月份
先看效果
one:首先定义一个HTML
<div class="calendar">
<!-- 存放头部用于切换上下月 -->
<div id="calendar-title"></div>
<!-- 日历表格table布局 -->
<div id="calendar-container"></div>
</div>
tow:再定义css
.calendar{
margin-top:3%;
height: auto;
background-color: #fff;
}
table {
width: 30%;
}
th, td {
text-align:center;
border: 1px solid #b9b9b9;
}
.rilititle{
width: 30%;
display: flex;
justify-content:space-around;
padding-bottom:5px;
padding-top:5px;
}
.bghuicolor{
height: 30px;
}
.calendar-bottom{
width: 100%;
display: flex;
justify-content:space-around;
color: #b9b9b9;
margin-top: 10px;
margin-bottom:10px;
}
three:最后再定义js
1.日历有两种情况,1是默认日期是多少,2是上下月调整是多少
//进入日历方法
calendar();
//日历切换日期
function calendar(year, month) {
if (year && month) {
let calendarHTML = '<div class="rilititle">';
calendarHTML += `<div onclick='upmonth(${year},${month})'>上月</div><div>${year}年${month}月</div><div onclick='downmonth(${year},${month})'>下月</div>`
calendarHTML += `</div>`
document.getElementById('calendar-title').innerHTML = calendarHTML
drawCalendar(year, month);
} else {
//进入日历默认日期
const currentDate = new Date();
const yearding = currentDate.getFullYear();
const monthding = currentDate.getMonth() + 1;
let calendarHTML = '<div class="rilititle">';
calendarHTML += `<div onclick='upmonth(${yearding},${monthding})'>上月</div><div>${yearding}年${monthding}月</div><div onclick='downmonth(${yearding},${monthding})'>下月</div>`
calendarHTML += `</div>`
document.getElementById('calendar-title').innerHTML = calendarHTML
drawCalendar(yearding, monthding);
}
}
2.然后在月份下面渲染table表格
//日历
function drawCalendar(year, month,sortedDatanum) {
//本月天数
const daysInMonth = new Date(year, month, 0).getDate();
//周几
const startDay = new Date(year, month - 1, 1).getDay();
//当前日期
const currentDate = new Date();
const yearding = currentDate.getFullYear();
const monthding = currentDate.getMonth() + 1;
let calendarHTML = '<table>';
calendarHTML += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
for (let i = 0; i < startDay; i++) {
calendarHTML += '<td></td>';
}
for (let day = 1; day <= daysInMonth; day++) {
if ((day + startDay) % 7 === 0) {
calendarHTML += '<td class="bghuicolor">' + day + '</td></tr>';
} else {
calendarHTML += '<td class="bghuicolor">' + day + '</td>';
}
}
calendarHTML += '</tr></table>';
document.getElementById('calendar-container').innerHTML = calendarHTML;
}
3.上下月份方法加入
//上个月
function upmonth(year, month) {
if (month == 1) {
calendar(year - 1, 12)
} else {
calendar(year, month - 1)
}
}
//下个月
function downmonth(year, month) {
if (month == 12) {
calendar(year + 1, 1)
} else {
calendar(year, month + 1)
}
}
4.完整js代码
<script>
//进入日历方法
calendar();
//日历切换日期
function calendar(year, month) {
if (year && month) {
let calendarHTML = '<div class="rilititle">';
calendarHTML += `<div onclick='upmonth(${year},${month})'>上月</div><div>${year}年${month}月</div><div onclick='downmonth(${year},${month})'>下月</div>`
calendarHTML += `</div>`
document.getElementById('calendar-title').innerHTML = calendarHTML
drawCalendar(year, month);
} else {
//进入日历默认日期
const currentDate = new Date();
const yearding = currentDate.getFullYear();
const monthding = currentDate.getMonth() + 1;
let calendarHTML = '<div class="rilititle">';
calendarHTML += `<div onclick='upmonth(${yearding},${monthding})'>上月</div><div>${yearding}年${monthding}月</div><div onclick='downmonth(${yearding},${monthding})'>下月</div>`
calendarHTML += `</div>`
document.getElementById('calendar-title').innerHTML = calendarHTML
drawCalendar(yearding, monthding);
}
}
//上个月
function upmonth(year, month) {
if (month == 1) {
calendar(year - 1, 12)
} else {
calendar(year, month - 1)
}
}
//下个月
function downmonth(year, month) {
if (month == 12) {
calendar(year + 1, 1)
} else {
calendar(year, month + 1)
}
}
//日历
function drawCalendar(year, month,sortedDatanum) {
//本月天数
const daysInMonth = new Date(year, month, 0).getDate();
//周几
const startDay = new Date(year, month - 1, 1).getDay();
//当前日期
const currentDate = new Date();
const yearding = currentDate.getFullYear();
const monthding = currentDate.getMonth() + 1;
let calendarHTML = '<table>';
calendarHTML += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
for (let i = 0; i < startDay; i++) {
calendarHTML += '<td></td>';
}
for (let day = 1; day <= daysInMonth; day++) {
if ((day + startDay) % 7 === 0) {
calendarHTML += '<td class="bghuicolor">' + day + '</td></tr>';
} else {
calendarHTML += '<td class="bghuicolor">' + day + '</td>';
}
}
calendarHTML += '</tr></table>';
document.getElementById('calendar-container').innerHTML = calendarHTML;
}
</script>
5.再改改样式,修改一下事件