vue日历日程组件

最新推荐文章于 2024-04-17 10:10:18 发布
最新推荐文章于 2024-04-17 10:10:18 发布
阅读量4.7k 收藏 48
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58528200/article/details/121945682
版权

要求：开发一个日历日程组件：包含回到今天、选择年度、选择月份及日期切换等功能，数据为静态数据。

效果：

 

 

代码：

<template>
  <div class="calendar-container">
    <div class="schedule-head">
      <div class="today" @click="toToday">回到今天</div>
      <div class="select one">
        <el-select class="select" v-model="yearModel" @change="yearChange" placeholder="">
          <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="select two">
        <el-select v-model="monthModel" @change="monthChange" placeholder="">
          <el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="weekdays">
      <div class="item" v-for="(item,index) in weekdays" :key="index">{{item}}</div>
    </div>
    <div class="days">
      <div class="days-item" 
        v-for="(item,index) in days" 
        :key="index" 
        @click="daySelect(item)">
        <div class="days-con" v-if="item.year == yyyy && item.month == mm && item.name == dd" :class="item.name == dd ? 'now': ''">
          {{item.name}}
          <div class="circle" v-if="item.content"></div>
        </div>
        <div class="days-con" v-else :class="item.name === currentDay ? 'select': ''">
          {{item.name}}
          <div class="circle" v-if="item.content"></div>
        </div>
      </div>
    </div>
    <div class="schedule-list">
      <div class="title">日程安排</div>
      <div v-if="scheduleList && scheduleList.length" class="schedule">
        <div class="schedule-item">
          <el-timeline>
            <el-timeline-item class="line-item" 
              v-for="(item,index) in scheduleList" 
              :key="index"
              color="#ffffff"
              size="large">
              <div class="time">{{item.time}}</div>
              <div class="circle">
                <div>{{item.type == 1 ? '会议': ''}}</div>
              </div>
              <div class="content">
                <div class="name">{{item.name}}</div>
                <div class="site">
                  <img class="icon" src="../assets/img/locate.png">
                  <span>{{item.place}}</span>
                </div>
                <div class="people">
                  <div class="txt" @click="openDia(item.people)">查看参与者</div>
                  <div class="num">（共{{item.num}}人）</div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div v-else class="no-data">暂无安排！</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      yyyy: null,
      mm: null,
      dd: null,
      yearModel: null,
      monthModel: null,
      years: [],
      months: [],
      weekdays:['周日','周一','周二','周三','周四','周五','周六'],
      days: [],
      today: null, //今天
      currentDay: null, // 选中天
      scheduleList: [],
      tableDate:[
        {year:2021,month:12,name:2,content:[
          {time:'10:00 - 11:00',type: 1,name:'2会议名称会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议名称会议名称会议名称会议名称会议名称',place:'小会议室',people:'张三、李四、王五',num:'3'},
          {time:'14:00 - 16:00',type: 1,name:'2会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'2会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'17:00 - 18:00',type: 1,name:'21会议名称',place:'小会议室',people:'张三、李四',num:'2'},
        ]},
        {year:2021,month:12,name:5,content:[
          {time:'10:00 - 11:00',type: 1,name:'5会议名称会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议名称会议名称会议名称会议名称会议名称',place:'小会议室',people:'张三、李四、王五',num:'3'},
          {time:'14:00 - 16:00',type: 1,name:'5会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'5会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'5会议名称',place:'小会议室',people:'张三、李四',num:'2'},
        ]},
        {year:2021,month:12,name:14,content:[
          {time:'10:00 - 11:00',type: 1,name:'14会议名称会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议名称会议名称会议名称会议名称会议名称',place:'小会议室',people:'张三、李四、王五',num:'3'},
          {time:'14:00 - 16:00',type: 1,name:'14会议名称',place:'小会议室',people:'张三、张三、李四张三、李四张三、李四张三、李四张三、李四张三、李四李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'14会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'14会议名称',place:'小会议室',people:'张三、李四',num:'2'},
        ]},
        {year:2021,month:12,name:15,content:[
          {time:'10:00 - 11:00',type: 1,name:'15会议名称会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议名称会议名称会议名称会议名称会议名称',place:'小会议室',people:'张三、李四、王五',num:'3'},
          {time:'14:00 - 16:00',type: 1,name:'15会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'15会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'15会议名称',place:'小会议室',people:'张三、李四',num:'2'},
        ]},
        {year:2021,month:12,name:22,content:[
          {time:'10:00 - 11:00',type: 1,name:'22会议名称会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议名称会议名称会议名称会议名称会议名称',place:'小会议室',people:'张三、李四、王五',num:'3'},
          {time:'14:00 - 16:00',type: 1,name:'22会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'22会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'22会议名称',place:'小会议室',people:'张三、李四',num:'2'},
        ]},
        {year:2022,month:1,name:4,content:[
          {time:'10:00 - 11:00',type: 1,name:'4会议名称会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议名称会议名称会议名称会议名称会议名称',place:'小会议室',people:'张三、李四、王五',num:'3'},
          {time:'14:00 - 16:00',type: 1,name:'4会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'45会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'4会议名称',place:'小会议室',people:'张三、李四',num:'2'},
        ]},
        {year:2022,month:1,name:7,content:[
          {time:'10:00 - 11:00',type: 1,name:'7会议名称会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议名称会议名称会议名称会议名称会议名称',place:'小会议室',people:'张三、李四、王五',num:'3'},
          {time:'14:00 - 16:00',type: 1,name:'7会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'7会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'7会议名称',place:'小会议室',people:'张三、李四',num:'2'},
        ]},
        {year:2022,month:1,name:10,content:[
          {time:'10:00 - 11:00',type: 1,name:'10会议名称会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议会议名称会议名称会议名称会议名称会议名称会议名称',place:'小会议室',people:'张三、李四、王五',num:'3'},
          {time:'14:00 - 16:00',type: 1,name:'10会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'10会议名称',place:'小会议室',people:'张三、李四',num:'2'},
          {time:'16:20 - 16:50',type: 1,name:'10会议名称',place:'小会议室',people:'张三、李四',num:'2'},
        ]},
      ]
    }
  },
  mounted() {
    var date = new Date()
    this.yyyy = date.getFullYear()
    this.mm = date.getMonth() + 1
    this.dd = date.getDate()
    this.initDate()
  },
  methods: {
    getList() {
      const params = {
        year: this.yearModel,
        month: this.monthModel
      }
      this.getMonthDayNum(this.yearModel,this.monthModel)
      console.log(params,'ppp')
    },
    // 获取当前月的天数、当前月第一天是周几
    getMonthDayNum(year, month) {
      let d = new Date(year, month, 0)
      let day = d.getDate()
      for (let i = 1; i <= day; i++) {
        this.days.push({year:year,month:month,name:i})
      }
      d.setDate(1)
      let weekNum = d.getDay()
      for (let j = 0; j < weekNum; j++) {
        this.days.unshift('')
      }
      this.tableDate.forEach((item) => {
        this.days.forEach((d,i) => {
          if(item.year == this.yearModel && item.month == this.monthModel) {
            if(item.name == d.name) {
              this.days[i].content= item.content
            }
          }
        })
      })
      console.log(this.days,'fff')
    },
    // 回到今天
    toToday() {
      this.days = []
      this.yearModel = this.yyyy
      this.monthModel = this.mm
      this.today = this.dd
      this.currentDay = null
      // this.scheduleList = []
      this.tableDate.forEach((item) => {
        if(this.yearModel == item.year && this.monthModel == item.month && this.today == item.name) {
          this.scheduleList = item.content
        }
      })
      this.getMonthDayNum(this.yearModel,this.monthModel)
    },
    // 选中天
    daySelect(val) {
      this.currentDay = val.name
      console.log(val,'vvvvv')
      this.scheduleList = val.content
    },
    initDate() {
      this.yearModel = this.yyyy
      this.monthModel = this.mm
      this.today = this.dd
      this.currentDay = null
      console.log(this.yyyy,this.mm,this.dd,'g')
      this.tableDate.forEach((item) => {
        if(this.yearModel == item.year && this.monthModel == item.month && this.today == item.name) {
          this.scheduleList = item.content
        }
      })
      console.log(this.scheduleList,'ssss')
      this.selectYear(this.yearModel)
      this.selectMonth(this.monthModel)
      this.getMonthDayNum(this.yearModel,this.monthModel)
    },
    // 选择年
    yearChange() {
      this.days = []
      this.scheduleList = []
      this.getList()
    },
    // 选择月
    monthChange() {
      this.days = []
      this.scheduleList = []
      this.getList()
    },
    selectYear(year) {
      this.years = []
      for(let i=0;i<30;i++) {
        this.years.push({value:(year+1-i),label:(year+1-i)+'年'})
      }
    },
    selectMonth() {
      this.months = []
      for(let i=1;i<=12;i++){
        this.months.push({value:i,label:i+ "月"});
      }
    },
    openDia(val) {
      this.$alert(val,'查看参与者', {
        confirmButtonText: '关闭',
        callback: action => {
          console.log(action)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$w:100vw/1920;
:deep().el-timeline-item__tail {
  position: absolute;
  border-left: 1*$w dashed rgba(242, 141, 73, 1);
}
.calendar-container {
  font-family: SourceHanFont;
  .schedule-head {
    margin-top: 25*$w;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14*$w;
    font-weight: 400;
    .today {
      margin-right: 23*$w;
      cursor: pointer;
      color: #3377FF;
      line-height: 20*$w;
    }
    .select {
      :deep().el-select{
        line-height: 30*$w;

      }
      &.one {
        margin-right: 5*$w;
        :deep().el-input {
          width: 96*$w;
        }
      }
      &.two {
        :deep().el-input {
          width: 80*$w;
        }

      }
    }
  }
  .weekdays {
    display: flex;
    font-size: 14*$w;
    font-weight: 400;
    color: #6484AB;
    line-height: 19*$w;
    margin-top: 19*$w;
    .item {
      width: 77*$w;
      text-align: center;
    }
  }
  .days {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    .days-item {
      margin: 8*$w 20*$w 0;
      font-size: 14*$w;
      font-weight: 400;
      color: #6484AB;
      position: relative;
      .days-con {
        width: 36*$w;
        line-height: 36*$w;
        text-align: center;
        cursor: pointer;
        &.now {
          text-align: center;
          width: 36*$w;
          background: #538FFF;
          border-radius: 30*$w;
          color: #fff;
          box-sizing: border-box;
          line-height: 34*$w;
        }
        &.select {
          line-height: 34*$w;
          text-align: center;
          width: 36*$w;
          border-radius: 30*$w;
          background: rgba(83, 143, 255, 0.1);
          border: 1*$w solid #538FFF;
          box-sizing: border-box;
        }
      }
      .circle {
        position: absolute;
        bottom: 2*$w;
        left: 45%;
        width: 5*$w;
        height: 5*$w;
        background: #F28D49;
        border-radius: 50%;
      }
    }
  }
  .schedule-list {
    position: relative;
    .title {
      margin: 20*$w 0 20*$w 10*$w;
      font-size: 16*$w;
      font-weight: 500;
      color: #3D4966;
      line-height: 14*$w;
    }
    .schedule {
      max-height: 480px;
      overflow-y: auto;
      &::-webkit-scrollbar{
        display: none;
      }
    }
    .schedule-item {
      margin: 0 8*$w 0 139*$w;
      font-size: 14*$w;
      font-weight: 400;
      .line-item {
        .time {
          position: absolute;
          left: -120*$w;
          top: 2*$w;
          color: #3D4966;
          line-height: 14*$w;
        }
        .circle {
          position: absolute;
          left: -20*$w;
          top: 2*$w;
          text-align: center;
          background: #fff;
          color: #F28D49;
          line-height: 20*$w;
          z-index: 99;
          div {
            border-radius: 10*$w;
            width: 50*$w;
            background: rgba(242, 141, 73, .11);
          }
        }
        .content {
          margin-left: 20*$w;
          .name {
            width: 351*$w;
            color: #3D4966;
            line-height: 18*$w;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .site {
            margin: 8*$w 0 10*$w;
            color: #6484AB;
            line-height: 18px;
            .icon {
              width: 10*$w;
              height: 14*$w;
              margin-right: 6*$w;
            }
          }
          .people {
            color: #3377FF;
            line-height: 14*$w;
            display: flex;
            align-items: center;
            cursor: pointer;
            .num {
              margin-left: 10*$w;
              color: #6484AB;
            }
          }
        }
      }
    }
    .no-data {
      margin: 22*$w;
      text-align: center;
      height: 48*$w;
      font-size: 22*$w;
      
      font-weight: 400;
      color: #CDDAEA;
      line-height: 20*$w;
    }
  }
}
</style>

山谷里的杂货铺
关注
  • 7
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue2 实现日历组件，包含新增日程
qq_46143850的博客
06-09 2110
实现的最终效果： 模板 html 部分 js 部分 css 部分
Vue制作一个日程表
安的博客
05-23 1万+
自己的代码功底实在太弱，所以想要通过重写这种组件来锻炼一下能力。 我在项目中使用了element，这个日程表参照了full-calendar 和 element 的日历组件。 日期时间是使用了moment，http://momentjs.cn/，使用它来操作时间非常方便。 结果如下， 主要是做出来了一个日历及日程表的形式，下一篇想在上面做出一些事件等。 <template&...
一个可切换周视图和月视图的vue日历组件并且可以显示日程安排及事件标注
08-12
一个可切换周视图和月视图的vue日历组件，并且可以显示日程安排及事件标注
Vue设计一个简单日程表
lzh623015455的博客
03-24 2095
简单日程表 1. css文件如下： body{ width: 1200px; height:800px; background: aquamarine; } #style1{ position: fixed; top: 0; left: 40%; font-size: 30px; color: red; } #style2{ ...
Vue-FullCalendar：让日程管理变得更简单
最新发布
gitblog_00023的博客
04-17 285
Vue-FullCalendar：让日程管理变得更简单 项目地址:https://gitcode.com/CroudTech/vue-fullcalendar Vue-FullCalendar 是一个基于 Vue.js 框架的全功能日历组件，它将 [FullCalendar](https ——一款强大的JavaScript日历库——的优点与Vue.js的灵活性和易用性完美结合。此项目为开发者提供了...
vue 自己捣鼓周日程日历组件（WSchedule）
weixin_41277748的博客
02-10 6550
需求：想要一个周日程表，记录每天的计划，点击可查看详情。可自定义时间段通过后台获取时间段显示 分析： 通过需求，我联想到在大学期间就用过超级课程表app这款软件，其中课表和这个需求很像，只不过这个需求第一列的时间段是自定义的，不是上午下午两个，但是原理都差不多 原本想找一些第三方插件使用，由于时间充足，而且自己也想封装成一个组件方便以后或许会碰到类似的需求，于是自己手动写了一个日程日历。 效果如下：自己写的肯定有不足的地方，如有问题请大佬们提出，进行改进 npm包 使用文档 npm i w.
使用vue实现日程安排表
qq_41687299的博客
03-29 4405
效果图： planTable.js let days = ["21-05", "21-06", "21-07", "21-08", "21-09", "21-10","21-11"] let plans = ["计划一", "计划二", "计划三"] // let times = ['7:00', '7:30', '8:00', '8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00'
fullCalendar日程表在Vue项目中的应用
绝对零度的博客
05-06 5218
fullCalendar日程表在Vue项目中的应用 fullCalendar相关API 使用fullCalendar插件在项目中实现日程排版，支持天、月日程转换，自定义事件 页面布局 通过按钮切换天与月视图的转换，天视图回显具体的时分排版项目，月视图回显缩略信息 <div class="order-day-calendar h-100 clearfix"> <div id='calendar' class="h-100" @contextmenu.prevent.stop="st
vue 自定义月日历日程组件（MSchedule）
weixin_41277748的博客
02-11 5364
效果图 组件的使用 日程内容可以自定义 状态对应颜色可以自定义 <MSchedule :list="plan" @handleDetail="handleDetail" @chooseEntireCard="chooseEntireCard" @changeMonth="changeMonth"> <template v-slot:card="{row}"> <span>时段：{{ row..
Vue中使用Fullcalendar日历开发日程安排
热门推荐
小破孩的博客
12-31 1万+
效果图： 官方文档地址：https://fullcalendar.io/docs/vue 1、安装与FullCalendar相关的依赖项 npm install --save @fullcalendar/vue @fullcalendar/daygrid 2、在模板中添加标签 <full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar&g
vue封装日历组件(vue2/vue3)
qq_38661597的博客
04-21 3512
组件里注释的部分代码是实现的下拉，下拉选择项的月份根据当前的月份，把当前月以及之前的月push进去，但是只实现了当前年的，前一年的就无法选择；并且点击日历中某一天的时候，若不是当前月，不做任何处理。实现一个日历组件，可以在对应的日期下显示其他数据；点击日期为其他月份的时候自动切换到该月。
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
主要介绍了基于Vue2-Calendar改进的日历组件（含中文使用说明）的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
eventCalendar:Vue日程组件
05-16
hansinCalendar 功能： 生成日历 日程排列 1.0: 2.0: 3.0: 完成版，加入了Elemen_ui, store, http-request 使用需谨慎 抽空把这个组件独立出来放到npm方便使用 eventList = [ { id: 5018500790, _id: 5018500790, title: '3-10跨周显示0000', color: '#ff3333', start: '2018-05-03', end: '2018-05-10', className: '' }, { id: 5018500791, _id: 5018500791, title: '跨周显示111', color: '#ff3333', start: '2018-05-04'
VUE实现日历组件功能
08-31
本篇文章主要介绍了VUE实现日历组件功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现一个炫酷的日历组件
10-17
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
亲自动手实现vue日历控件
10-16
主要记录了亲自动手实现vue日历控件的详细过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue原生方式实现日历组件
hyduan_h5的博客
06-02 6305
vue原生实现日历组件
vue2 自定义移动端日历日程组件 可切换年月日周
followly的博客
01-05 1507
一个可以切换年月日周的日历日程组件，用于展示在移动端提供日程服务，点击对应日期展示对应日程
前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。
苦逼打工人的博客
04-20 1796
【代码】前端日历组价（包含新建日程，查看日程/切换年月查看日程）vue组件日历复制即用，日程可能要看这调一调。
vue 自定义月日历日程组件
08-20
对于自定义月日历日程组件，你可以使用Vue.js框架来实现。下面是一个简单的示例代码，可以帮助你开始构建这个组件： ```vue <button @click="previousMonth">< <h2>{{ currentMonth }} ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值