vue-renderless-calendar

Zero dependency Vue renderless calendar with scoped-slots API
16,463 14
vue component date datepicker calendar date-picker renderless scoped-slots
Install
npm install vue-renderless-calendar
Latest Version:2.4.1
Vue:2 · 3
License:MIT
Last Updated:Feb 28, 2023
Links: GitHub  ·  npm
Maintainer: winexy

vue-renderless-calendar 📆

default workflow npm version

Zero dependency Vue renderless calendar with scoped-slots API

Install

npm i vue-renderless-calendar
yarn add vue-renderless-calendar

RenderlessCalendar

Main wrapper component which contains state of the calendar and other helpful data

Props

Prop Required Type Default Description
viewMode false String 'single', 'double', 'infinite'
mode false String 'single', 'range'
locale false Object or String navigator.language Locale string (e.g. 'ru'), it will automatically generate locale object using Date.prototype.toLocaleString, otherwise you can provide this object manually
minDate false String '' Minimal valid date (YYYY-MM-DDD)
maxDate false String '' Maximal valid date (YYYY-MM-DDD)
preventOutOfRange false Boolean true Prevent user go out of valid dates range
dateSelectStrategy false Function null If you want custom behaviour for handling date select, you can implement this function
defaultSelectedDates false Array [] Array of date strings with YYYY-MM-DDD format
captureHover false Boolean true captureHover prop is used for computing dates which are between selected date and current hovered date
captureThirdDate false Boolean false captureThirdDate prop is used for capturing dates between in case when 2 dates already selected and you have third element hovered
disabledDates false Array [] Array of YYYY-MM-DDD strings containing dates that can't be selected
markedDates false Array [] Array of YYYY-MM-DDD strings with special meaning, that later will be accessed via isMarked modifier
firstDayOfWeek false number 1 Index of the weekday to start the week from. From 0 to 6. 0 is Sunday, 6 is Saturday

Scoped-slots properties

Property Type Description
weekDayNames Array List of week days with short and full titles from locale object
monthNames Array List of months with short and full titles from locale object
monthsList Array List of months which can be used for rendering months with possibility for changing current month view of calendar using setMonth method
calendar Array Array of months with month, year number and array of dates
selectedDates Array<CalendarDate> Array of current selected dates
currentMonth Number
currentYear Number
canGoToPrevMonth Boolean
canGoToNextMonth Boolean

Scoped-slots Methods

Property Arguments Description
prevPage - Go to previous view iteration
nextPage - Go to next view iteration
resetDates - Set selectedDates to []
setMonth monthListItem Update views current active month
onDateMouseOut - Reset current hovered date
onDateMouseOver CalendarDate Set current hovered date
onDateSelect CalendarDate Append selected date to selectedDates array using "date select strategy"
getModifiers CalendarDate Returns

Events

Event name Payload
onDateChange Array<CalendarDate>

Modifiers

Object containing boolean properties that can be useful for computing styles

Property Type Description
isSelected Boolean
isBetween Boolean
isDisabled Boolean
isMarked Boolean
isFirst Boolean is first selected date
isLast Boolean is last selected date
isOneDayAfter Boolean is one day after selected date
isOneDayBefore Boolean is one date before selected date
isOneDayBeforeFirst Boolean
isOneDayAfterFirst Boolean
isOneDayBeforeLast Boolean
isOneDayAfterLast Boolean

CalendarDate

Class representing information about date

Properties

Property Type Description
year Number
month Number 0-11
day Number 1-31
actualMonthNumber Number Number of month with index correction
formatted String YYYY-MM-DD
isWeekend Boolean
isToday Boolean
isOtherMonthDay Boolean This field can be used to find out that this is the date from previous or next month

Related Packages

v-date-picker
3,823
calendar date date-picker datepicker vue vue3
vuejs-datepicker

A simple Vue.js datepicker component. Supports disabling of dates, inline mode,...

3,505,193 2,584
calendar date-picker datepicker vue
@hokify/vuejs-datepicker

A simple Vue.js datepicker component. Supports disabling of dates, inline mode,...

20,022 17
calendar date-picker datepicker vue
v2-datepicker

A simple datepicker component based Vue 2.x

12,042 87
calendar date date-picker datepicker vue date range datepicker range vuejs2
vuejs-datepicker-thai

A simple Vue.js datepicker component. Supports disabling of dates, inline mode,...

3,057 0
calendar date-picker datepicker vue

Version History

Version Released License
2.4.1 MIT
2.4.0 MIT
2.3.0 MIT
2.2.0 MIT
2.1.0 MIT
Pre-releases (4)
Version Released License
2.2.0-beta.0 MIT
2.1.0-beta.0 MIT
2.0.0-beta.1 MIT
2.0.0-beta.0 MIT