<p align="center"><img src="https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/logo.png" width="200" /></p>

<h1 align="center">Vue Functional Calendar</h1>
<p align="center">Modern calendar and datepicker module for Vue.js</p>

[![Build Status](https://travis-ci.org/ManukMinasyan/vue-functional-calendar.svg?branch=master)](https://travis-ci.org/ManukMinasyan/vue-functional-calendar)
[![Version](https://img.shields.io/npm/v/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
[![Downloads](https://img.shields.io/npm/dt/vue-functional-calendar.svg)](https://www.npmjs.com/package/vue-functional-calendar)
[![Open Collective](https://img.shields.io/opencollective/all/vue-functional-calendar.svg?style=fiat)](https://opencollective.com/vue-functional-calendar#category-CONTRIBUTE)

<h2 align="center"> Sponsor</h2>
<p align="center">
<a href="https://marmof.com">
<img src="https://marmof.com/logo.png" width="240"/>
</a>
</p>

___
<a href="https://y3jnxov469.codesandbox.io/" target="_blank">Demo</a>
<br>
<a href="https://github.com/ManukMinasyan/vue-functional-calendar" target="_blank">Read the documentation</a>

<img src="https://raw.githubusercontent.com/ManukMinasyan/vue-functional-calendar/master/public/demo.png"/>

___

* Lightweight, high-performance calendar component based on Vue.js
* Small memory usage, good performance, good style, and high scalability
* Native js development, no third-party library introduced
* Date Picker, Date Range, Multiple Calendars, Modal Calendar

___

## Install

```
npm i vue-functional-calendar --save
```
___

## Usage

```javascript
// Introduced in vue file
import { FunctionalCalendar } from 'vue-functional-calendar';
````

vue-functional-calendar

Vue.js Functional Calendar | Component/Package

Vue.js is an open-source progressive front-end framework witch is approachable, versatile and performant. Written in javascript and it is best for building user interfaces and single-page applications. Created and maintained by Evan You and his team.

Vue.js

# Vue Datepicker Component
![GitHub package.json version](https://img.shields.io/github/package-json/v/edisdev/vue-datepicker-ui)
[![codecov](https://codecov.io/gh/edisdev/vue-datepicker-ui/branch/develop/graph/badge.svg?token=6VJS9RSMW8)](https://codecov.io/gh/edisdev/vue-datepicker-ui)
![npm](https://img.shields.io/npm/dt/vue-datepicker-ui)
![GitHub](https://img.shields.io/github/license/edisdev/vue-datepicker-ui)

  >A Datepicker Component For VueJs
(https://edisdev.github.io/vue-datepicker-ui)

<img src="./resources/datepicker.gif" width="70%">
<hr>
<img src="./resources/rangepicker.png" width="100%"/>
<hr>
<img src="./resources/singlepicker.png" width="50%">

### Using

**Installing**

for Vue 2.x
```bash
   yarn add vue-datepicker-ui

```

for Vue 3.x
```bash
   yarn add vue-datepicker-ui@vue3

```

**Import to Project**

```javascript
// main.js file
import VueDatepickerUi from 'vue-datepicker-ui'
import 'vue-datepicker-ui/lib/vuedatepickerui.css';

Vue.component('Datepicker', VueDatepickerUi)
```
or

```vue
<script>
  import 'vue-datepicker-ui/lib/vuedatepickerui.css';
  import VueDatepickerUi from 'vue-datepicker-ui';

  export default {
    components: {
      Datepicker: VueDatepickerUi
    }
  }
</script>
```
and

```vue
<template>
  <datepicker ...props>
</template>
```
### Props
``` html
   <Datepicker 
    v-model="" 
    :range="" 
    :lang="" 
    :firstDayOfWeek="" 
    :input-class="" 
    :position="" 
    :disabled-start-date="" 
    :disabled-end-date=""
    :text-format="" 
    :date-format=""
    :disabled=""
    :placeholder=""
    :circle=""
    :show-clear-button=""
    :show-picker-inital=""/>
```

Prop | Type | Value |  Default
------------- | ------------- | ------------- | -------------
value/modelValue (v-model) | Object | Date or Array for range | {}
range | Boolean | - | false
lang | String | Supports all languages / iso code language | tr
firstDayOfWeek | String | monday or sunday | monday
inputClass | String | classname for input | -
position | String | options = top, bottom, left, right | left
disabled-start-date | Object | This object consists of the start and end information(from and to params). ( For single status and range status of startDate). | { from: null, to: null}
disabled-end-date | Object | It has the same with disabled-start-end. (For range status of end Date. Ignored in single status.) | { from: null, to: null}
text-format | String | Short And Long / Short and long formats of month and day names | -
date-format | Object | This is the format in which the selected date will be displayed to the user. | { day: '2-digit', month: 'long', year: 'numeric' }
disabled | Boolean | This parameter is the datepicker prevents opening | false
placeholder | String | Input placeholder | Select Date
circle | Boolean | This is selected are circle or area | false
showClearButton | Boolean | This property is If there is a selected date, it allows the button used to delete this date to be displayed or not. | false
showPickerInital | Booelan | Show picker for on mounted | false

and customize style with css variables

<img src="./resources/customize.png">

```css
element {
  --v-calendar-picker-color: #fff;
  --v-calendar-input-bg-color: #fff;
  --v-calendar-input-bg-disable-color:rgb(245, 245, 245);
  --v-calendar-input-text-disable-color:#b8b8b9;
  --v-calendar-select-bg-color: #fff;
  --v-calendar-border-color: #eaeaeb;
  --v-calendar-triangle-color: #eaeaeb;
  --v-calendar-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
  --v-calendar-top-shadow: 3px -14px 30px 0px rgba(0, 0, 0, 0.2);
  --v-calendar-text-color: #7b8187;
  --v-calendar-action-color: #7b8187;
  --v-calendar-text-disabled-color: #b8b8b9;
  --v-calendar-view-button-color: #7b8187;
  --v-calendar-view-button-font-weight: 400;
  --v-calendar-view-button-font-size: 1rem;
  --v-calendar-datepicker-icon-color: #1bba67;
  --v-calendar-datepicker-icon-size: 1.1rem;
  --v-calendar-active-bg-color: #1bba67;
  --v-calendar-active-text-color: #fff;
  --v-calendar-range-bg-color: #edfff9;
  --v-calendar-range-text-color: #7b8187;
  --v-calendar-range-radius: 100%;
  --v-calendar-day-hover-bg-color: #eaeaeb;
  --v-calendar-day-width: 40px;
  --v-calendar-day-height: 40px;
  --v-calendar-day-font-size: 0.9rem;
  --v-calendar-day-font-weight: 400;
  --v-calendar-day-name-font-size: 0.9rem;
  --v-calendar-day-name-font-weight: 500;
  --v-calendar-day-name-color: #7b8187;
  --v-calendar-input-border: 1px solid #eaeaeb;
  --v-calendar-input-text-color: #7b8187;
  --v-calendar-input-font-size: 0.9rem;
  --v-calendar-input-font-weight: 400;
  --v-calendar-content-radius: 0px;
  --v-calendar-year-font-size: 1.1rem;
  --v-calendar-year-color: #7b8187;
  --v-calendar-year-font-weight: 400;
  --v-calendar-year-disabled-color: #b8b8b9;
  --v-calendar-year-disabled-bg-color: transparent;
  --v-calendar-year-padding: 10px;
  --v-calendar-year-border: none;
  --v-calendar-year-border-radius: none;
  --v-calendar-month-font-size: 1.1rem;
  --v-calendar-month-color: #7b8187;
  --v-calendar-month-font-weight: 400;
  --v-calendar-month-disabled-color: #b8b8b9;
  --v-calendar-month-disabled-bg-color: transparent;
  --v-calendar-month-padding: 8px;
  --v-calendar-month-border: none;
  --v-calendar-month-border-radius: none;
}
```


DEMO (https://edisdev.github.io/vue-datepicker-ui)

#### note:
 **date-format** object values is consists to toLocaleString in js. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).


### Development:

Firstly

```bash
  yarn add --peer vue
```

Because, Vue is peer dependency.
Then,

```bash
  yarn install
```

```bash
  yarn docs:dev
```


MIT License

vue-datepicker-ui

# vue2-calendar

> vue 2 calendar, datepicker component which supported lunar or date event

<p align="center">
  <a href="http://blog.w3cub.com/vue2-calendar/?x-page=github">
    Live Demo >>
  </a>
  <br>
  <br>
  <a href="https://github.com/icai/vue2-calendar">
    <img src="https://img.shields.io/github/stars/icai/vue2-calendar.svg?style=social&label=Star" alt="">
  </a>
  <a href="https://github.com/icai/vue2-calendar">
    <img src="https://img.shields.io/github/forks/icai/vue2-calendar.svg?style=social&label=Fork" alt="">
  </a>
  <a href="https://github.com/icai/vue2-calendar">
    <img src="https://img.shields.io/github/watchers/icai/vue2-calendar.svg?style=social&label=Watch" alt="">
  </a>
  <br>
  <br>
  <a href="https://github.com/icai/vue2-calendar/issues">
    <img src="https://img.shields.io/github/issues/icai/vue2-calendar.svg?style=flat-square" alt="">
  </a>
  <a href="https://github.com/icai/vue2-calendar/issues">
    <img src="http://isitmaintained.com/badge/resolution/icai/vue2-calendar.svg?style=flat-square" alt="">
  </a>
  <a href="https://github.com/icai/vue2-calendar/graphs/contributors">
    <img src="https://img.shields.io/github/contributors/icai/vue2-calendar.svg?style=flat-square" alt="">
  </a>
  <br>
  <a href="https://www.npmjs.com/package/vue2-slot-calendar">
    <img src="https://img.shields.io/npm/l/vue2-slot-calendar.svg?style=flat-square" alt="">
  </a>
  <a href="https://www.npmjs.com/package/vue2-slot-calendar">
    <img src="https://img.shields.io/npm/v/vue2-slot-calendar.svg?style=flat-square" alt="">
  </a>
  <a href="https://www.npmjs.com/package/vue2-slot-calendar">
    <img src="https://img.shields.io/npm/dm/vue2-slot-calendar.svg?style=flat-square" alt="">
  </a>
  <a href="https://www.npmjs.com/package/vue2-slot-calendar">
    <img src="https://img.shields.io/npm/dt/vue2-slot-calendar.svg?style=flat-square" alt="">
  </a>
  <br>
  <br>
</p>

- This project is not only a vue component, but also a webpack **multi-page** project in action.

- Boostrap style like

- I18n support

- Community feedback


## Install

```bash
$ npm install vue2-slot-calendar
```

### Import using module

```JavaScript


// js file
import 'vue2-slot-calendar/lib/calendar.min.css';
import calendar from 'vue2-slot-calendar/lib/calendar';

// vue file
// in ES6 modules
import Calendar from 'vue2-slot-calendar';

// in CommonJS
const Calendar = require('vue2-slot-calendar');

// in Global variable
const VueCalendar = Calendar;
```

### Import using script tag

```HTML

<link rel="stylesheet" href="../node_modules/vue2-slot-calendar/lib/calendar.min.css" >
<script src="../node_modules/vue2-slot-calendar/lib/calendar.min.js"></script>
```

Also see the demo file, `example/demo.html`


## I18n support

currently, provide `window.VueCalendarLang` function hook to change your lang


```js
  translations(lang) {
    lang = lang || "en";
    let text = {
      daysOfWeek: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      limit: "Limit reached ({{limit}} items max).",
      loading: "Loading...",
      minLength: "Min. Length",
      months: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      notSelected: "Nothing Selected",
      required: "Required",
      search: "Search"
    };
    return window.VueCalendarLang ? window.VueCalendarLang(lang) : text;
  },
```


## Build Setup

```bash
# install dependencies
npm install

# serve with hot reload at localhost:4000
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run all tests
npm test
```

## Screenshot

![](https://raw.githubusercontent.com/icai/vue2-calendar/master/src/assets/demo.gif?1477232397)

## Usage

```html
<calendar
  :value="value"
  :disabled-days-of-week="disabled"
  :format="format"
  :clear-button="clear"
  :placeholder="placeholder"
  :pane="2"
  :has-input="false"
  :on-day-click="onDayClick2"
  :special-days="_dateMap"
></calendar>
```

### Use slot to render async data

```html
<calendar
  class="event-calendar"
  :value="value"
  :disabled-days-of-week="disabled"
  :format="format"
  :clear-button="clear"
  :placeholder="placeholder"
  :pane="2"
  :has-input="false"
  :on-day-click="onDayClick3"
  :change-pane="changePane"
>
  <div v-for="evt in events" :slot="evt.date">
    ${{evt.content}} <i :class="{low : evt.low}" v-if="evt.low">↓</i>
  </div>
</calendar>
```

### Range Hover Status

```html
<calendar
  :value="value"
  :disabled-days-of-week="disabled"
  :format="format"
  :clear-button="clear"
  :placeholder="placeholder"
  :pane="2"
  :range-bus="getBus"
  :range-status="1"
></calendar>

<calendar
  :value="value"
  :disabled-days-of-week="disabled"
  :format="format"
  :clear-button="clear"
  :placeholder="placeholder"
  :pane="2"
  :range-bus="getBus"
  :range-status="2"
></calendar>
```

### Props

Options/Props

| Name                  | Type       | Default        | Description                                                                                                                 |
| --------------------- | ---------- | -------------- | --------------------------------------------------------------------------------------------------------------------------- |
| value                 | `String`   | ''             | Value of the input DOM                                                                                                      |
| width                 | `String`   | '200px'        | Width of the input DOM                                                                                                      |
| format                | `String`   | `MMMM/dd/yyyy` | The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.                                                              |
| disabled-days-of-week | `Array`    |                | Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. |
| clear-button          | `Bollean`  | false          | If true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional.                 |
| placeholder           | `String`   |                | Placeholder to put on the input field when no date (null or empty) is set                                                   |
| hasInput              | `Boolean`  | true           | Default is has-input style, if don't have input will show pane directly                                                     |
| pane                  | `Number`   | 1              | pane count                                                                                                                  |
| borderWidth           | `Number`   | 2              | This value is for calculating the pane width                                                                                |
| onDayClick            | `Function` |                | Only for `hasInput` set false                                                                                               |
| specialDays           | `Object`   |                | To repalce the day text                                                                                                     |
| changePane            | `Function` |                | For pane change parameter (year, month, pane) month[0,11], demo `/src/modules/Docs.vue`                                     |
| rangeBus              | `Function` |                | should return `new Vue()` as sibling component communication events bus                                                     |
| rangeStatus           | `Number`   | 0              | Default is `disabled` range hover effect, currently only support [0,1,2] `1` will communicate with `2`                      |
| onDrawDate            | `Function` |                | DrawDate Function `allowSelect` to update date cell style                                                                   |
| showDateOnly          | `Boolean`  | false          | show date pane only                                                                                                         |
| transfer              | `Boolean`  | false          | transfer popup to `document.body`                                                                                           |
| elementId             | `String`   |                | elementId for label tag `for` attribute                                                                                     |
| firstDayOfWeek        | `Number`   | 0              | first day of the week, default sunday, [0,6]                                                                                |

### Events

| Name     | Description                      |
| -------- | -------------------------------- |
| drawdate | drawdate Event like `onDrawDate` |

```javascript
  props: {
    value: {
      type: [String, Date]
    },
    format: {
      default: 'MM/dd/yyyy'
    },
    firstDayOfWeek: {
      // sunday
      default: 0
    },
    disabledDaysOfWeek: {
      type: Array,
      default () {
        return []
      }
    },
    width: {
      type: String,
      default: '200px'
    },
    clearButton: {
      type: Boolean,
      default: false
    },
    inputClasses: {
      type: String,
      default: ''
    },
    lang: {
      type: String,
      default: navigator.language
    },
    placeholder: {
      type: String
    },
    hasInput: {
      type: Boolean,
      default: true
    },
    pane: {
      type: Number,
      default: 1
    },
    borderWidth: {
      type: Number,
      default: 2
    },
    onDayClick: {
      type: Function,
      default () {}
    },
    changePane: {
      type: Function,
      default () {}
    },
    specialDays: {
      type: Object,
      default () {
        return {}
      }
    },
    rangeBus: {
      type: Function,
      default () {
        // return new Vue()
      }
    },
    rangeStatus: {
      type: Number,
      default: 0
    },
    onDrawDate: {
      type: Function,
      default () {}
    },
    maxDate: {
      type: String
    },
    minDate: {
      type: String
    },
    showDateOnly: {
      type: Boolean,
      default: false
    },
    transfer: {
      type: Boolean,
      default: false
    },
    elementId: [String]
  }
```

## Credits

Inspired by [vue-strap](https://github.com/yuche/vue-strap) datepicker component.

For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
