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