Dynamic Weekly Scheduler With jQuery - Schedule.js

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

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({

  mode: "edit", // read
  hour: 24, // 12
  periodDuration: 30, // 15/30/60
  data: [],
  periodOptions: true,
  periodColors: [],
  periodTitle: "",
  periodBackgroundColor: "rgba(82, 155, 255, 0.5)",
  periodBorderColor: "#2a3cff",
  periodTextColor: "#000",
  periodRemoveButton: "Remove",
  periodDuplicateButton: 'Duplicate',
  periodTitlePlaceholder: "Title",
  days: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday"
  ],
  onInit: function () {},
  onAddPeriod: function () {},
  onRemovePeriod: function () {},
  onClickPeriod: function () {},
  onDuplicatePeriod: function () {},
  
});

8. Import/export schedule data:

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

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

Change logs:

v2.1.0 (2018-04-26)

  • Add a duplicate button for periods. This feature allows to copy the selected period to all days if space is available. Periods already placed are not overwritten
  • Add a duplicate button for days. This feature allows to copy all periods in a day to all other days if space is available. Periods already placed are not overwritten
  • Add a remove button for days. Remove all periods in the selected day
  • Add a new callback onDuplicatePeriod
  • Add a new option periodDuplicateButton
  • Source code cleaning
  • Hover effect lighten for buttons in the popup
  • New icon for remove button
  • Add onRemovePeriod event to the reset method
  • Hide the remove button for very small period (15mn)
  • Fixed: Time not displayed properly in the helper when a period is created

v2.0.1 (2018-04-04)

  • Fixed Time error in title of the option popup with IE 11

v1.2.1 (2017-08-23)

  • Fixed : Block position error with Bootstrap 3.x

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.