设为首页 加入收藏

TOP

vue日历/日程提醒/html5本地缓存(一)
2019-09-17 15:21:27 】 浏览:64
Tags:vue日历 日程 提醒 /html5 本地

先上图

 

功能:

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&

首页 上一页 1 2 3 4 5 6 下一页 尾页 1/6/6
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JS核心之DOM操作 上 下一篇element-ui Upload 上传组件源码..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目