https://github.com/trekels/vue2-calendar

A lightweight calendar component for Vue2
https://github.com/trekels/vue2-calendar

calendar-component js vuejs vuejs2

Last synced: 3 months ago
JSON representation

A lightweight calendar component for Vue2

• Host: GitHub
• URL: https://github.com/trekels/vue2-calendar
• Owner: Trekels
• Created: 2017-09-03T08:55:52.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-09-09T12:00:08.000Z (over 4 years ago)
• Last Synced: 2024-04-25T10:41:20.142Z (9 months ago)
• Topics: calendar-component, js, vuejs, vuejs2
• Language: JavaScript
• Size: 677 KB
• Stars: 55
• Watchers: 5
• Forks: 15
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue2-calendar

[![npm](https://img.shields.io/npm/v/vue2-simple-calendar.svg?maxAge=2592000?style=flat-square)]() [![npm](https://img.shields.io/npm/dt/vue2-simple-calendar.svg?maxAge=2592000?style=flat-square)]()

Check out the demo here on Code Sandbox:

[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/93pjr734r4)

### Introduction

This is a simple and small event calendar component for Vue js. It is very lightweight and does not depend on external libraries apart from Vue2 obviously.

### Table of contents

  * [Installation](#Installation)

  * [Usage](#Usage)

  * [Configuration](./docs/config.md)

  * [Properties](./docs/properties.md)

  * [Events](./docs/events.md#events)

    * [Event payload](./docs/events.md#payload-examples)

    * [EventBus usage](./docs/events.md#eventbus-usage)

  * [Languages](./docs/languages.md)

    * [Add languages](./docs/languages.md#add-languages)

### Installation

Add the package to your project.

```bash

 npm install vue2-simple-calendar

 

 yarn add vue2-simple-calendar

```

`require` or `import` the component in your project index file *(or where you instantiate Vue)* and install as shown below. You can add a configuration object to tweak the calendar to your needs but it is not required.

```javascript

import vueCalendar from 'vue2-simple-calendar';

Vue.use(vueCalendar, {

  // configuration goes here.

});

```

Now all is in place to use the component.

### Usage

The component is used as shown below. Page specific config and data is passed through properties, the app level config such as `locale`, `firstDay`, ... can be configured on initialization through the config object. All events can be bound to the parent but are available through the complete application through an event bus.

```html

  

  export default {

    name: 'your-component',

    methods: {

      showAll(events) {

        // Do something...

      },

      dayClicked(day) {

        // Do something...

      },

      eventClicked(event) {

        // Do something...

      },

      monthChanged(start, end) {

        // Do something...

      }

    },

    created() {

      this.$calendar.eventBus.$on('show-all', events => showAll(events));

      this.$calendar.eventBus.$on('day-clicked', day =>  dayClicked(day));

      this.$calendar.eventBus.$on('event-clicked', event => eventClicked(event));

      this.$calendar.eventBus.$on('month-changed', (start, end) => monthChanged(start, end));

    }

  }

```