Dynamic Weekly Scheduler With jQuery - Schedule.js

Dynamic Weekly Scheduler With jQuery - Schedule.js
File Size: 31.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Schedule.js is small jQuery plugin for rendering a dynamic weekly scheduler that allows setting schedules (time periods) for recurring weekly tasks. You're able to select multiple time slots via mouse drag and move when in the 'Edition' mode.

Install it:

# Yarn
yarn add jquery-schedule

# NPM
$ npm install jquery-schedule

How to use it:

1. To get started, you need to load jQuery library and the jQuery Schedule.js plugin's files in the html file.

<link rel="stylesheet" href="dist/jquery.schedule.css">
<script src="jquery.min.js"></script>
<script src="dist/jquery.schedule.js"></script>

2. Load the jQuery UI library for the 'Edition' mode:

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-ui.min.js"></script>

3. Create a container for the Weekly Scheduler.

<div id="schedule-demo"></div>

4. Initialize the plugin and add your custom schedules (time periods) to the Weekly Scheduler:

$("#schedule-demo").jqs({
  mode: "read",
  data: [
    {
      day: 0,
      periods: [
          ["20:00", "00:00"],
          ["00:00", "02:00"]
      ]
    }, {
      day: 3,
      periods: [
          ["00:00", "08:30"],
          ["09:00", "12:00"]
      ]
    }
  ]
});

5. Set the Weekly Scheduler to the 'Edition' mode that allows the users to create custom schedules via mouse drag and move.

$("#schedule-demo").jqs({
  mode: "edit"
});

// or
$("#schedule-demo").jqs();

6. Import the custom schedules into a data array.

<input type="button" value="Export" id="export" />
<textarea id="result"></textarea>
$("#export").click(function () {
  $("#result").val($("#schedule").jqs('export'));
})

7. More default plugin options.

$("#schedule-demo").jqs({

  debug: false, // debug mode
  mode: "edit", // read
  confirm: true,
  dialogYes: "Yes",
  dialogNo: "No"
  hour: 24, // or 12
  data: [],
  days: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday"
  ],
  invalidPeriod: "Invalid period.",
  invalidPosition: "Invalid position.",
  removePeriod: "Remove this period ?",
  dialogYes: "Yes",
  dialogNo: "No"
  
});

8. Import/export schedule data:

// export
var data = $("#schedule").jqs('export');

// import
$("#schedule").jqs('import', [
    {
        day: 2,
        periods:[
            ["10:30","13:00"]
        ]
    }
]);

Change log:

v1.2.0 (2017-08-23)

  • Add a json to import method return

v1.1.0 (2017-07-13)

  • Add debug option. Remove console error/log messages in production mode
  • Add confirm option. Show a confirmation dialog when removing a period
  • Add custom confirmation dialog
  • Add new Theming section to the README
  • Add class jqs-grid-hour and jqs-period-title
  • Rename class jqs-period-placeholder to jqs-period-container

2017-06-27

  • Fixed : Periods overlaps when a period extremity overlaps another

This awesome jQuery plugin is developed by Yehzuna. For more Advanced Usages, please check the demo page or visit the official website.