先上图
功能:
1、上拉日历折叠,展示周
2、左右滑动切换月
2、“今天”回到今天;“+”添加日程
3、localStorage存储日程
index,html
<body>
<div id="app" v-cloak @mousedown="down" @mouseup="heightChange">
<!--日历-->
<div id="calendar">
<!-- 年份 月份 -->
<div class="year-month">
<span class="add" @click="eventAdd">+</span>
<span class="choose-yearMonth" >{{ currentYear }}-{{currentMonth}}</span>
<span class="today" @click="backToday">今天</span>
</div>
<div class="clear"></div>
<!-- 星期 -->
<ul class="weekdays">
<li style="color:red">日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li style="color:red">六</li>
</ul>
<!-- 日期 -->
<ul class="days" ref="daysBox">
<!--展示月-->
<li :style="{'display':showMonth==true?'block':'none'}" @touchstart="down" @touchend="move" v-for="day in days"> //移动端点击方法,可切换pc端点击方法,见下
<!--非本月日期,灰色字体-->
<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
<!--本月日期,正常显示-->
<span v-else>
<!--今天,特殊标示-->
<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
<!--非今天,正常显示-->
<span v-else>{{ day.getDate() }}</span>
</span>
</li>
<!--展示周-->
<li :style="{'display':showMonth==true?'none':'block'}" @mousedown="down" @mouseup="move_week" v-for="day in week_day"> //pc端点击方法,可切换移动端点击方法,见上
<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
<span v-else>
<!--今天-->
<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
<span v-else>{{ day.getDate() }}</span>
</span>
</li>
<li><i class="mui-icon mui-icon-arrowdown"></i></li>
</ul>
</div>
<!-- 添加日程 -->
<div id="content" v-if="show">
<div class="nav">
<span class="back" @click="eventAdd_false">返回</span>
<span class="finish" @click="eventAdd_true(id)">完成</span>
</div>
<div class="mui-input-row">
<input type="text" placeholder="日程内容" ref="eventName"/>
<input type="text" placeholder="备注信息" ref="eventInfo"/>
<input type="text" list="cars" placeholder="担任角色" ref="eventRole&