https://github.com/fullcalendar/fullcalendar-vue2

The official Vue 2 component for FullCalendar
https://github.com/fullcalendar/fullcalendar-vue2

calendar event full-sized fullcalendar vue vue2

Last synced: 3 days ago
JSON representation

The official Vue 2 component for FullCalendar

• Host: GitHub
• URL: https://github.com/fullcalendar/fullcalendar-vue2
• Owner: fullcalendar
• License: mit
• Created: 2022-12-14T05:46:16.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-12T21:47:36.000Z (3 months ago)
• Last Synced: 2024-09-21T10:06:15.498Z (6 days ago)
• Topics: calendar, event, full-sized, fullcalendar, vue, vue2
• Language: JavaScript
• Homepage: https://fullcalendar.io/docs/vue
• Size: 974 KB
• Stars: 15
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        

# FullCalendar Vue 2 Component

The official [Vue 2](https://v2.vuejs.org/) component for [FullCalendar](https://fullcalendar.io)

> For [Vue 3](https://vuejs.org/), use the [@fullcalendar/vue3](https://github.com/fullcalendar/fullcalendar-vue) package

## Installation

Install the Vue 2 connector, the core package, and any plugins (like [daygrid](https://fullcalendar.io/docs/month-view)):

```sh

npm install @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid

```

## Usage

Render a `FullCalendar` component, supplying an [options](https://fullcalendar.io/docs#toc) object:

```vue

import FullCalendar from '@fullcalendar/vue'

import dayGridPlugin from '@fullcalendar/daygrid'

export default {

  components: {

    FullCalendar // make the <FullCalendar> tag available

  },

  data: function() {

    return {

      calendarOptions: {

        plugins: [dayGridPlugin],

        initialView: 'dayGridMonth',

        weekends: false,

        events: [

          { title: 'Meeting', start: new Date() }

        ]

      }

    }

  }

}

  


    
Demo App

    

  


```

You can even supply [named-slot](https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots) templates:

```vue

  


    
Demo App

    

      

        {{ arg.timeText }}

        {{ arg.event.title }}

      

    

  


```

## Links

- [Documentation](https://fullcalendar.io/docs/vue)

- [Example Project](https://github.com/fullcalendar/fullcalendar-examples/tree/main/vue2)

- [Issue Tracker](https://github.com/fullcalendar/fullcalendar/issues?q=issue+label%3A%22Vue+Only%22+is%3Aopen)

## Development

You must install this repo with [PNPM](https://pnpm.io/):

```

pnpm install

```

Available scripts (via `pnpm run `):

- `build` - build production-ready dist files

- `dev` - build & watch development dist files

- `test` - test headlessly

- `test:dev` - test interactively

- `clean`