Nine Project Managers

    vuetify-week-scheduler

    0.4.1 • Public • Published

    Vuetify Week scheduler

    GitHub package.json version ci

    PRs Welcome MIT Licence

    NPM Downloads

    A simple component to manage weekly events

    Inspired by jquery-schedule.

    Installation

    NPM

    npm install vuetify-week-scheduler --save

    Yarn

    yarn add vuetify-week-scheduler

    Demo

    Checkout a demo here.

    Demo source code is here

    Usage

    Import component

    import VueWeekScheduler from 'vuetify-week-scheduler';

    And add to parent component

    export default {
        components: {
            VueWeekScheduler
        },
    // ... data, methods, mounted (), etc.
    }

    Props

    config

    • Type: object
    • Defaults:
    {
         hour: 24, // hour format, 24/12
         days: 7, // number of days, 7/5
         periodDuration: 15, // event duration inteval 15/30/60
         periodTitle: "", // event default title
         periodBackgroundColor: "#F44336FF", // event default color
         periodBorderColor: "transparent", // event default border color
         periodTextColor: "#000", // event default text color
         periodRemoveButton: "Remove", // label of event remove button
         periodDuplicateButton: "Duplicate", // label of event duplicate button
         daysList: [    // list of days labels
           "Monday",
           "Tuesday",
           "Wednesday",
           "Thursday",
           "Friday",
           "Saturday",
           "Sunday",
         ],
         colors: [  // list of event's possible colors
           "#F44336",
           "#FF9800",
           "#FFEB3B",
           "#8BC34A",
           "#4CAF50",
           "#00BCD4",
           "#2196F3",
          ],
          inputType: "text" // usually set as text or number
    }

    value

    • Type: array
    • Required: true

    Array of events, two-way binding with (v-model). The format of events is:

    [
          {
            "day": 0,
            "periods": [
              {
                "start": "00:00",
                "end": "09:00",
                "title": 15,
                "backgroundColor": "#FF0000FF"
              },
              {
                "start": "09:00",
                "end": "20:00",
                "title": 22,
                "backgroundColor": "#008000FF"
              }
            ]
          },
          {
            "day": 1,
            "periods": []
          }
          ...

    editable

    • Type: boolean
    • Default: false

    Whether or not the component permits to add/edit events

    Events

    edit(obj)

    In desktop devices this event is emitted when user right clicks on double clicks on an event, in touch devices this is emitted when user long press on an event.

    obj: {
        day: number, // the day index
        index: number // the period index
    }

    error(err)

    • err error throwed during initialization

    Install

    npm i vuetify-week-scheduler

    DownloadsWeekly Downloads

    46

    Version

    0.4.1

    License

    none

    Unpacked Size

    164 kB

    Total Files

    8

    Last publish

    Collaborators

    • roberts_lando
    • reekoz