Компонент полного календаря Vue

http://g.recordit.co/vovteJ5m9o.gif

Так как это называется. Это компонент fullCalendar, основанный на vue.js. Не требуется Jquery или fullCalendar.js. В настоящее время он поддерживает только просмотр месяца. В следующих словах я буду использовать fc для обозначения vue-fullcalendar.

Не стесняйтесь загружать его, переделывать и использовать в своем проекте.

установить

откройте свой проект и запустите эту команду.

npm install vue-fullcalendar

просто скачайте этот проект с git

демо

Вы можете напрямую посетить простую онлайн-демонстрацию

переключите свой каталог на этот проект и запустите эту команду. Затем перейдите на свой http://localhost:8080

npm install (NOTE : if you are in China mainland, cnpm install is more recommended.) 
npm run dev

Если все идет хорошо. Вы должны увидеть это.

В моем проекте я добавляю eventCard и filter. Итак, я нахожу эту крышу. Ты найдешь свою крышу.

Импортировать

В вашем коде сделайте следующее. Тогда вы сможете использовать этот компонент.

import fullcalendar from 'vue-fullcalendar'

VUE-API

Поскольку fc — это компонент на основе vue. Я предварительно определил некоторые свойства.

ВУЭ: реквизит

fc получит реквизит из внешнего мира.

события: События будут отображаться в календаре. 02 ', конец: '2016-07-03', YOUR_DATA : {} } ]

ВУЭ:события

Когда вы что-то делаете, fc отправляет некоторые события.

«changeMonth»: каждый раз, когда вы нажимаете стрелку, чтобы перейти к следующему/последнему месяцу, fc будет отправлять changeMonth.

this.$dispatch('changeMonth', start, end)

начало — первый день текущего месяца.

конец — последний день текущего месяца.

‘eventClick’: каждый раз, когда вы нажимаете на событие, fc отправляет eventClick.

this.$dispatch('eventClick', event, jsEvent, pos)

event – это объект Event, содержащий информацию о событии.

jsEvent содержит собственное событие javascript.

pos — относительные координаты fc

«dayClick»: fc отправляет его, когда вы нажимаете на дневной слот.

this.$dispatch('eventClick', day, jsEvent)

день — это объект даты дня, когда вы щелкнули