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
The name of the type The default describe
datas Object {} Display data
start String ‘the 2018-8-12 12:00:00’ Start time (must be in the format YYYY-MM-DD HH: MM :ss)
end String ‘the 2018-12-12 12:00:00’ End time (must be in the format YYYY-MM-DD HH: MM :ss)
granularity String ‘hour’ Optional value [‘year’,’month’, ‘day’] Time granularity
width Number 200 The width of the
height Number 70 highly
halfSplit Boolean false Whether to display the time granularity in half [such as 0-30 minutes or 30-60 minutes for an hour]
methods
The name of the type parameter describe
addHandle Function item Add calendar Events
removeHandle Function item Delete schedule events
slot
The name of the describe
time Custom timeline
content Customize schedule content
x-name Custom name content
detail Custom Details