calendar

A calendar suite for VueJS

Check the ROADMAP.md file for upcoming features.

Check the issues for problems.

Links:

• Demo
• Documentation

Full description:

Calendar components with logic based on moment.js

• Month view
• Week view
• Day view
• Events
• Tasks
• Styled with Sass

Install and use

Work in progress

Running the demo

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

Documentation

For now, you should use the online documentation (work in progress) or browse the 'documentation' folder.

Events format

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 */ },
  // ...
]

Tasks format

Base task format:

var task = {
  id: 10,                 // Some unique key
  type: 'task',           // Required
  title: 'A nice title',
  dueDate: moment(),      // A moment object
  done: true
}

Events format

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
}

Custom formats

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.

Multiple events format

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 */ },
  ],
}

Localization

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

Styling

Principle

Examples with mainstream css frameworks

Custom elements

Custom tasks and events

Custom days

Build documentation

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.