用vue写一个日历

  之前在上家公司做过一个公司人员考勤的东西,里面需要用到日历,当时自己用vue随便写了一个,比较简单,删掉了其他功能的代码,只留下日历,直接看代码

<template>
 <div class="lookForMonth_wrapper">
  <div class="lookForMonth_top">
   <div class="selectDate">
    <div>{{year}} 年 {{month}} 月</div>
    <div class="upDownSelect">
     <div class="upDownSelect_item" @click="dateUp"></div>
     <div class="upDownSelect_item" @click="dateDown"></div>
    </div>
   </div>
  </div>
  <div class="calendar" :style="calendarStyle">
   <div v-for="(item,index) in calendarData" class="calendar_item" :key='index' :class="{ash:item.color==='ash',date:index>6&&item.color!=='ash'}">
    <p class="dateEdit">{{item.label}}<i class="el-icon-edit-outline" v-if="item.color!=='ash'&&index>=7"></i></p>
    <p v-if='index>6'>上班</p> // 打工人
   </div>
  </div>
 </div>
</template>
<script>
export default {
 name: "lookForMonth",
 data: () => {
 return {
  calendarData: [{label:"日"},{label: "一"}, {label:"二"},{label: "三"},{label: "四"},{label: "五"},{label: "六"}], //日历循环渲染数据
  year: 0, //当前日期年
  month: 0, //当前日期月数
  date: 0, //当前日期号数
  day: -1, //当前星期几
 };
 },
 filters:{
 },
 computed: {
 // 根据当月日期详情更改日历表格高度
 calendarStyle() {
  if (this.calendarData.length > 42) {
  return "height: 701px;";
  } else {
  return "height: 601px;";
  }
 }
 },
 async created(){
 // 获取当前日期数据
 this.getNow();
 // 获取当前月份一号的时间戳
 let firstTime = +new Date(this.year,this.month-1,1,0,0,0)
 this.getCalendarDate(); // 给calendarData添加当月数据
 },
 mounted() {
 },
 methods: {
 // 获取当前时间
 getNow() {
  let now = new Date()
  this.year = +now.getFullYear()
  this.month = +now.getMonth() + 1
  this.date = +now.getDate()
  this.day = +now.getDay()
 },
 // 获取每个月的天数
 monthDay(month) {
  if ([1,3,5,7,8,10,12].includes(month)) {
  return 31
  } else if ([4,6,9,11].includes(month)) {
  return 30
  } else if (month === 2) {
  // 判断当年是否为闰年
  if (
   (this.year % 4 === 0 && this.year % 100 !== 0) ||
   this.year % 400 === 0
  ) {
   return 29
  } else {
   return 28
  }
  }
 },
 // 给calendarData添加当月数据
 getCalendarDate() {
  // 获取当前月份一号星期几
  let firstDay = new Date(this.year + "-" + this.month + "-" + "01").getDay();
  this.calendarData = [{label:"日"},{label: "一"}, {label:"二"},{label: "三"},{label: "四"},{label: "五"},{label: "六"}];
  let num = parseInt(firstDay);
  let nowDays = this.monthDay(this.month);
  let lastMonth = this.month - 1>0?this.month - 1:12;
  let lastDays = this.monthDay(lastMonth);
  // 循环添加上一个月数据
  for (let i = 0; i < num; i++) {
  this.calendarData.push({label:lastDays - num + i + 1,color:'ash'});
  }
  // 循环添加当月数据
  for (let i = 0; i < nowDays; i++) {
  this.calendarData.push({label:i + 1});
  }
  // 循环添加下一个月数据
  if (this.calendarData.length % 7 !== 0) {
  let surplusDay = 7 - (this.calendarData.length % 7);
  for (let i = 0; i < surplusDay; i++) {
   this.calendarData.push({label:i + 1,color:'ash'});
  }
  }
  this.loading = false
 },
 // 将日期调上
 dateUp() {
  this.month--;
  if (this.month <= 0) {
  this.year--;
  this.month = 12;
  }
  this.getCalendarDate(); // 给calendarData添加当月数据
 },
 // 将日期调下
 dateDown() {
  this.month++;
  if (this.month > 12) {
  this.year++;
  this.month = 1;
  }
  this.getCalendarDate(); // 给calendarData添加当月数据
 },
 }
};
</script>
<style lang="scss" scoped>
.lookForMonth_wrapper {
 padding: 20px;
 width: 701px;
 margin: auto;
}
.lookForMonth_top {
 margin-bottom: 20px;
 overflow: hidden;
 .selectTeacher {
 float: left;
 }
 .selectDate {
 height: 30px;
 line-height: 30px;
 float: right;
 display: flex;
 .upDownSelect {
  display: flex;
  flex-direction: column;
  margin-top: -2px;
  margin-left: 5px;
  .upDownSelect_item {
  width: 0;
  height: 0;
  border: 7px solid transparent;
  cursor: pointer;
  }
  .upDownSelect_item:nth-child(1) {
  border-bottom: 7px solid #666;
  margin-bottom: 5px;
  &:hover {
   border-bottom: 7px solid skyblue;
  }
  }
  .upDownSelect_item:nth-child(2) {
  border-top: 7px solid #666;
  &:hover {
   border-top: 7px solid skyblue;
  }
  }
 }
 }
}
/* 日历表样式=======================================↓ */
.calendar {
 width: 701px;
 border-top: 1px solid #ccc;
 border-left: 1px solid #ccc;
 display: flex;
 flex-wrap: wrap;
 box-sizing: border-box;
 .calendar_item {
 box-sizing: border-box;
 width: 100px;
 height: 100px;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 &.date:hover{
  background: #eee;
 }
 .status{
  margin-top: 10px;
  &.textBlue{
  color: blue;
  }
  &.textRed{
  color: brown;
  }
 }
 .el-icon-edit-outline{
  cursor: pointer;
  margin-left: 7px;
 }
 }
 .ash{
 color: gainsboro;
 }
 .dateEdit{
 margin-bottom: 10px;
 }
}
</style>

