Vue.js的拖放调度图表程序– scheduler-lite

Vue.js的拖放调度图表程序– scheduler-lite
插件名称 vue-scheduler-lite
发布时间 2020年5月22日
插件作者 linmasahiro

适用于Vue.js应用程序的动态,可调整大小,可拖动和启用触摸的调度程序组件。

序号插件名称序号插件名称
1Vue Wrapper For Charts.CSS 图表框架 - vue.charts.css12Vue.js创建漂亮的图表– Vue Chartkick
2Vue 3的基于SVG的图表库 - vue3-charts13交互式图表和抓图组件– vue-declarative-plots
3使用ApexCharts构建交互式可视化SVG图表 - vue3-apexcharts14Vue.js的拖放调度图表程序– scheduler-lite
4Vue 3渲染Highcharts.js图表组件​ - vue3-highcharts15Vue.js的简单反应式图表–vue-chartless
5适用于Vue.js的简单SVG图表库 - vue-simple-chart16Vue的可定制和可组合图表– vue-wcharts
6适用于Google图表的Reactive Vue.js包装器-GChart17简单的纯Vue.js图表​​组件 -pure-vue-chart
7Vue.js的现代图表库– Laue18Chart.Js创建简单和漂亮的图表 - vue-chartjs
8Vue.js 图表 Chart.js组件19使用Vue.js和Chart.js构建HTML5画布图表 - vue-chart
9Vue.js的带有SVG和Smith图表组件20Vue FusionCharts轻量级组件 - vue-fusioncharts
10Vue.js的图表库组件 - V-Charts21Vue.js中的动画条形图种族生成器
11Vue.js基于D3.js可自定义的图表​​插件22Vue和D3.js的朝阳组件 - vue-d3-sunburst

安装和下载:

# NPM
$ npm install vue-scheduler-lite --save

变更日志:

v1.0.5(10/11/2020)

  • 修复了NPM导入。

使用:

1.导入组件。

import schedulerLite from "./components/schedulerLite";

2.在应用程序上创建一个调度程序。

<sc
  :schedule-data="scData"
  :setting="setting"
  @row-click-event="rowClickEvent"
  @date-click-event="dateClickEvent"
  @click-event="clickEvent"
  @add-event="addEvent"
  @move-event="moveEvent"
  @edit-event="editEvent"
  @delete-event="deleteEvent"
></sc>
export default {
  name: "App",
  components: {
    sc: schedulerLite
  },
  data: function() {
    return {
      scData: sampleData,
      setting: sampleSetting
    };
  },
  methods: {
    dateClickEvent(date) {
      console.log("------");
      console.log("DateClickEvent:");
      console.log("Date:" + date);
    },
    rowClickEvent(rowIndex, text) {
      console.log("------");
      console.log("RowClickEvent:");
      console.log("RowIndex:" + rowIndex);
      console.log("RowTitle:" + text);
    },
    clickEvent(startDate, endDate, text, other) {
      console.log("------");
      console.log("ClickEvent:");
      console.log("StartDate:" + startDate);
      console.log("EndDate:" + endDate);
      console.log("ContentText:" + text);
      if (other) {
        console.log("OtherData:");
        console.log(other);
      }
    },
    addEvent(rowIndex, startDate, endDate) {
      console.log("------");
      console.log("AddEvent:");
      console.log("RowIndex:" + rowIndex);
      console.log("StartDate:" + startDate);
      console.log("EndDate:" + endDate);
    },
    moveEvent(status, newStartDate, newEndDate) {
      console.log("------");
      console.log("MoveEvent:");
      if (status == 1) {
        console.log("NewStartDate:" + newStartDate);
        console.log("NewEndDate:" + newEndDate);
      } else {
        console.log("Not businessDay, can't move.");
      }
    },
    editEvent(newStartDate, newEndDate) {
      console.log("------");
      console.log("EditEvent:");
      console.log("NewStartDate:" + newStartDate);
      console.log("NewEndDate:" + newEndDate);
    },
    deleteEvent(row, index) {
      console.log("------");
      console.log("DeleteEvent:");
      console.log("Row:" + row);
      console.log("Index:" + index);
    },
    addNewRow() {
      let newTitle = "Room" + (this.scData.length + 1);
      this.scData.push({
        title: newTitle,
        noBusinessDate: [],
        businessHours: [
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          },
          {
            start: "00:00",
            end: "24:00"
          }
        ],
        schedule: []
      });
    }
  }
};

3.定义您自己的数据(计划任务)。

const sampleData = [
  {
    title: "Room1",
    noBusinessDate: ["2020/04/20"],
    businessHours: [
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      }
    ],
    schedule: [
      {
        text: "Mr.A reserved",
        start: "2020/04/21 06:00",
        end: "2020/04/22 01:00",
        data: {
          something: "something"
        }
      },
      {
        text: "Mr.B reserved",
        start: "2020/04/22 06:00",
        end: "2020/04/22 12:00",
        data: {
          something: "something"
        }
      }
    ]
  },
  {
    title: "Room2",
    noBusinessDate: [],
    businessHours: [
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      },
      {
        start: "10:00",
        end: "17:00"
      }
    ],
    schedule: [
      {
        text: "Mr.C reserved",
        start: "2020/04/20 12:00",
        end: "2020/04/20 17:00",
        data: {
          something: "something"
        }
      }
    ]
  },
  {
    title: "Room3",
    noBusinessDate: [],
    businessHours: [
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      },
      {
        start: "00:00",
        end: "24:00"
      }
    ],
    schedule: [
      {
        text: "Mr.D reserved",
        start: "2020/04/20 12:00",
        end: "2020/04/20 18:00",
        data: {
          something: "something"
        }
      }
    ]
  }
];
const sampleSetting = {
  startDate: "2020/04/20",
  endDate: "2020/04/26",
  weekdayText: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  unit: 60, // Minutes
  borderW: 1, // Px
  dateDivH: 25, // Px
  timeDivH: 25, // Px
  unitDivW: 25, // Px
  titleDivW: 20, // Percent
  rowH: 135 // Px
};