# @spinyman/vue-functional-calendar > Lightweight, high-performance calendar component based on Vue.js Latest version **2.8.4** (published 2019-12-28) · MIT license · 0 weekly downloads ## Install ```sh npm install @spinyman/vue-functional-calendar pnpm add @spinyman/vue-functional-calendar yarn add @spinyman/vue-functional-calendar bun add @spinyman/vue-functional-calendar ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.8.4 | | Published | 2019-12-28 | | First published | 2019-12-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 123.3 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Andrew Busel | | Maintainers | spinyman | | Keywords | vue, calendar, component, vue-component, functional, date picker, date range, range, multiple calendars, multiple, modal calendar, modal, inline, date, change month, change year, picker, day, month, year, time, add, cli, command, keys, keyword, keywords, line, package, pkg | ## Links - npm: https://www.npmjs.com/package/@spinyman/vue-functional-calendar - Repository: https://github.com/SpinyMan/vue-functional-calendar - Homepage: https://github.com/SpinyMan/vue-functional-calendar#readme - Issues: https://github.com/SpinyMan/vue-functional-calendar/issues - npm.io page: https://npm.io/package/@spinyman/vue-functional-calendar ## Dependencies (3) - [vue](https://npm.io/package/vue.md) ^2.5.21 - [core-js](https://npm.io/package/core-js.md) ^3.6.0 - [date-fns](https://npm.io/package/date-fns.md) ^2.8.1 ## 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 - 2.8.4 (latest) — 2019-12-28 - 2.8.3 — 2019-12-21 - 2.8.2 — 2019-12-20 - 2.8.0 — 2019-12-20 - 2.7.1 — 2019-12-20 ## README # VueJS Functional Calendar (Date Picker, Date Range) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Lightweight,%20high%20performance%20calendar%20component%20based%20on%20Vue.js&url=https://github.com/ManukMinasyan/vue-functional-calendar&via=github&hashtags=vue,calendar,design,developers) [![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) ![gzip size](https://img.shields.io/badge/gzip%20size-5.73%20kB-44cc11.svg) ___ ## Demo Demo: https://y3jnxov469.codesandbox.io/ [![Edit VueJS Functional Calendar Component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/980jov4m4p?fontsize=14&hidenavigation=1) ___ * 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 ___ ## Browser Support ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | --- | --- | --- | --- | --- | --- | 39+ ✔ | 28+ ✔ | 10.1+ ✔ | 27+ ✔ | 15+ ✔ | Latest ✔ | ___ ## Install ``` npm i vue-functional-calendar --save ``` ___ ## Usage ### Vue.use() ```javascript // Introduced in vue file import FunctionalCalendar from 'vue-functional-calendar'; Vue.use(FunctionalCalendar, { dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] }); ```` ### Import Component ```javascript // Introduced in vue file import { FunctionalCalendar } from 'vue-functional-calendar'; ```` ### Component Settings ````javascript export default { components: { FunctionalCalendar }, data() { return { calendarData: {} } } } ```` ### Template Usage ````html ```` ___ ## Usage With Configs ### Component Settings ````javascript export default { components: { FunctionalCalendar }, data() { return { calendarData: {}, calendarConfigs: { sundayStart: false, dateFormat: 'dd/mm/yyyy', isDatePicker: false, isDateRange: false } } }, } ```` ### Template Usage ````html ```` ___ ### A note on markDates The `markedDates` property **must** be in JavaScript Date format, e.g, no leading zeroes on month and days. ✅ Correct: 1/12/2019 ❎ Incorrect: 01/12/2019 ___ ## Available props | Prop | Type | Default | Example | Description | |-------------------------------|-----------------|-------------|-------------|------------------------------------------| | sundayStart | Boolean | false | true | Week start sunday | | newCurrentDate | Date | new Date() | new Date(2019,10,11) | Calendar Current Date | | limits | [Object, Boolean] | false | {min: '31/10/2019', max: '31/12/2019'} | Set calendar show, and marked dates limits. | | placeholder | [String, Boolean] | false | 'yyyy/mm/dd' | Date input placeholder | | dateFormat | String | 'dd/mm/yyyy' | 'yyyy/mm/dd' | Date formatting string | | isDatePicker | Boolean | false | true | Enable or disable date picker | | isMultipleDatePicker | Boolean | false | true | Enable or disable multiple date picker | | isDateRange | Boolean | false | true | Enable or disable date range | | withTimePicker | Boolean | false | true | Enable or disable time picker | | isMultiple | Boolean | false | true | Enable multiple calendar function | | calendarsCount | Number | 1 | 3 | Count of calendars, working only is prop isMultiple | | isSeparately | Boolean | false | true | Enable separately calendars | | isModal | Boolean | false | true | Enable modal calendar function | | isAutoCloseable | Boolean | false | true | Hide picker(calendar) if date has been selected | | isTypeable | Boolean | false | true | Enable manually date typing function, working only with prop isModal | | changeMonthFunction | Boolean | false | true | Enable changed month with list, function | | changeYearFunction | Boolean | false | true | Enable changed year with list, function | | changeYearStep | Number | 12 | 6 | Change year list step count | | applyStylesheet | Boolean | true | false | Disable default styles | | markedDates | Array | [] | ['10/12/2018', '12/12/2018'] OR [{date: '10/1/2019', class: 'marked-class'},{date: '12/1/2019', class: 'marked-class-2'}] | Marked dates array | | markedDateRange | Object | {start: false, end: false} | {start: '12/12/2018', end: '20/12/2018'} | Marked date with range | | disabledDayNames | Array | [] | ['Su','We'] | Disabled Days Of Week | | disabledDates | Array | [] | ['24/12/2020','27/12/2020'] OR ['beforeToday', 'afterToday', '24/12/2020','27/12/2020'] | Disabled Dates | | dayNames | Array | ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] | ['Monday', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Sunday'] | Week Day Names | | monthNames | Array | ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] | ["Jan.", "Feb.", "Mar", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."] | Month names | | shortMonthNames | Array | ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] | ["Jan.", "Feb.", "Mar", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."] | Short month names | | showWeekNumbers | Boolean | false | true | Display week numbers. | | transition | Boolean | true | false | Calendar animations | | hiddenElements | Array | [] | ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'] | Hide calendar elements | | isDark | Boolean | false | true | Dark theme | ___ ### Events | Event | Output | Description | | :------------- | :------------- | :-----------------------------------------------------------: | choseDay |Object | Get clicked day object | changedMonth |Date | Month page has been changed | changedYear |Date | Year page has been changed | selectedDaysCount |Number | Get number of days between date range dates | opened | | The picker is opened | closed | | The picker is closed ##### Add the ref attribute to the calendar component and use these methods to do more. ````javascript For example: ✅ this.$refs.Calendar.PreMonth(); //Call method implementation to go to previous month ✅ this.$refs.Calendar.NextMonth(); //Call method implementation to go to next month ✅ this.$refs.Calendar.PreYear(); //Call method implementation to go to previous year ✅ this.$refs.Calendar.NextYear(); //Call method implementation to go to next year ✅ this.$refs.Calendar.ChooseDate('today'); //Call method implementation to go to today ✅ this.$refs.Calendar.ChooseDate('25/09/2020'); //Call method implementation to go to a date ```` ___ --- _Source: https://npm.io/package/@spinyman/vue-functional-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._