Vue based schedule – common-schedule

common-schedule

Based on the Vue schedule, set the value of granularity for different time displays, including year/month/day/hour

The installation

npm install common-schedule

Practical scenario

Add a schedule for vehicles

The implementation code

Set the granularity to Day

<commonSchedule
      start="The 2019-08-01 07:00:00"
      end="The 2019-8-31 23:30:00"
      :datas="scheduleData"
      :width="160"
      :height="80"
      granularity="day"
      @addHandle="addHandle"
      @removeHandle="removeHandle"> </commonSchedule> // const scheduleData = {'sichuan A43HU9': {
        xName: 'sichuan A43HU9', 
        sche: [
            {
                start: 'the 2019-08-2 12:30'// Start time end:'the 2019-08-5 soon'// End time eventName:'Chengdu - Shanghai'//},],},'chongqing B89UER': {
        xName: 'chongqing B89UER',
        sche: [
            {
                start: 'the 2019-08-5 the same'// Start time end:'the 2019-08-6 18:30'// End time eventName:'Beijing - Xi 'an'},],}},Copy the code

Customize annual goals

<commonSchedule
      start="The 2019-01-23 07:00:00"
      end="The 2019-12-23 23:30:00"
      :datas="scheduleData"
      :width="160"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"> </commonSchedule> // const scheduleData = {'the team 1': {
        xName: 'the team 1',
        sche: [
            {
                start: 'the 2019-02'// Start time end:'the 2019-04'// End time eventName:'Goal: Achieve XX goal'},],},'the team 2': {
        xName: 'the team 2',
        sche: [
            {
                start: 'the 2019-01'// Start time end:'the 2019-03'// End time eventName:'Goal: Achieve XX goal'},],}}Copy the code

Customize your Daily schedule

Reference code

Set the granularity to hour

If you want to split a half hour, set halfSplit:true

<commonSchedule
      start="The 2019-08-23 07:00:00"
      end="The 2019-08-23 23:30:00"
      :datas="scheduleData"
      :width="160"
      :height="80"
      :halfSplit="true"
      granularity="hour"
      @addHandle="addHandle"
      @removeHandle="removeHandle"> </commonSchedule> // const scheduleData = {'xiao li': {
        xName: 'xiao li',
        sche: [
            {
                start: 'the 2019-8-23 07:00:00'// Start time end:'the 2019-8-23 08:00:00'// End time eventName:'Task: Get up and wash up', //
            },
            {
                start: 'the 2019-8-23 08:00:00'// Start time end:'the 2019-8-23 08:30:00'// End time eventName:Eat breakfast, //
            },
            {
                start: 'the 2019-8-23 08:30:00'// Start time end:'the 2019-8-23 09:00:00'// End time eventName:'On the way', //
            },
            {
                start: 'the 2019-8-23 09:00:00'// Start time end:'the 2019-8-23 18:00:00'// End time eventName:'work', //
            },
            {
                start: 'the 2019-8-23 18:00:00'// Start time end:'the 2019-8-23 19:00:00'// End time eventName:'On the way home', //
            },
            {
                start: 'the 2019-8-23 19:00:00'// Start time end:'the 2019-8-23 20:00:00'// End time eventName:'Have dinner', //},],},}Copy the code

Customize long-term plans

Reference data format

Set the granularity to year

const scheduleData = {
    'the team 1': {
        xName: 'the team 1',
        sche: [
            {
                start: '2016'// Start time end:'2018'// End time selected:false, // Whether to select defaultfalse[After new/modified, set the default value tofalse]
                eventName: 'Goal: Achieve XX goal'//},],},'the team 2': {
        xName: 'the team 2',
        sche: [
            {
                start: '2014'// Start time end:'2016'// End time selected:false,
                eventName: 'Goal: Achieve XX goal'},],}},Copy the code

use

<commonSchedule
      start="The 2016-8-12 12:00:00"
      end="The 2017-9-12 12:00:00"
      :datas="scheduleData"
      :width="180"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >

    </commonSchedule>
Copy the code

Parameters that

attribute

methods

slot