效果如下:

以上就是利用vue写一个日历的详细内容,更多关于vue 日历的资料请关注我们其它相关文章!

(0)

相关推荐

  • 亲自动手实现vue日历控件

    之前项目中有用到日历控件,当时由于时间问题,是在网上找到一个demo,然后二次开发的,从那时就想着自己写一个日历控件.这篇文章说明日历数据的处理,去除月份天数判断以及是否闰年判断. 设计(以最常用的按月份的日历) 日历其实大家都很熟悉,一切的设计都是从功能出发,这是根本.日历的功能分为两大块. 日历头部:当前年份/月份. 日历主体:当前月份的具体的日期信息. 日历主体的行数:现在我们看到的日历基本上为6行,因为一个月最多为31天,假设当前月的第一天为上一月最后一周的最后一天.如果是五行数据的话则

  • vue实现日历表格(element-ui)

    本文实例为大家分享了vue实现日历表格的具体代码,供大家参考,具体内容如下 效果如图: html:后面的日期是循环出来的 <div class="calendar-title"> <span class="calendar-left" @click="lastDateclick"><</span> <span class="calendar-center">近期事件<

  • 基于Vue实现支持按周切换的日历

    基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换,具体内容如下 <template> <div class="date"> <!-- 年份 月份 --> <div class="month"> <p>{{ currentYear }}年{{ currentMonth }}月</p> </div> <!-- 星期 --> <ul class=&q

  • vue实现一个炫酷的日历组件

    公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据. 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求: 展示当前日期(服务器时间)前后90天,一共181天的日期. 日历可以左右滑动切换月份. 当月份的如果不在181天区间的,需要置灰并且不可点击. 点击日历绑定的节点的外部,关闭弹窗. 涉及内容: 获取服务器时间,渲染日历数据 vue-touch监听手势滑动事件 ios日期兼容处理 clickOutSide自定义指

  • Vue实现日历小插件

    本文实例为大家分享了Vue实现日历小插件的具体代码,供大家参考,具体内容如下 先看下效果图吧, 如下 源码可见于我的github 实现关键点: 1.组件的复用以及父子组件传值 很明显每年每个月的月历样式(数据不一样)是一致的,那么自然而然思路就是把每个月作为一个公用组件进行复用十二次,这样就避免了多次重复的代码.每个组件不一样的地方在于年份和月份,而这两个数据我们可以由父组件向子组件进行传值来告诉子组件.关键代码如下: <template> <div class="wrap&q

  • VUE实现日历组件功能

    哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里.所以笔者经过一周的拍脑袋,做了一个十分简陋的版本. 简介 目前只支持月视图,该组件是 .vue 文件的形式.所以,大家在使用的时候 是需要node的咯~~~ 安装 npm install vue-fullcalendar DEMO 针对这个组件, 本人做了一个十

  • Vue 组件(component)教程之实现精美的日历方法示例

    组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用不同的组件来拼接页面.这种开发模式使得前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦. 最近应公司的要求,需要开发一个精美的日历组件(IOS , 安卓, PC 的IE9+都能运行),写完后想把它分享出来,希望大家批评. 先来个截图 代码已经分享到 https://github.com/zhangKun

  • vue+elementUI实现简单日历功能

    vue+elementUI简单的实现日历功能,供大家参考,具体内容如下 <div class="calender2"> <div class="date-headers"> <div class="date-header"> <div><el-button type="primary" @click="handlePrev"><i class

  • Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

    之前写了一篇周和月日历,但感觉体验不是太好,所以有重新做了一遍,加上了动画.还可以自定义显示日历里的内容. 现在贴出项目源码,我现在是放在CSDN里的下载资源,这里哦 现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持 1.总共分为两个组件(父组件calendar.vue) <template> <div class="calendar-box"> <ul class="calendar-head&quo

  • 基于Vue2-Calendar改进的日历组件(含中文使用说明)

    一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅-- 于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版 二,改进的功能 在Vue2-Calendar v2.2.4 版基础上作了优化. 1.改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'. 2.日历面板增加

  • vue日历/日程提醒/html5本地缓存功能

    先上图 功能: 1.上拉日历折叠,展示周 2.左右滑动切换月 2."今天"回到今天:"+"添加日程 3.localStorage存储日程 index,html <body> <div id="app" v-cloak @mousedown="down" @mouseup="heightChange"> <!--日历--> <div id="calendar

  • Vue.js创建Calendar日历效果

    使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding. 实现一个HTML的日历效果. html 部分 <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,

  • vue实现简单的日历效果

    最近在项目中遇到了一个需求,在vue中创建一个组件,这个组件显示的是当前的日期,以及在当前的日需要处理的事项,处理的事项的信息会以后端的接口的形式返回. 需求确认后,搭建了一下,在这里记录了一下,现在是简单的实现了这个需求,但是肯定的是后期需要进行修改. vue就不多说了,在vue中使用的是原生JS 效果图(基本没有样式,很low) 现在实现的都是最初级的版本,代码里面的容错,还有一些性能上的处理,并没有书写. 不多说,上代码: 首先是vue的html结构,很简单,里面添加了一些其他时间形式的显

  • vue-week-picker实现支持按周切换的日历

    本文实例为大家分享了vue-week-picker实现按周切换的日历的具体代码,供大家参考,具体内容如下 vue-week-picker 安装 npm install vue-week-picker --save-dev DEMO 原生:线上DEMO 与element-ui结合使用:线上DEMO 功能 自适应式按周切换 与DatePicker日期选择器使用 结合Element-ui使用 效果 与vue-element结合组件,请转到链接 使用 <VueWeekPicker @dateValue=

  • vue实现日历备忘录功能

    用vue写了个日历备忘录的功能,省略了备忘录的增删改查功能. 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>备忘录</title> <style type="text/css"> #box{ width: 469px; } /*日历*/ *{ padding:

随机推荐