笔记记录Vue+Element-ui+Fullcalendar简约日历排班-Toy模板网

这篇具有很好参考价值的文章主要介绍了笔记记录Vue+Element-ui+Fullcalendar简约日历排班。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

官方文档地址：https://fullcalendar.io/docs/vue

1. 安装一下Fullcalendar依赖

npm install --save "@fullcalender/core"
npm install --save "@fullcalender/interaction"
npm install --save "@fullcalender/timegrid"
npm install --save "@fullcalender/vue"

2. 引入

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from './event-utils'

3. 编写组件

<div class="demo-app-main">
      <FullCalendar class="demo-app-calendar" :options="calendarOptions">
        <template v-slot:eventContent="arg">
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar>
    </div>
    <el-dialog :title="optTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="员工名称班次" label-width="100px">
          <el-input
            v-model="form.title"
            auto-complete="off"
            placeholder="请输入员工名称班次"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" label-width="100px">
          <el-date-picker
            v-model="form.start"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        
        <el-form-item label="结束时间" label-width="100px">
          <el-date-picker
            v-model="form.end"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="warning"
          @click="delEvent"
          v-if="form.id"
          style="float: left"
          >删 除</el-button
        >
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

4. data中的属性配置

form: {},
      dialogFormVisible: false,
      optTitle: '',
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin, // needed for dateClick
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay',
        },
        initialView: 'dayGridMonth',
        initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        // 点击事件对象事件
        /* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
      },
      currentEvents: [],

5. 这里编辑弹框是element-ui的el-dialog

handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
    },
    // 点击编辑
    handleEventClick(info) {
      this.dialogFormVisible = true
      this.optTitle = '编辑'
      this.form = {
        id: info.event.id,
        title: info.event.title,
        start: info.event.start,
        end: info.event.end,
      }
    },
    // 新增
    handleDateSelect(selectInfo) {
      let title = prompt('Please enter a new title for your event')
      let calendarApi = selectInfo.view.calendar

      calendarApi.unselect() // clear date selection

      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay,
        })
      }
    },
    // 删除
    delEvent() {
      this.dialogFormVisible = false
    },
    handleEvents(events) {
      this.currentEvents = events
    },
    // 关闭弹框
    handleClose() {
      this.dialogFormVisible = false
    },
    // 确定
    handleSave() {
      this.dialogFormVisible = false
    },

6. css样式

h2 {
  margin: 0;
  font-size: 16px;
}

ul {
  margin: 0;
  padding: 0 0 0 1.5em;
}

li {
  margin: 1.5em 0;
  padding: 0;
}

b {
  /* used for event dates/times */
  margin-right: 3px;
}

.demo-app {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-sidebar {
  width: 300px;
  line-height: 1.5;
  background: #eaf9ff;
  border-right: 1px solid #d3e2e8;
}

.demo-app-sidebar-section {
  padding: 2em;
}

.demo-app-main {
  flex-grow: 1;
  padding: 3em;
}

.fc {
  /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;
}

文章来源地址https://www.toymoban.com/news/detail-643040.html

到了这里，关于笔记记录Vue+Element-ui+Fullcalendar简约日历排班的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！