preface

In the actual practice of the project, it is necessary to realize the calendar function for the project home page, mainly including the addition, deletion, change and check of the schedule. After a study on the Internet, through comparison found a better conscience plug-in Fullcalendar.

Fullcalendar is an open source component for creating calendar calendar management. Let’s take a look at the power of this calendar component.

This paper consists of the following parts:

1. Install fullcalendar

2. Simple DEMO code

3. Annotation of the FullCalendar attribute in the Template

4. Annotation of FullCalendar attribute method in script

Install Fullcalendar

Under the Vue framework, fullcalendar is encapsulated into several different versions,

  • @ fullcalendar/vue
  • vue-fullcalendar

It is important to note that these two uses are not the same, so don’t confuse them!

This article focuses on the first use of @fullCalendar /vue. In practice, the second implementation is not friendly.

First download and install related dependency packages.

npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid
Copy the code

Simple DEMO code

<template>
	<FullCalendar :options="calendarOptions" class="eventDeal-wrap"/>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css'

export default {
  name: 'DEMO'.components: {
    FullCalendar
  },
  data () {
    return {
		calendarOptions: {
          // An imported plug-in
          plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
          // Calendar header button position
          headerToolbar: {
            left: 'prev,next today'.center: 'title'.right: 'dayGridMonth, timeGridWeek, timeGridDay'
          },
          // Calendar header button Chinese conversion
          buttonText: {
            today: 'today'.month: 'month'.week: 'week'.day: 'day'
          },
          initialView: 'dayGridMonth'.// Specify the default display view
          locale: 'zh-ch'.// Switch the language, currently Chinese
          firstDay: '1'.// Set the first day of the week to be displayed, Sunday to 0, Monday to 1, and so on
          weekNumberCalculation: 'ISO'.// Use with firstDay
          eventCOlor: '#3d8eec'.// All calendar background colors
          timeGridEventMinHeight: '20'.// Set the minimum height of the event
          aspectRatio: '1.5'.// Set the width ratio of calendar cells
          displayEventTime: false.// Whether to display the event time
          allDaySlot: false.// In the week and day views, the all-day view is not displayed
          eventLimit: true.// Set the monthly schedule and the maximum number of all-day slots to be displayed
          eventTimeFormat: {
            hour: 'numeric'.minute: '2-digit'.hour12: false
          },
          slotLabelFormat: {
            hour: '2-digit'.minute: '2-digit'.meridiem: false.hour12: false // Set the time to 24 hours
          },
          events: [].// Schedule array
          / / event
          editable: true.// Whether (drag, zoom) can be modified
          eventStartEditable: true.// The start time of the Event calendar can be changed. The default is true. If it is false, the start and end time range cannot be stretched, but can only be dragged
          eventDurationEditable: true.// Whether the distance between the start and end time of the Event schedule can be changed. The default value is true. If it is false, the start and end time range cannot be stretched, but can only be dragged
          selectable: true.// Whether calendar can be selected
          selectMirror: true.selectMinDistance: 0.// Select the minimum distance of the calendar cell
          weekends: true.navLinks: true.Link / / day
          selectHelper: false.selectEventOverlap: false.// Whether multiple schedules of the same time period can overlap visually. Default is true, yes
          dayMaxEvents: true.dateClick: this.handleDateClick, // Date click
          eventsSet: this.handleEvents, // Event click
          eventClick: this.handleEventClick, // Schedule click information display
          eventDrop: this.handleEventDrop, // Schedule drag events
          eventResize: this.eventResize // Schedule zoom event
        }
    }
  },
  mounted () {

  },
  created () {

  },
  methods: {
    // Save the schedule
      saveEvent (val) {
        let eventsArr = this.calendarOptions.events
        try {
          if (eventsArr.length === 0) {
            eventsArr.push(val)
          } else {
            eventsArr.forEach((item, index, eventsArr) = > {
              // If you want to modify the schedule
              if (item.eventID === val.eventID) {
                throw new Error(index)
              }
            })
            // If it is a new schedule
            eventsArr.push(val)
          }
        } catch (e) {
          // If you want to modify the schedule
          eventsArr.splice(e.message, 1, val)
        }
      },
      // Schedule deleted
      deleteEvent (val) {
        let eventsArr = this.calendarOptions.events
        try {
          eventsArr.forEach((item, index, eventsArr) = > {
            if (item.eventID === val) {
              throw new Error(index)
            }
          })
        } catch (e) {
          // Delete the specified schedule
          eventsArr.splice(parseInt(e.message), 1)}},// Schedule events click
      handleEvents (info) {
        console.log('handleEvents.info:', info)
        // this.currentEvents = events
      },
      handleWeekendsToggle () {
        console.log('handleWeekendsToggle')
        this.calendarOptions.weekends = !this.calendarOptions.weekends
      },
      // Date click
      handleDateClick (selectInfo) {
        if (confirm('Would you like to go to the + selectInfo.dateStr + Add a new event? ')) {
          // The parent component calls the child component method directly
          this.$refs['eventDialogue'].openDialog('add')
          // The parent component modifies the child component variables directly
          // this.$refs['eventDialogue'].dialogVisible = true}},// Schedule click information display
      handleEventClick (info) {
        console.log('handleEventClick.info:', info)
        info.el.style.borderColor = 'red'
        this.$refs['eventDialogue'].openDialog('view', info)
      },
      // Schedule event triggered
      eventClick (info) {
        console.log('eventClick.info:', info)
        info.el.style.borderColor = 'red'
      },
      // Schedule drag events
      handleEventDrop (info) {
        this.$refs['eventDialogue'].eventFormModel.start = info.event.start
        this.$refs['eventDialogue'].eventFormModel.end = info.event.end
      },
      // Schedule zoom event
      eventResize (info) {
        this.$refs['eventDialogue'].eventFormModel.start = info.event.start
        this.$refs['eventDialogue'].eventFormModel.end = info.event.end
      }
  }
}
</script>
<style>
</style>
Copy the code

The specific meanings of each parameter have been clearly described in the above sample code comments. The following is a brief explanation of the main parameters. Template FullCalendar attribute annotation:

  • defaultView

    Indicates that the current default is the month view (dayGridMonth), is a view of a month. There is also the day view (dayGridDay) and weekly views (dayGridWeek), etc. If you install ittimeGridPlugin, there will be (timeGridWeek.timeGridDay) and so on.
  • locale

    For localization, we use Chinese simplified (zh-CN).
  • firstDay

    On the first day of the week,The firstDay = "1"Means Monday is displayed in the first one.
  • weekNumberCalculation

    与firstDayMatch, set toISOThe first day of the week is Monday.

Script FullCalendar attribute method annotation:

  • calendarPlugins

    through: plugins = "calendarPlugins"And then incalendarPluginsTo define and reference the functional plug-ins to use.CalendarPlugins: [dayGridPlugin, interactionPlugin]
  • eventTimeFormat

    through: eventTimeFormat = "eventTime"In theeventTimeDefines the format of the event.
  • header

    Calendar header layout style,left,center,right, can use the title, front and rear buttons (prev.next), toggle button (Today, dayGridMonth, dayGridDay, dayGridWeekSet).
  • buttonText

    headerThe default buttons are displayed in English, if you want to manually change to Chinese, with: buttonText = "buttonText"To change, inButtonText :{today: 'today', month: 'month'}To establish the 1-to-1 mapping relationship.
  • events

    The specific content and data of schedule events.
  • dateClick

    through@ dateClick = "handleDateClick"Binding function to trigger. Refers to the event that is triggered when a calendar specific date cell is clicked.
  • eventClick

    through@ eventClick = "handleEventClick"Binding function to trigger. Click on a specific scheduleeventsIs the event that is triggered.

npm run devWith localhost:8080, you can see the following:

Note: The style of the calendar plug-in is available throughF12Step by step optimization. See more colorful and cool effects and event handling mechanisms in the calendarLink (English),Link (Chinese).

Develop reading