code

Project address: A VUE calendar component

demand

Recent business requirements required a calendar component that could switch between weekly and monthly views and display schedules and event annotations.

After checking the existing calendar components on the Internet, I found that there are quite a lot of fullCalendar plug-in STAR and comprehensive documents, but it is not easy to use and there are some differences with our company’s application scenarios. Therefore, I decided to repackage a calendar component after careful consideration.

Component packaging

The overall idea is as follows:

1. Encapsulate the logic involved in the calculation of date and time inside the component, expose the change method externally, and obtain the time period displayed in the current calendar;

2, in addition to receiving some configuration information, can also receive the event set, used to render to the corresponding time grid, the corresponding click events and date changes have also been exposed, can be packaged according to the need to modify.

<full-calendar :events="fcEvents" @eventClick="fetchEvent" lang="zh" @change="changeDateRange"></full-calendar>
Copy the code

3. In addition, the presentation of event cards is unwrapped and slot exposed for free coding (see Element’s Table Element), considering that different business logic may use the calendar component.

<! -- subcomponent --> <slot name="fc-body-card"></slot> <! -- parent component --> <template slot="fc-body-card"> <! ------> </template>Copy the code

rendering

Demo address: a VUE calendar component — VUe-Calendar