# @angelblanco/v-calendar

> A calendar and date picker plugin for Vue.js.

Latest version **3.1.3** (published 2024-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @angelblanco/v-calendar
pnpm add @angelblanco/v-calendar
yarn add @angelblanco/v-calendar
bun add @angelblanco/v-calendar
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; large bundle.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.3 |
| Published | 2024-10-11 |
| First published | 2024-10-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 9.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Ángel Blanco |
| Maintainers | angelblanco |
| Keywords | vue, vue3, vuejs, plugin, calendar, v-calendar, datepicker, date picker |

## Links

- npm: https://www.npmjs.com/package/@angelblanco/v-calendar
- Repository: https://github.com/angelblanco/v-calendar
- Homepage: https://vcalendar.io
- Issues: https://github.com/angelblanco/v-calendar/issues
- npm.io page: https://npm.io/package/@angelblanco/v-calendar

## Dependencies (6)

- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [date-fns](https://npm.io/package/date-fns.md) ^2.16.1
- [date-fns-tz](https://npm.io/package/date-fns-tz.md) ^2.0.0
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.165
- [vue-screen-utils](https://npm.io/package/vue-screen-utils.md) ^1.0.0-beta.13
- [@types/resize-observer-browser](https://npm.io/package/@types/resize-observer-browser.md) ^0.1.7

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 3.1.3 (latest) — 2024-10-11

## README

# VCalendar Plugin for Vue 3

A calendar and date picker plugin for [Vue.js](https://vuejs.org).

[Vue.js](https://vuejs.org) 3.2+, [Popper.js](https://popper.js.org/docs/v2/) 2.0+ are required.

## Install Plugin

### NPM

```shell
npm install v-calendar@next @popperjs/core
```

### Yarn

```shell
yarn add v-calendar@next @popperjs/core
```

## Use Plugin

:warning: **As of `v3.0.0-alpha.7`, all installation methods require manual import of component styles. This is due to Vite build restrictions in libary mode.**

```js
import 'v-calendar/style.css';
```

### Method 1: Use Globally

```js
import VCalendar from 'v-calendar';
import 'v-calendar/style.css';

// Use plugin with optional defaults
app.use(VCalendar, {})
```

```html
<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>
```

### Method 2: Use Components Globally

```js
// main.js
import { setupCalendar, Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';

// Use plugin defaults (optional)
app.use(setupCalendar, {})

// Use the components
app.component('VCalendar', Calendar)
app.component('VDatePicker', DatePicker)
```

```html
<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>
```

### Method 3: Use Components As Needed

```js
// main.js
import { setupCalendar } from 'v-calendar';

// Use calendar defaults (optional)
app.use(setupCalendar, {})
```

```vue
<!-- MyComponent.vue -->
<template>
  <Calendar />
  <DatePicker v-model="date">
</template>

<script>
import { Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';

export default {
  components: {
    Calendar,
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
}
</script>
```

## Source setup

Please follow below mentioned steps to clone and build this project:

### Clone the repo

```sh
git clone https://github.com/nathanreyes/v-calendar

# Move to directory
cd v-calendar
```

### Install dependencies

```sh
yarn
```

### Build library

```sh
# Types, ES, ESM, CommonJS, IIFE
yarn build
```

### Lint and fix files

```sh
yarn lint
```

### Test library

```sh
# Types, ES, ESM, CommonJS, IIFE
yarn test
```

---
_Source: https://npm.io/package/@angelblanco/v-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._