This article aims to help those who are using FullCalendar for the first time in VUE but don’t know how to start it quickly.

If you are good at English, you can also go to FullCalendar’s official website

introduce

FullCalendar, the most popular full-size JavaScript calendar right now

FullCalendar has three major features:

  • Powerful and lightweight: with more than 100 customizable Settings. Built as a separate module to reduce file size.
  • Developer-friendly: Supports React, Vue, and Angular frameworks
  • Open source: All code is open source on GitHub, but there is also a non-free “advanced” version

A, install,

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

For the record, fullcalendar/vue and vue-fullcalendar are not the same thing, so be careful whether you install the former or the latter. Fullcalendar/Vue 5.3.1 is used in this article, and the API varies slightly from version to version. Additional components can be downloaded on demand if required.

Second, the introduction of

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
Copy the code

There’s nothing more to say here, just introduce it normally, okay

Three, use,

<template> <div> <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions"/> </div> </template> <script> import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction' import timeGridPlugin from '@fullcalendar/timegrid' export default { Components: {FullCalendar // Use as if using custom components}, data() {return {calendarApi: null, calendarOptions: {plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], // which plugin needs to be introduced and placed in this array initialDate: new Date(), // the initialDate displayed when the calendar is first loaded. Any job that can be resolved to Date includes the ISO8601 Date string, such as "2014-02-01". initialView: 'dayGridMonth', // The initial view when the calendar is loaded. The default value is 'dayGridMonth', which can be the value of any available view, such as 'dayGridWeek', 'timeGridDay', 'listWeek' locale: 'zh-cn', // set the calendar language to "zh-cn" firstDay: '1', // Set the first day of the week, the default value depends on the current locale, the value is the number of the week, and the value must be an integer, Sunday =0 weekNumberCalculation: 'ISO', // specify the "ISO" result is ISO8601 weeks. Specify "ISO" to change the default value of firstDay to 1 (Monday) buttonText: {// The text will be displayed on the button of the headerToolbar/footerToolbar. HTML injection is not supported. All special characters will be escaped. Today: 'today ', Month:' month ', week: 'week ', day:' day '}, headerToolbar: {// Define the button and title at the top of the calendar. Setting the headerToolbar option to false will not display any title toolbar. Objects can be provided with properties start/center/end or left/ Center /right. These properties contain strings with comma/space-separated values. Comma-separated values are displayed next to each other. A small gap is displayed between whitespace separated values. right: 'today prev,next', center: 'title', left: 'dayGridMonth,dayGridWeek,dayGridDay' }, eventTimeFormat: {// Format of the time displayed on each event hour: 'numeric', minute: '2-digit', hour12: false}, events: [// Events can be an array, json, or a function.] 'event end event' // note that end is optional. Without end, the event displays only the backgroundColor of the day: '#FDEBC9', // the event's backgroundColor, borderColor: '#FDEBC9', // textColor: '#F9AE26' // textColor for this event], customButtons: {// Define a custom button that can be used in the headerToolbar/footerToolbar today: {text: 'today ', // Display text of the button click: Next: {click: this.nextClick}, prev: {click: this.nextClick}, prev: {click: this.nextClick}, prev: {click: PrevClick}}, eventClick: this.handleDateclick, // Trigger this callback when clicking on the event This. HandleMouseEnter, // Trigger the eventMouseLeave callback when the mouse hovers over the event: This.handlemouseleave, // When the mouse is removed, trigger the callback dateClick: // If the user clicks on a date or time, the interaction plugin must be loaded. // If the user clicks on a date or time, the interaction plugin must be loaded. To set ref // on the component and there is no fullCalendar in this.$refs when the component is not loaded, CalendarApi = this.calendarAPI = this.refs.fullcalendar.getapi ()} { handleDateClick(dateClickInfo) { console.log(dateClickInfo) }, HandleMouseEnter (mouseEnterInfo) {the console. The log (mouseEnterInfo. Event. StartStr) / / tip: MouseEnterInfo. Event.} startStr can obtain the beginning of the current event event, handleMouseLeave (mouseEnterInfo) {the console. The log (mouseEnterInfo)}, TodayClick (mouseEvent, htmlElement) {calendarapi.today () // Move the calendar to the current date. Calendarapi.getdate () // Returns the current date of the calendar}, nextClick(mouseEvent, htmlElement) {calendarapi.next () // moves the calendar forward one step (for example, A month or a week). // If dayGridMonth views the calendar, move the calendar forward one month. // If the calendar is in dayGridWeek or in timeGridWeek, move the calendar forward one week. // If the calendar is on dayGridDay or in timeGridDay, move the calendar forward one day. }, prevClick(mouseEvent, htmlElement) {calendarapi.prev () // Calendarapi.prev () step back (for example, a month or a week). // If dayGridMonth views the calendar, move the calendar back one month. // If the calendar is in dayGridWeek or in timeGridWeek, move the calendar back one week. // If the calendar is on dayGridDay or in timeGridDay, move the calendar back to one day. } } } </script>Copy the code

The above are the usage methods of some apis, which can basically meet some simple requirements. For more APIS, you can go to FullCalendar official website.

At the end

If this article is useful to you, please like it, bookmark it and comment on it. If you have any questions, comments or suggestions, please share them in the comments section