A fully customizable versatile calendar with events support
This project is still in development so api and features might change.
Download the project using your favourite package manager:
npm i @codekraft-studio/vue-calendar yarn add @codekraft-studio/vue-calendar
Import it in your project and install it in your application:
// component and stylesVue
It's all ready, you can use the
<VueCalendar /> component.
The calendar is very flexible and allow for sections customization using named slots or full section replacements.
For example if you want to place a image above the calendar header you can do it like this:
If you use the section name as the slot name, it will fully replace the section letting you fully customize the output:
<!-- your custom toolbar -->
Right now you can only customize the calendar header and footer, below the list of the slot names:
The header is where the calendar toolbar is usually located, it exposes two child slots for upper and lower content placement.
The footer is usually used to put arbitrary text, it exposes two child slots for upper and lower content placement.
The calendar is built on top of momentjs so it's very easy to control the dates and the calendar itself exposes few methods to change the date view and move around the calendar:
Change the date to the next unit updating the calendar. By default it will add or remove only one unit, the second parameter is to choose how far to move previous.
Change the date to the next unit updating the calendar. By default it will add or remove only one unit, the second parameter is to choose how far to move next.
This method update the calendar current date, it will trigger a calendar view change if the date is not inside the current sliced view, it accepts what momentjs accepts as a valid date, so a string, object and more.. checkout momentjs documentation to know more about it.
this$refsCalendar // default to nowthis$refsCalendarthis$refsCalendarthis$refsCalendarthis$refsCalendarthis$refsCalendar
The arguments are forwarded to momentjs parse function, checkout all the valid formats.
Clone the project repository and install all the dependencies than start the vuecli development server:
npm install npm run serve
This package is under the MIT License.