a simple and multifunctional vue datepicker calendar
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.babelrc
.editorconfig
.gitattributes
.gitignore
CHANGELOG.md
LICENSE
README.md
package-lock.json
package.json
webpack.config.js

README.md

vue-mini-calendar

DEMO http://vue-mini-calendar.vartan.md/

whith multiple modes:

  • simple
  • multiple
  • range

and multiple views

  • inline
  • grid-calendar
  • input-datepicker etc.

alt text

License

MIT

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

<vue-mini-calendar></vue-mini-calendar>

For more configuration:

<template>
	<div>
		<vue-mini-calendar v-model="date" :config="config"></vue-mini-calendar>
	</div>
</template>

<script>
	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
				}
			};
		}
	};
</script>