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

要在Vue中创建一个日历来显示当天的日程安排表，你可以使用第三方库如vue-cal或手动编写组件。以下是一个简单的例子，使用Vue和第三方库date-fns来显示当天的日程安排表。

首先，安装vue-cal和date-fns：

npm install vue-cal date-fns

然后，在你的Vue组件中使用它们：

<template>
  <div>
    <vue-cal :events="events" :time-from="timeFrom" :time-to="timeTo" :disable-views="['month']" />
  </div>
</template>
 
<script>
import VueCal from 'vue-cal';
import 'vue-cal/dist/vuecal.css';
import { startOfDay, endOfDay, isSameDay } from 'date-fns';
 
export default {
  components: {
    VueCal,
  },
  data() {
    return {
      events: [], // 初始化日程数组
      timeFrom: startOfDay(new Date()), // 设置当天开始时间
      timeTo: endOfDay(new Date()), // 设置当天结束时间
    };
  },
  created() {
    // 假设这是从你的数据库或API获取的日程数据
    this.events = [
      {
        start: '2023-04-01 08:30',
        end: '2023-04-01 09:30',
        title: 'Event 1',
      },
      // ... 更多日程
    ];
 
    // 过滤出今天的日程
    this.events = this.events.filter(event => 
      isSameDay(new Date(event.start), this.timeFrom));
  },
};
</script>
 
<style>
/* 你可以在这里添加自定义样式 */
</style>

在这个例子中，我们使用了vue-cal来显示日历，并通过date-fns的startOfDay和endOfDay函数来获取当天的开始和结束时间。我们还使用isSameDay函数来过滤出今天的日程安排。你需要根据你的数据结构和API来调整events的获取和处理。