Introduce 👊

😃Fullcalendar is a popular calendar calendar processing JS component, it has powerful functions, complete documentation, high customization, and seamless docking with your project, but the current document is still mainly in English, but gym can be viewed through translation (English proficiency skip this sentence ~😂).

  • FullCalendar official website: fullCalendar. IO /👈
  • FullCalendar official document: fullCalendar. IO /docs👈
  • Latest FullCalendar Chinese document collection: latest FullCalendar Chinese document 👈

Prototype figure

Demand background

Develop a special booking resource page to display the resource booking situation at a macro level and solve the pain points of booking services.

Real operation process

👉 official Vue introduction tutorial

✔ installation

Install @fullCalendar /vue and 3 basic modules @fullCalendar/Interaction, @fullCalendar /core and @fullCalendar /daygrid

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

It is also a feature of this component to introduce whatever modules are used later. You can refer to the documentation for details of related module functions

👉 plugin official document links: fullcalendar. IO/docs/plugin…

✔ development

👉 FullCalendar. Vue

👇 introduced

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

👇 rendering

<FullCalendar calss="fullCaleadear" ref="fullCalendar" :options="calendarOptions"/>
Copy the code

👇 Main Configuration

Data () {return {// calendarOptions: {plugins: [ dayGridPlugin, timeGridPlugin, iinteractionPlugin, // needed for dataClick resourceTimeLinePlugin ], initialDate: New Date(), timeZone: 'UTC', slotMinTime: '00:00:00', // Start time slotMaxTime: '24:00:00', // End time headerToolbar: Select drag aspectRatio: 1.5, initialView: 'resourceTimelineDay', scrollTime: XXX, scroll bar to display the location // Advanced function license key. This key is added when advanced functions are needed. Avoid warning displayed in the lower left corner to remind schedulerLicenseKey: 'CC-Attribution- noncommercial-noderivatives ', // Non-assignable Backsplash businessHours: [{daysOfWeek: [1, 2, 3, 4, 5, 6, 7], startTime: this.nowhours (), // Acceptable string or handler endTime: '24:00'}], rerenderEvents: True, nowIndicator: true, // Whether to display the time indicator now: This.nowdatehander (), // Indicates the time, can move itself over time, can accept a string or a handler nowIndicatorClassNames: 'nowIndicator', // indicator class name resourceAreaWidth: '20%', advanced function configuration Column width expandRows: true, resourceAreaColumns: [{group: true, field: 'building', headerContent: '', width: '60%' }, { filed: 'occupancy', headerContent: '', cellClassNames: 'fullCalendarCell'}], events: [{resourceId: XXX, // corresponding resource title: XXX, start: XXX, // Start time end: [// resource configuration {id: XXX, building: XXX, occupancy: XXX}], eventStartEditable: true, select: (info) => {do some thing}, // drag, eventClick: (info) => {do some thing}, // time click, can pass the function,}}}Copy the code

👇 card point

👉 stuck point 1: The time display cannot be covered, and there is a gap between The Times

As shown in the figure, time cannot cover the entire grid, and there is an obvious gap on the right.

👉 Solution:

At present, due to the limited technology, there is no good solution to browse the document for many times, only to remove the gap, and the effect of covering the entire grid is not achieved:

::v-deep .fc-timeline-event {
    margin-right: 0;
}
Copy the code

I hope there will be better solutions in the future. I wonder if GYM has any better suggestions! 😃

👉 card point 2: the expiration time cannot be booked to display the backscreen, but because fullcalendar does not provide businessHours to move with the current time, the following situation will occur:

👉 Solution:

Through the js native method, through the timer, every once in a while to obtain the style of the time indicator, dynamic assignment to the dom, to achieve the following effect. However, when it comes to native, I feel it is not the best solution, but the component does not provide relevant API, I hope there will be a better solution to optimize later. 😂

👇 Note:

Gyms pay special attention to developing time-dependent requirements by having the back end return time stamps rather than UTC format whenever possible!! Because after you do it, you will find that the time is 8 hours different from the present time, and the constant change will be very uncomfortable!! 🤷 came ️

If there are many time formats, it is recommended to introduce some JS date libraries. Here are some popular ones for gym:

My Moment:momentjs.com/
Dayjs:day.js.org/
The date – FNS:date-fns.org/

✨ finally

This article only records one of my practical operation experience, hoping to be helpful to the gym, we all encourage ~😁