一个完整的日历组件 fullcalendar，会议预约功能@fullcalendar/vue 1. 组件简介功能：日程

@fullcalendar/vue

1. 组件简介

功能：日程安排，展示日历，可以用来做会议日历，可以跨日期显示日程。

效果图：

demo地址：fullcalendar.io/demos

fullcalendar.io_demos.png

2. 快速开始

安装方式：

npm：www.npmjs.com/package/@fu…

install:

npm install @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid

// 下载完记得在 package.json 固定下依赖版本（现在是6.1.15）

<template>
	<div>
    <div class="header">
      <div class="title">
        2025年2月
  		</div>
      <div>
        <button @click="toMonth">
          当月 
        </button>
        <button @click="prev">
          前一月 <  
        </button>
        <button @click="next">
          后一月 > 
        </button>
      </div>
    </div>
    <FullCalendar ref="fullCalendar" :options="calendarOptions" />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data: function() {
    return {
      // 配置项
      calendarOptions: {
        // 引入的插件
        plugins: [dayGridPlugin],
        // 日历默认显示视图
        initialView: 'dayGridMonth',
        // 日历加载的初始月份（Month）
        initialDate: new Date(),
        // 语言设置
        locale: 'zh-cn',
        // 是否显示周末
        weekends: true,
        // 日历头部工具栏，自定义了头部
        headerToolbar: false,
        // 事件上显示的时间格式
        eventTimeFormat: {
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
        // !日程数组
        // 如果某个日程是跨天全天的，就会显示成日程，否则是事项
        events: [
          // title：标题，start：事件开始事件，end：事件结束时间，backgroundColor：事件的背景颜色，borderColor：事件的边框颜色（突出不同日程），textColor：事件的文字颜色, allDay: 是否是全天日程, className: 有了这个类名，可以定制不同日程的样式了，比如添加 border-left: 3px solid yellow; 使事件更醒目, id: 标识
          { title: 'Meeting 标题', start: new Date() }
        ],
        // 事件
        eventClick: this.handlerClick, // 点击事件时的 callback fn
        timeGridEventMinHeight: '20', // 设置事件的最小高度
        aspectRatio: '1.5', // 设置日历单元格宽高比
        displayEventTime: false，// 是否显示事件时间
        selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠
        dayMaxEvents: true, // 限制单个日期的最大事件
        eventLimit: true, // 限制显示在一天的事件数，超过显示 +2more
        
        // 更多props可以看下文档和源码
        // headerToolbal-> buttonText（中文转换)，buttonHints（修改类似于标签上的 title，鼠标移上去会显示 title）、customButtons：自定义工具栏上按钮
      }
    }
  },
  created() {
    // todo
    // 1. 渲染日历，加载日程，支持跨天显示（类似于 mac 上的日历），耐心看文档。
    // 3. 日程详情
    // 这里的交互有hover和click，我觉得hover不好做，需要计算位置信息（类似于tooltip，组件没有插槽可以自定义。click的做法就是通过点击事件，打开一个弹窗，可以用一些 ui 组件快速完成。
    // 4. 样式优化
    // 通过 className，F12 去找dom，调试 css；
  },
  mounted() {
    // 2. 自定义工具栏（标题、当前月份，前一月、后一月、当月按钮），这会用到组件的 api
    // 保存 api，方便调用
    this.calendarApi = this.$refs.fullCalendar.getApi();
  },
  methods: {
    toMonth() {
      this.calendarOptions.events = [];
      this.calendarApi.today(); // 日历移动到当前日期
      // time dayjs(this.calendarApi.getDate()).format('YYYY-MM');
      this.fetch(); // 用当前日期 time，请求日程数据
    },
    prev() {
      this.calendarOptions.events = [];
      this.calendarApi.prev(); // 后退一个月、周、日
      this.fetch(); // 获取当前的日期请求日程数据 time
    },
    next() {
      this.calendarOptions.events = [];
      this.calendarApi.prev(); // 前进一个月、周、日
      this.fetch();
    },
    // 监听日期选择器，切换月份
    onChange(value) {
      this.calendarOptions.events = [];
      this.calendarApi.gotoDate(value);
    },
    // 日程点击事件
    handlerClick(info) {
      // 根据 id，找到这条数据
      const data = this.calendarData.find(item => item.id == id);
      // 数据赋值
      this.calendarDetail = data;
      // 打开弹窗
    }
  }
}
</script>

一个完整的日历组件 fullcalendar，会议预约功能

@fullcalendar/vue

1. 组件简介

2. 快速开始

3. Api文档