https://github.com/marikv/vue-mini-calendar
a simple and multifunctional vue datepicker calendar
https://github.com/marikv/vue-mini-calendar
calendar date-picker-range datepicker datepicker-component inline-calendar multiple-datepicker vue vuejs vuejs-components
Last synced: 4 months ago
JSON representation
a simple and multifunctional vue datepicker calendar
- Host: GitHub
- URL: https://github.com/marikv/vue-mini-calendar
- Owner: marikv
- License: mit
- Created: 2018-05-02T11:36:42.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-05T14:14:43.000Z (almost 8 years ago)
- Last Synced: 2025-10-08T17:31:46.261Z (8 months ago)
- Topics: calendar, date-picker-range, datepicker, datepicker-component, inline-calendar, multiple-datepicker, vue, vuejs, vuejs-components
- Language: Vue
- Size: 626 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-mini-calendar
[DEMO http://vue-mini-calendar.vartan.md/](http://vue-mini-calendar.vartan.md/)
whith multiple modes:
* simple
* multiple
* range
and multiple views
- inline
- grid-calendar
- input-datepicker etc.
## License
[MIT](LICENSE)
## Installation and Usage
Install the component using npm:
```
npm i --save vue-mini-calendar
```
In your application, you'll need to:
* import the component
```
import VueMiniCalendar from 'vue-mini-calendar'
```
and just use it
```
```
For more configuration:
```
import vueMiniCalendar from 'vue-mini-calendar';
export default {
components: {
vueMiniCalendar,
},
data() {
return {
date: new Date(),
config: {
mode: 'single', // multiple, single, range, none
rangeSeparator: ' — ',
multipleSeparator: ', ',
format: 'MM/dd/yyyy',
firstDayOfWeek: 1, // 1 = Sunday ... 7 = Monday
weekDays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
show: 'calendar', // input, inline, calendar
}
};
}
};
```