Fullcalendar - v4.0.2
-Pro Component
Our Fullcalendar is a full-sized drag & drop event calendar.
Keep reading our Fullcalendar examples and learn how to use this plugin.
Usage
Copy
import Modal from '@/components/Modal'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
const today = new Date();
const y = today.getFullYear();
const m = today.getMonth();
const d = today.getDate();
export default {
name: 'calendar',
components: {
Modal,
FullCalendar
}
}
Example
Calendar
Copy
<b-card no-body class="card-calendar">
<!-- Card header -->
<b-card-header >
<!-- Title -->
<h5 class="h3 mb-0">Calendar</h5>
</b-card-header>
<!-- Card body -->
<b-card-body class="p-0 card-calendar-body">
<full-calendar :events="events"
:plugins="calendarPlugins"
:editable="true"
contentHeight="auto"
:theme="false"
:selectable="true"
:selectHelper="true"
ref="fullCalendar"
class="calendar"
:defaultView="defaultView"
@dateClick="onDateClick"
@eventClick="onEventClick"
>
</full-calendar>
</b-card-body>
</b-card>
Documentation
You can check out the component documentations here.