开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
今天接到了一个日历的活，老板是想要那种可以显示这个人跟进记录的一个日历。好吧，那就自己手写一个吧，js html走起。
这是我写的html 部分： 里面包含年，月 周 日
<div class="zhipai_jilu">
<div class="genjin_rili">
<div class="rili_title">日历记录</div>
<div class="calendar_top">
<div class="year">
<span id="year_cont">2022</span><span>年</span>
<img src="./img/jiantou_xia.png" alt="" id="year_down">
<img src="./img/jiantou_shang.png" alt="" style="display:none ;" id="year_up">
<ul class="yearall" id="yearall" style="display: none;">
<li data-year="2019">2019</li>
<li data-year="2020">2020</li>
<li data-year="2021">2021</li>
<li data-year="2022">2022</li>
<li data-year="2023">2023</li>
<li data-year="2024">2024</li>
</ul>
</div>
<div class="mounth">
<span id="mounth_select">8</span><span>月</span>
<img src="./img/jiantou_xia.png" alt="" id="mounth_down">
<img src="./img/jiantou_shang.png" alt="" style="display:none ;" id="mounth_up">
<ul class="mounthall" id="mounthall" style="display: none;">
<li data-mounth="1" class="month_li">1月</li>
<li data-mounth="2" class="month_li">2月</li>
<li data-mounth="3" class="month_li">3月</li>
<li data-mounth="4" class="month_li">4月</li>
<li data-mounth="5" class="month_li">5月</li>
<li data-mounth="6" class="month_li">6月</li>
<li data-mounth="7" class="month_li">7月</li>
<li data-mounth="8" class="month_li">8月</li>
<li data-mounth="9" class="month_li">9月</li>
<li data-mounth="10" class="month_li">10月</li>
<li data-mounth="11" class="month_li">11月</li>
<li data-mounth="12" class="month_li">12月</li>
</ul>
</div>
<div class="mounth">
<span id="mounth_select" style="line-height:41px;cursor: pointer; ">回到今天</span>
</div>
<!-- <div class="nowTime"></div> -->
</div>
<div class="calendar_cont">
<ul class="week" id="week">
<li class="week_li">日</li>
<li class="week_li">一</li>
<li class="week_li">二</li>
<li class="week_li">三</li>
<li class="week_li">四</li>
<li class="week_li">五</li>
<li class="week_li">六</li>
</ul>
<ol class="canlendar_content">
</ol>
</div>
</div>
</div>
主要我们来看js部分
思路：
1.每次进入，我们就要获取当前的月份 和当前的日期
2.拿到当前的月份，去匹配天数，然后我们就渲染多少天。
3.计算出这个月份的第一天是星期几，去渲染填充不显示日期的部分
showCalender();
// 被选中的月份
let changeMounth=new Date().getMonth() +1;
// 被选中的年份
let changeYear=new Date().getFullYear();
let now =new Date();
let today = now.getDate();
// 这个arr是我们自己的数据，可以换成请求后台的 数据，然后再执行下面的日历函数，把数据放入日历中
let arr =[
{
date:3,
tip:'任务结束备注完成'
},
{
date:5,
tip:'任务结束备注完成'
},
{
date:7,
tip:'任务结束备注完成'
},
{
date:9,
tip:'任务结束备注完成'
},
{
date:12,
tip:'任务结束备注完成'
}
]
$('#mounth_select').text(changeMounth);
$('#year_cont').text(changeYear);
$('#mounth_down').click(function(){
$(this).hide();
$('#mounth_up').show();
$('#mounthall').show();
})
$('#mounth_up').click(function(){
$(this).hide();
$('#mounth_down').show();
$('#mounthall').hide();
})
$('#year_down').click(function(){
$(this).hide();
$('#year_up').show();
$('#yearall').show();
})
$('#year_up').click(function(){
$(this).hide();
$('#year_down').show();
$('#yearall').hide();
})
// 选择月份
$('#mounthall li').mouseenter(function(){
$(this).addClass('calendar_active');
$(this).siblings('li').removeClass('calendar_active');
})
$('#mounthall li').click(function(){
changeMounth=$(this).attr('data-mounth');
console.log(changeMounth)
$('#mounthall').hide();
$('#mounth_up').hide();
$('#mounth_down').show();
$('#mounth_select').text(changeMounth);
now.setMonth(changeMounth-1)
showCalender()
})
// 选择月份
$('#yearall li').mouseenter(function(){
$(this).addClass('calendar_active');
$(this).siblings('li').removeClass('calendar_active');
})
// 年份选择
$('#yearall li').click(function(){
changeYear=$(this).attr('data-year');
console.log(changeYear)
$('#yearall').hide();
$('#year_up').hide();
$('#year_down').show();
$('#year_cont').text(changeYear);
now.setFullYear(changeYear)
showCalender();
})
// 显示出日历
function showCalender(){
$('.canlendar_content').empty();
let month = now.getMonth() + 1
let year = now.getFullYear()
//每个月多少天
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
allDays=31
break;
case 4:
case 6:
case 9:
case 11:
allDays=30
break;
default:
if((year%4==0 && year %100==0) || year%400==0){
allDays=29
} else {
allDays=28
}
break;
}
// 获取当前月份有多少天，那么我们就渲染多少个li
for(let i=1; i<=allDays; i++ ){
let li=$('<li></li>').text(i)
// let li=$('<li></li>')
if(i==today && year==changeYear && month==changeMounth){
console.log('today')
li.addClass('active2');
}
for(let j=0; j<arr.length; j++){
let date=arr[j].date;
if(i==date){
li=$('<li>'+i+'<span style="display:none;">'+arr[j].tip+'</span></li>')
li.addClass('active');
}
}
$('.canlendar_content').append(li)
}
// 给li 带有 active的元素添加mouseenter事件
$('.canlendar_content li.active').mouseenter(function(){
$(this).find('span').fadeIn();
})
$('.canlendar_content li.active').mouseleave(function(){
$(this).find('span').fadeOut();
})
// 每个月1号前面空几个 空的个数为周几 就空几个
now.setDate(1) //将时间设置成本月的一号
//获取每月1号是星期几
let firstDay = now.getDay() // 获取一号是周几
for (let i = 0; i < firstDay; i++) { // 循环次数为对应的是周几
now.setDate(now.getDate() - 1) //每循环一次 日期往前倒一天
let li = $('<li/>').text(now.getDate()).addClass('disabled') //生成相对应的空格
$('.canlendar_content').prepend(li)
}
now.setDate(now.getDate() + firstDay) //将时间设置回当前时间 否则影响后面时间的获取
now.setDate(allDays)
//思路：每个月最后一天后面空几个 空的个数为6减周几就空几个
now.setDate(allDays) //将时间设置成每月最后一天
let lastDay = 6 - now.getDay() //最后空的个数
for (let i = 0; i < lastDay; i++) {
now.setDate(now.getDate() + 1) //每循环一次 日期往后加一天
let li = $('<li/>').text(now.getDate()).addClass('disabled') //生成相对应的空格
$('.canlendar_content').append(li)
}
now.setDate(now.getDate() - lastDay) //将时间设置回当前时间 否则影响后面时间的获取
now.setDate(1)
$('.nowTime').html(now.getFullYear() + '年' + (now.getMonth() + 1) + '月')
}
这样一个简单的日历效果就做好了，这只是显示效果，其他的功能还有待开发。
