A vue.js calendar using the Quasar framework that implements monthly and agenda views

Quasar Calendar

An event display calendar for the Quasar framework. This is still a work in progress project but we're putting in functionality and squashing bugs on a consistent basis.

Setup

npm install quasar-calendar

Add Calendar to you .vue page similar to a a Quasar component

import { Calendar } from 'quasar-calendar'

or import individual components

import {
  CalendarMonth,
  CalendarAgenda,
  CalendarMultiDay
} from 'quasar-calendar'

In your template, you can just put in a calendar viewer using the current date as the start date

<calendar />

Or you can pass in parameters to customize

<calendar-month
  :start-date="Date('2019-01-01')"
  :events="someEventObject"
  :sunday-first-day-of-week="true"
  calendar-locale="fr"
  calendar-timezone="Europe/Paris"
  :allow-editing="false"
/>

Event data format

The event data format is meant to be a subset of the Google Calendar v3 API (this is still a work in progress). Events should be passed in as an array of objects. Each object can have elements like in this example:

[
  {
    id: 1,
    summary: 'Test event',
    description: 'Some extra info goes here',
    location: 'Office of the Divine Randomness, 1232 Main St., Denver, CO',
    start: {
      dateTime: '2018-02-16T14:00:00', // ISO 8601 formatted
      timeZone: 'America/New_York' // Timezone listed as a separate IANA code
    },
    end: {
      dateTime: '2018-02-16T16:30:00',
      timeZone: 'American/New_York'
    },
    color: 'positive',
    attendees: [
      {
        id: 5,
        email: '[email protected]',
        displayName: 'John Q. Public',
        organizer: false,
        self: false,
        resource: false
      }
    ]
  },
  {
    id: 2,
    summary: 'Test all-day event',
    description: 'Some extra info goes here',
    start: {
      date: '2018-02-16' // A date variable indicates an all-day event
    },
    end: {
      date: '2018-02-19'
    }
  },
    {
      id: 3,
      summary: 'Some other test event',
      description: 'Some extra info goes here',
      start: {
        dateTime: '2018-02-17T10:00:00+0500', // timezone embedded in dateTime
      },
      end: {
        dateTime: '2018-02-17T12:30:00+0500',
      },
    },
]

Each object needs to have a unique ID. The date time should be in ISO 8601 format. A value in the optional timeZone field will override the timezone.

Calendar event referencing

Each calendar is given a random reference string so that we can distinguish between multiple calendars on a page. You can override this and pass in a string so that you can listen for events from that calendar. In this case, if we pass in the string MYCALENDAR, the Vue.js event click-event-MYCALENDAR would fire on the global event bus when a calendar event is clicked on.

Custom event detail handling

By default we use our own event detail popup when an event is clicked. You can override this and use your own by doing a few things:

• Pass in an event reference string
• Prevent the default event detail from showing up
• Listen for a click event to trigger your own detail content

So to implement, be sure to have prevent-event-detail and event-ref set when you embed a calendar component:

<calendar
  event-ref="MYCALENDAR"
  :prevent-event-detail="true"
  :events="someEventObject"
/>

And then somewhere be sure to be listening for a click event on that calendar:

this.$root.$on(
  'click-event-MYCALENDAR',
  function (eventDetailObject) {
    // do something here
  }
)

Event editing

Starting with v0.3 we are setting up the framework to allow for editing individual events. By default this functionality is turned off, but you can pass a value of true into the allow-editing parameter on one of the main calendar components. The functionality if very limited to start but we expect to be adding more features in the near future.

When an event is edited, a global event bus message in the format of update-event-MYCALENDAR is sent with the updated event information as the payload. You can listen for this to trigger a call to whatever API you are using for calendar communication. Right now when an an update is detected the passed in events array is updated and the array is parsed again.

Only a subset of fields are currently editable:

• Start / end time and date
• Is an all-day event
• Summary / title
• Description

Individual Vue components

The usable components of Calendar, CalendarMonth, CalendarMultiDay and CalendarAgenda share the following properties:

In addition, each individual components have the following properties:

Calendar

CalendarMultiDay

CalendarAgenda

Roadmap

Our near-term roadmap is as follows:

GitHub