A simple vue calendar component with minimal css. A base for further development/styling.
npm i -S @romanran/vue-simple-calendar
<script>
import VSimpleCalendar from '@romanran/vue-simple-calendar'
import '@romanran/vue-simple-calendar/dist/vue-simple-calendar.css'
export default {
components: { VSimpleCalendar }
},
</script>
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 |
name | props | description |
---|---|---|
day | day: Object | whole day with events and classes |
day-inside | day: Object | Inside of a . vcs-table__day block with date text |
weekday | day: Object | week days bar at the top element |
arrow-right and arrow-left | - | slots for arrow icons |
Selection bar at the top is clickable in single, month or year 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.
The component has bare minimum styling. Everything is in BE and scoped with .vcs
prefix, modificators are separate: .vcs-selected, .vcs-clickable
Author: romanran
Demo: https://ecstatic-elion-f195d3.netlify.app/
Source Code: https://github.com/romanran/vue-simple-calendar
#vue #vuejs #javascript