A small yet multifunctional calendar & date picker for Vue.js app.

Date _Time

Documentation

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> 

You May Also Like