Drag and Drop Scheduling Lite Support On Vue.js

Vue Scheduler lite is a dynamic, scalable, drag-and-touch scheduling component for Vue.js applications.

Support

  • Business-day Support
  • Business hours Support
  • Drag and Drop Support
  • Resize Schedule Support
  • Touch Device Support (Require DragDropTouch.js)

Check Here – [Ajax] Drag and Drop Daily Time Schedule Plugin | jQuery.Schedule

How to make use of it:

Install and download:

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

1. Import the component.

import schedulerLite from "./components/schedulerLite";

2. Create a schedule on the application.

<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. Define your data (scheduled tasks).

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
};

SettingData

nameTypedescription
startDateStringschedule start date(YYYY/MM/DD)
endDateStringschedule end date(YYYY/MM/DD)
weekdayTextArrayDate weekday
unitIntegerminute timeline cell
borderWIntegercell border width(px)
dateDivHIntegerDate cell height(px)
timeDivHIntegerTime cell height(px)
unitDivWIntegerSelect cell width(px)
titleDivWIntegertitle cell width(%)
rowHIntegerRow height(px)

Event

nameTypedescription
row-click-eventFunctionTitle div click event
date-click-eventFunctionDate div click event
click-eventFunctionSchedule bar click event
add-eventFunctionNew schedule add an event
move-eventFunctionSchedule move event
edit-eventFunctionSchedule edit event
delete-eventFunctionSchedule delete event

Schedule Data

nameTypedescription
titleStringVisible Text Schedule Bar
noBusinessDateArrayNot business-day list(All day)
businessHoursArrayBusiness-hours(One day)
startStringBusiness start hours(HH:ii)
endStringBusiness end hours(HH:ii)
scheduleArrayadd schedule data
startStringtime String(HH:ii)
endStringtime String(HH:ii)
textStringShow Text
dataObject, Arraycallback data Object

Drag and Drop Scheduler For Vue.js, vue scheduler lite Plugin/Github

Read More – 

Full-Size Drag-and-Drop Draggable Event Calendar Plugin | fullcalendar
Github Style Committing Calendar Component For Angular | NgGitCalendar


See Demo And Download

Official Website(linmasahiro): Click Here

This superior jQuery/javascript plugin is developed by linmasahiro. For extra Advanced Usage, please go to the official website.

Share