Vue-weekly-schedule NPM

vue-weekly-schedule

A simple component to show a repeating weekly schedule.

Install

npm install --save vue-weekly-schedule

Use as a plugin -

import Vue from 'vue';
import WeeklySchedule from 'vue-weekly-schedule';

Vue.use(WeeklySchedule); // Adds 'weekly-schedule' component

or directly use as a component

import WeeklySchedule from 'vue-weekly-schedule';

export default {
  components: {
    WeeklySchedule,
    ...
  },
  ...
};

Props -

Prop	Description	Type	Default
schedules*	Array of schedules	Array
eventClass	A class you want to attach to each event	String	''
showEmptyDays	Toggle showing days which don't have any events to them	Boolean	false
showAddBtn	Toggle showing add button	Boolean	false
maxEvents	Toggle disabling add button after a max number of events is added	Number	0
showLegend	Show legend for the calendars	Boolean	false

schedules expects the following format -

  const schedules = [{
    name: String,
    class: String,
    events: [
      {
        day: Number,
        startTime: String, // 'HH:mm'
        endTime: String, // 'HH:mm'
        class: String,
      },
    ],
  }];

The class is added to each event of the schedule.

Events -

Event	Description	Payload
addBtnClick	Emitted when the `+` button is clicked	`Number`, day of add button that was clicked
eventClick	Emitted when an event is clicked	`Object`, event object for the clicked event