A calendar suite for VueJS
Check the ROADMAP.md file for upcoming features.
Check the issues for problems.
Calendar components with logic based on moment.js
- Month view
- Week view
- Day view
- Events
- Tasks
- Styled with Sass
Work in progress
Clone this repo and follow the steps below:
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For now, you should use the online documentation (work in progress) or browse the 'documentation' folder.
When a component have an events
props, it means a list of events and tasks.
var events = [
{ /* event 1 */ },
{ /* task 1 */ },
{ /* task 2 */ },
{ /* event 2 */ },
{ /* event 3 */ },
{ /* event 4 */ },
// ...
]
Base task format:
var task = {
id: 10, // Some unique key
type: 'task', // Required
title: 'A nice title',
dueDate: moment(), // A moment object
done: true
}
Base events format:
var event = {
id: 10, // Some unique key
type: 'event', // Required
title: 'A nice title',
startDate: moment(), // A moment object
endDateDate: moment(), // A moment object
fullDay: true // True if the event is all day long
}
If you need to use other properties (i.e. : description), you're welcome to do so, but you'll need to create your own task/event component to be able to display them.
When a component have an data
props, it means a dictionary of list of
events and tasks...
It's used in components that displays calendars for different things
var data = {
'Pinhead': [
{ /* event 1 */ },
{ /* task 1 */ },
{ /* task 2 */ },
{ /* event 2 */ },
{ /* event 3 */ },
{ /* event 4 */ },
],
'Jason Voorhees': [
{ /* event 1 */ },
{ /* task 1 */ },
{ /* task 2 */ },
{ /* event 2 */ },
{ /* event 3 */ },
{ /* event 4 */ },
],
}
You can change the locale globally using moment.locale()
in your main.js
file:
// Other imports
import moment from 'moment'
moment.locale('fr')
// Code and Vue initialization
Component documentation is generated with
Vue-Styleguidist.
Once the dependencies installed, you can start the dev server with
npm run styleguide
and you can build the documentation with
npm run styleguide:build
.