@romanran/vue-simple-calendar

vue-simple-calendar

A simple vue calendar component with minimal css. A base for further development/styling.

DEMO

Dependencies

date-fns, lodash-es

Installation

npm i -S @romanran/vue-simple-calendar

Usage

<script>
import  VSimpleCalendar  from  '@romanran/vue-simple-calendar'
import '@romanran/vue-simple-calendar/dist/vue-simple-calendar.css'
export  default {
    components: { VSimpleCalendar }
},
</script>

Changelog

• 1.4.0 - Move infinite to a separate prop, remove cells paddings
• 1.3.0 - Add infinite type for mobile devices
• 1.2.0 - Add min and max dates
• 1.1.11 - Fix single type empty value
• 1.1.10 - Add weekday cell classes
• 1.1.7 - Add formatDate function to weekday slot
• 1.1.6 - Handle empty value, fix locale prop
• 1.1.5 - Changed weekday class from .vcs-table__day to .vcs-table__weekday
• 1.1.4 - added BEM to the rest of the components
• 1.1.3 - added modifier classes to .vcs-table__cell
• 1.1.0 - changed to BEM, added .vcs-table__day--end class
• 1.0.16 - fixed calendar reactivity on type change

Props

name	type	description
value	null Date or Array with 1 or 2 Dates	Calendar opens on the selected date or on the current date
type	String	single, range, month or year
minDate	String	before that date the days will be disabled to pick
maxDate	String	after that date the days will be disabled to pick
infinite	Boolean	set to true for endless scroll
throttleTime	Number	if using infinite calendar, scroll function is throttled by this time, default: 20
parentNode	Number	if using infinite calendar, scroll element, default: component parent

Component uses date-fns

name	type	default
weekStartsOn	Number	1-Monday
dayFormat	String	"d"
weekdayFormat	String	"eeeee"
monthFormat	String	"MMM"
locale	Object	import from date-fns

Slots

name	props	description
day	day: Object	whole day with events and classes
day-inside	day: Object, formatDay: Function	Inside of a . vcs-table__day block with date text
weekday	day: Datem formatDay: Function	weekdays
arrow-right and arrow-left	-	slots for arrow icons

Usage

Selection bar at the top is clickable in single, month or year mode type. Infinite calendar creates 13 months with infinite vertical scroll.

Range mode type

To select range first click on a date, second click selects the range. OR hold and move to the second date and release.

Styling

The component has bare minimum styling. Everything is in BEM and scoped with .vcs prefix.

Day classes inside the calendar:

class	description
.vcs-table__day--disabled	day not in the current month
.vcs-table__day--clickable	you can click it to select date ;)
.vcs-table__day--selected	selected
.vcs-table__day--start	start of the selection
.vcs-table__day--end	end of the selection
.vcs-table__day--between	day between the selection
same for .vcs-table__cell, .vcs-month-select__cell, .vcs-month-year__cell

License

Released under the MIT License. Do whatever you want with it ;)