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

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
<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.