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

The official Vue 3 component for FullCalendar
https://github.com/fullcalendar/fullcalendar-vue

calendar event full-size fullcalendar vue vue3

Last synced: about 1 month ago
JSON representation

The official Vue 3 component for FullCalendar

• Host: GitHub
• URL: https://github.com/fullcalendar/fullcalendar-vue
• Owner: fullcalendar
• License: mit
• Created: 2019-03-28T16:59:31.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-07-12T21:47:37.000Z (2 months ago)
• Last Synced: 2024-07-29T08:04:37.520Z (about 2 months ago)
• Topics: calendar, event, full-size, fullcalendar, vue, vue3
• Language: JavaScript
• Homepage: https://fullcalendar.io/docs/vue
• Size: 1000 KB
• Stars: 1,367
• Watchers: 22
• Forks: 89
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        

# FullCalendar Vue 3 Component

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

## Installation

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

```sh

npm install @fullcalendar/vue3 @fullcalendar/core @fullcalendar/daygrid

```

## Usage

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

```vue

import FullCalendar from '@fullcalendar/vue3'

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://vuejs.org/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/vue3)

## 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`