<p align="center">
    <a href="https://vcalendar.io/" target="_blank">
      <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557324348/v-calendar/hero.png">
    </a>
    <br>
    An elegant calendar and datepicker plugin for Vuejs.
</p>

<p align="center">
    <a href="https://www.npmjs.com/package/v-calendar"><img src="https://img.shields.io/npm/dt/v-calendar.svg" alt="Total Downloads"></a>
    <a href="https://github.com/nathanreyes/v-calendar/releases"><img src="https://img.shields.io/npm/v/v-calendar.svg" alt="Latest Release"></a>
    <a href="https://github.com/nathanreyes/v-calendar/releases"><img src="https://img.shields.io/npm/v/v-calendar/next.svg" alt="Next Release"></a>
    <a href="https://github.com/nathanreyes/v-calendar/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/v-calendar.svg" alt="License"></a>
</p>

------

```bash
npm i --save v-calendar
```

## Documentation

For full documentation, visit [vcalendar.io](https://vcalendar.io/).

### Attributes

| Highlights | Dots |
| :---: | :---: |
| <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557326557/v-calendar/highlights.png"> | <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557326557/v-calendar/dots.png"> |

| Bars | Popovers |
| :---: | :---: |
| <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557326557/v-calendar/bars.png"> | <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557326557/v-calendar/popovers.png"> |

### Multi-Paned Calendars

<img width="400" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557326946/v-calendar/multi-paned.png">

### Theme Colors & Dark-Mode

| | |
| :---: | :---: |
| <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557327273/v-calendar/dark-blue.png"> | <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557327429/v-calendar/dark-red.png"> |
| <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557327429/v-calendar/dark-teal.png"> | <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557327429/v-calendar/dark-purple.png"> |

### Date Pickers

| **Single Date** | **Multiple Date** | **Date Range** |
| :---: | :---: | :---: |
| <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557327864/v-calendar/single-picker.png"> | <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557327864/v-calendar/multi-picker.png"> | <img width="200" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557327864/v-calendar/range-picker.png"> |

### Custom Calendars w/ Scoped Slots

<img width="400" src="https://res.cloudinary.com/dqgcfqzpk/image/upload/v1557328504/v-calendar/custom-calendars.png">
