功能：
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"/>
<datalist id="cars">
<option value="经办人">
<option value="交办人">
<option value="其他">
</datalist>
<input type="text" v-model="getRemindTime" placeholder="设置提醒时间" @click="timeAdd"/>
</div>
<div class="overlay" v-if="selectTime">
<div id="curtain">
<div class="icon-shell">
<div class="icon-false" @click="setTime_false">X</div>
<div class="icon-true" @click="setTime_true"></div>
</div>
<div class="clear"></div>
<label >日
<input type="number" v-model="currentDay" min="0" />
</label>
<label >时
<input type="number" v-model="currentHour" min="0" />
</label>
<label >分
<input type="number" v-model="currentMinute" min="0" />
</label>
</div>
</div>
</div>
<!--选项卡-->
<div id="box">
<ul class="ul1">
<li v-for="(item,index) in tabtit" v-bind:class="{active:index == num}" @click="tab(index)">
{{item}}
</li>
</ul>
<ul class="ul2">
<li v-for="(main,index) in tabmain" v-show="index == num">
<div v-for="(date,index) in main">
<div class="clear"></div>
<div>{{date.eventName}}</div> <div class="keep-right">{{date.eventTime}}</div>
<div class="clear"></div>
<div>{{date.eventInfo}}</div>
<div class="clear"></div>
<div>{{date.eventRole}}</div> <div class="keep-right" @click="select(index)">...</div>
<div class="clear"></div>
<div class="overlay" v-if="index==selectIndex" @click="closeDiv"></div>
<div v-if="index==selectIndex" class="select-p">
<p>修改</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>