vue日历上每天的日程安排表

结合了vue-calendar-component和Element UI的table组件。

npm install vue-calendar-component  --registry=https://registry.npmmirror.com

点击一天，切换table数据。

<template>
    <div>
        <div class="con">
            <Calendar v-on:choseDay="clickDay" v-on:changeMonth="changeDate" v-on:isToday="clickToday"></Calendar>
        </div>

        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="开始时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="enddate"
        label="结束时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="事情"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
</template>

<script>
/* eslint-disable */
import Calendar from 'vue-calendar-component';
export default {
    components: {
        Calendar
    },
    data() {
        return {
            tableData: []
        };
    },
    created() { },
    methods: {
        clickDay(data) {

            if(data=='2024/3/30'){
                this.tableData=[{
            date: '8:00',
            enddate: '9:00',
            name: '请客',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '9:00',
            enddate: '10:00',
            name: '出差',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '10:00',
            enddate: '11:00',
            name: '给客户打电话',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '11:00',
            enddate: '12:00',
            name: '报销车费',
            address: '上海市普陀区金沙江路 1516 弄'
          }];
            }else{
                this.tableData=[{
            date: '8:00',
            enddate: '9:00',
            name: 'go school',
            address: 'American'
          }, {
            date: '9:00',
            enddate: '10:00',
            name: 'eat food',
            address: 'beijing'
          }, {
            date: '10:00',
            enddate: '11:00',
            name: 'play game',
            address: 'nanjing'
          }, {
            date: '11:00',
            enddate: '12:00',
            name: 'watch tv',
            address: 'shanghai'
          }];
            }
        },
        changeDate(data) {
        },
        clickToday(data) {
        }
    },
};
</script>