my-scutech-schedule

It's a vue schedule component, and has two themes: element-ui and bootstrap

Installation

  npm i my-scutech-schedule --save

Basic Usage

If you are using ElementUI

  // main.js
  import ElementUI from 'element-ui'
  import schedule from 'my-scutech-schedule/dist/elementUI'

  Vue.use(ElementUI)
  Vue.use(schedule)

  // xxx.vue
  import schedule from 'my-scutech-schedule/dist/elementUI'
  <schedule v-model="schedule" :locale="locale"/>

If you are using Bootstrap:

  // import Vue
  // import 'bootstrap/dist/js/bootstrap.min.js'
  // import 'yourpath/jquery.multiple.select.js'
  // import 'yourpath/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js'

  // import 'yourpath/bootstrap.css'
  // import 'yourpath/multiple-select.css'
  // import 'yourpath/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css'

  new Vue({
    el: 'xxx'
  })
  import schedule from 'my-scutech-schedule/dist/bootstrap'
  // use in html or .vue
  <schedule v-model="schedule" :locale="locale"/>

First of all, the component has 'daily', 'once', 'hourly', 'immediate', 'monthly', 'weekly', six options. it has the component has a v-model value, you can define it yourself, for example:

  // import moment from 'moment'

  schedule: {
    type: 'hourly',
    start: moment(),
    end: moment(),
    interval: 3600
  }

Configuration

options: default ['immediate', 'once', 'hourly', 'daily', 'weekly', 'monthly']

immediateSchema: default: {}

onceSchema: define the config, default:

{
  start: {
    minDate: moment(),
    format: 'YYYY-MM-DD HH:mm',
    defaultDate: moment().add(10, 'minute'),
    useCurrent: false
  }
}

hourlySchema: default:

{
  start: {
    format: 'HH:mm',
    defaultDate: moment().startOf('day'),
    useCurrent: false
  },
  end: {
    format: 'HH:mm',
    defaultDate: moment().startOf('day'),
    useCurrent: false
  },
  interval: 3600
}

dailySchema: default:

{
  start: {
    format: 'HH:mm',
    defaultDate: moment().startOf('day'),
    useCurrent: false
  },
  interval: 1
}

weeklySchema: default:

  {
    start: {
      format: 'HH:mm',
      defaultDate: moment().startOf('day'),
      useCurrent: false
    },
    interval: 1,
    days: []
  }

monthlySchema: default:

  {
    start: {
      format: 'HH:mm',
      defaultDate: moment().startOf('day'),
      useCurrent: false
    },
    months: [],
    days: []
    // weeks: []
  }

when weeks is in monthlySchema, you selected month-week option

locale: default: 'en_us', and other options: 'es_es', 'zh_cn', 'zh_tw'.