Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

calendar

npm js-standard-style npm

A calendar suite for VueJS

Check the ROADMAP.md file for upcoming features.

Check the issues for problems.

Links:

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.

About

Collection of vue2 components to create calendars

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published