适用于Vue.js应用程序的动态,可调整大小,可拖动和启用触摸的调度程序组件。
# NPM
$ npm install vue-scheduler-lite --save
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
};