@romanran/vue-simple-calendar v1.4.2

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

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

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 ;)