Skip to content
Collection of vue2 components to create calendars
Vue JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
documentation
src
static
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.node-version
.postcssrc.js
CHANGELOG.md
LICENSE
README.md
ROADMAP.md
index.html
package-lock.json
package.json
styleguide.config.js

README.md

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.

You can’t perform that action at this time.