Fullcalendar is a very popular JS component for calendar calendar processing. It is powerful, well-documented, highly customizable and seamless with your projects. There have been many articles on this site that describe the use of Fullcalendar (v5). Today we’ll look at how to use Fullcalendar under the Vue framework.

  • FullCalendar official website: fullCalendar. IO /
  • FullCalendar official document: fullCalendar. IO /docs

You can refer to the summary of the latest FullCalendar Chinese documents on this website

Look at the renderings first

Install Fullcalendar

// Install v5.6
npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid
Copy the code

FullCalendar is provided to users for installation in the form of core code and plug-ins, so we can directly install the corresponding plug-ins for the functions we need. When using, you can refer to: list of functional plug-ins.

use

1. Create a fullcalendar. vue
<template>
  <! -- Task schedule -->
  <div class="top" style="background: #fff; padding: 8px 6px">
    <div class="modelBox">
      <span class="radis"></span>
      <span style="color: black; font-size: 16px; font-weight: bold">To-do tasks</span>
    </div>
    <div class="tabs" style="width: 100%">
      <FullCalendar ref="fullCalendar" :options="calendarOptions" class="demo-app-calendar" />
    </div>
  </div>
</template>
Copy the code
2. Introduce the plug-ins you want to use
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import zhCnLocale from '@fullcalendar/core/locales/zh-cn'
Copy the code
3. All configuration items are incalendarOptionscomplete
calendarOptions: {
        plugins: [
          // Load the plug-in. V5 is added by plug-in module
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin, // needed for dateClick].height: 800.// Calendar height
        width: 600.headerToolbar: {
          / / toolba head
          left: 'prev,next today'.center: 'title'.right: 'timeGridDay,timeGridWeek,dayGridMonth'.// right: 'dayGridMonth'
        },
        handleWindowResize: true.// Changes with the browser window
        initialView: 'dayGridMonth'.// Initialize the plug-in display
        // initialDate:""// Initialization date
        // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        // editable: true, // Whether editable
        // droppable: true,// dragable
        // timeZone: 'local',// use timeZone
        selectable: true.// selectMirror: true,
        dayMaxEvents: true.// Weekends: true, // Whether to display seven days a week
        // select: this.handleDateSelect,
        // eventClick: this.handleEventClick, //
        eventMouseEnter: this.handleEventMouseEnter, // Triggered when the user hovers over the event
        // eventsSet: this.handleEvents,
        // dateClick: this. HandleDateClick,// Date box click event
        eventClick: this.handleEventClick, // Schedule click events
        locale: zhCnLocale,
        nextDayThreshold: '01:00:00'.events: [
          // Json for calendar events
          // { title: 'event 1', date: '2021-04-23 12:00:00' },
          // { title: 'event 2', date: '2021-04-24 05:59:23' },
          // { title: 'event 3', date: '2021-04-25 08:23:00' },
          // { title: 'event 4', date: '2021-04-25 09:30:00' },
          // { title: 'event 5', date: '2021-04-26 12:00:00' },
          // { title: 'event 2', date: '2021-04-26 15:00:00' }].// datesSet: this.handleDateSet,
        /* you can update a remote database when these fire: eventAdd: eventChange: eventRemove: */
},
Copy the code
4. Schedule assignment
// Annual Summary report
that.calendarOptions.events.push({
   color: '#ff9900'.title: element.name,
   date: element.time,
   status: this.statusName,
   type: element.type,
   times: element.time,
   category: element.category
})
Copy the code
5. This case is used in the calendar mouse into the hover box display details, useeventMouseEnterMouse hover events, used heretippy.jsPlugin.Tippy. Js document.
// When the user hovers the mouse over the event, the event is triggered. Here, the data type is judged, and different types of data page hover box displays different content
handleEventMouseEnter(info) {
      console.log(info, 'yyyy')
      let col = info.event.borderColor
      let eve = info.event._def.extendedProps
      let category = info.event._def.extendedProps.category

      tippy(info.el, {
        // content:"
      

       " +
      

        // "
      

        Conference name: "+ info.event.title+"
      
" +
        // "
      

        // "
      

        // "
      

        Conference status: "+eve.status+"
      
" +
        // "",
        content: `<div style='width: 260px; background-color:#FAFAFA; padding:5px; font-size:14px; z-index:99999; '> <div style='display:flex; color: #666666; overflow: hidden; ' class="${ eve.category == 1 ? 'hidden' : ' '}"> <div><span style='display:inline-block; width:6px; height:6px; background-color:#318DDE; border-radius:50%; margin:0 5px; <div style="width:161px; white-space:normal; overflow: auto; table-layout:fixed; word-break: break-all; height:auto; display:inner-block">${info.event.title}</div> </div> <div style='color: #666666; overflow: hidden; ' class="${ eve.category == 1 ? 'hidden' : ' '}"><span style='display:inline-block; width:6px; height:6px; background-color:#318DDE; border-radius:50%; margin:0 5px; '></span>${eve.type}</div> <div style='color: #666666; overflow: hidden; ' class="${ eve.category == 1 ? 'hidden' : ' '}"><span style='display:inline-block; width:6px; height:6px; background-color:#318DDE; border-radius:50%; margin:0 5px; '></span>${eve.times}</div> <div style='color: #666666; overflow: hidden; ' class="${ eve.category == 1 ? 'hidden' : ' '}"><span style='display:inline-block; width:6px; height:6px; background-color:#318DDE; border-radius:50%; margin:0 5px; '></span>${eve.status}</div> <div style='color: #666666; overflow: hidden; ' class="${ eve.category == 0 ? 'hidden' : ' '}"><span style='display:inline-block; width:6px; height:6px; background-color:#318DDE; border-radius:50%; margin:0 5px; '> < / span > year:${eve.year}</div> <div style='color: #666666; overflow: hidden; ' class="${ eve.category == 0 ? 'hidden' : ' '}"><span style='display:inline-block; width:6px; height:6px; background-color:#318DDE; border-radius:50%; margin:0 5px; '></span>${eve.depRoleName}</div> <div style='color: #666666; overflow: hidden; ' class="${ eve.category == 0 ? 'hidden' : ' '}"><span style='display:inline-block; width:6px; height:6px; background-color:#318DDE; border-radius:50%; margin:0 5px; '> < / span > name:${eve.name}</div>
                </div>`.theme: 'light'.// Theme selection
        // trigger: 'click', // trigger type
        interactive: true.// Interactive
        placement: 'top-start'.// Hover position
        allowHTML: true.// Whether HTML text is allowed
        zIndex: 99999,}}),Copy the code