功能：
1、上拉日历折叠，展示周
2、左右滑动切换月
2、“今天”回到今天；“+”添加日程
3、localStorage存储日程
index,html
<body> <div v-cloak @mousedown="down" @mouseup="heightChange"> <!--日历--> <div> <!-- 年份 月份 --> <div> <span @click="eventAdd">+</span> <span >{{ currentYear }}-{{currentMonth}}</span> <span @click="backToday">今天</span> </div> <div></div> <!-- 星期 --> <ul> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <!-- 日期 --> <ul 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">{{ day.getDate() }}</span> <!--本月日期，正常显示--> <span v-else> <!--今天，特殊标示--> <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()">{{ 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">{{ day.getDate() }}</span> <span v-else> <!--今天--> <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()">{{ day.getDate() }}</span> <span v-else>{{ day.getDate() }}</span> </span> </li> <li><i></i></li> </ul> </div> <!-- 添加日程 --> <div v-if="show"> <div> <span @click="eventAdd_false">返回</span> <span @click="eventAdd_true(id)">完成</span> </div> <div> <input type="text" placeholder="日程内容" ref="eventName"/> <input type="text" placeholder="备注信息" ref="eventInfo"/> <input type="text" list="cars" placeholder="担任角色" ref="eventRole"/> <datalist> <option value="经办人"> <option value="交办人"> <option value="其他"> </datalist> <input type="text" v-model="getRemindTime" placeholder="设置提醒时间" @click="timeAdd"/> </div> <div v-if="selectTime"> <div> <div> <div @click="setTime_false">X</div> <div @click="setTime_true"></div> </div> <div></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> <ul> <li v-for="(item,index) in tabtit" v-bind:class="{active:index == num}" @click="tab(index)"> {{item}} </li> </ul> <ul> <li v-for="(main,index) in tabmain" v-show="index == num"> <div v-for="(date,index) in main"> <div></div> <div>{{date.eventName}}</div> <div>{{date.eventTime}}</div> <div></div> <div>{{date.eventInfo}}</div> <div></div> <div>{{date.eventRole}}</div> <div @click="select(index)">...</div> <div></div> <div v-if="index==selectIndex" @click="closeDiv"></div> <div v-if="index==selectIndex"> <p>修改</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </div> </div> </li> </ul> </div> <!--mui框架下底部选项卡 <nav> <a> <span></span> <span>工作</span> </a> <a> <span></span> <span>角色</span> </a> <a> <span></span> <span>事项圈</span> <a> <span></span> <span>同事</span> </a> <a> <span></span> <span>日历</span> </a> </nav>--> </div> </body>
style.css