Chronocraft-calendar-vue NPM

Chronocraft Calendar for VueJS 3.0 Component

The Chronocraft Calendar is a Vue 3 flexible infinite scrolling calendar component created for Vue3. It includes an events functionality and a smooth infinite scrolling feel with drag and mouse wheel navigation

Features

Infinite Calendar
Events Functionality
Different type of events
Add or Remove events
Typescript support
Smooth scrolling

Usage of Calendar

Using the Library as a Plugin

import { ChronoCraftCalendar } from 'chronocraft-calendar-vue';
    ...
app.use(ChronoCraftCalendar)

Using seperate components of the library inside you project

When you want to import a specific component from the library into a dedicated place inside your code

import { Calendar } from 'chronocraft-calendar-vue';
...
components:{
Calendar
}

Example of Component

<Calendar @on-scroll="OnScroll" @on-delete-event="RemoveEvent" :events="events" :eventtypes="eventtypes" :weekendcolored="true" class="calendar" :cellheight="180" :cellsquared="false" :height="400"></Calendar>

Example using Slots

<Calendar @on-scroll="OnScroll" @on-delete-event="RemoveEvent" :events="events" :eventtypes="eventtypes" :weekendcolored="true" class="calendar" :cellheight="180" :cellsquared="false" :height="400">
    <template v-slot:header="slotProps">
        <span>{{ slotProps.headerlabel }}</span>
    </template>
    <template v-slot:headercell="slotProps">
        <span>{{ slotProps.daylabel }}</span>
    </template>
</Calendar>

Component properties

Name	Type	Description
data	Array	The actual data passed into the scroller. These data are reactive by using ref()
height	Number	Defines the height of the calendar
gap	Number	Defines the gap between the calendar cells / days
wheelscrollspeed	Number	Defines the mouse wheel scroll speed
cellheight	Number	Defines the base of the cellheight on the horizontal scroller
hasscrollbar	Boolean	Defines if the scroller should have a scroll bar
@on-scroll	Event Function	Event fired when the user has scrolled
@on-delete-event	Event Function	Event fired when the user has reached at the end of the scroller and new data might be required to load

Component slots

Name	hasprops	Description
header	yes	Overrides the calendar's header
headercell	yes	Overrides the calendar's header cells which now show the day names
cell	yes	Overrides the calendar's cells which show the days