Dynamic Weekly Scheduler jQuery Schedule - Download Dynamic Weekly Scheduler With jQuery - Schedule.js

Download Dynamic Weekly Scheduler With jQuery – Schedule.js

By Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Weekly Scheduler With jQuery – Schedule.js, hope it will help you in programming stack.

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

Demo Download

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:

view source
1 # Yarn
2 yarn add jquery-schedule
3  
4 # NPM
5 $ 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.

view source
1 <link rel="stylesheet" href="dist/jquery.schedule.css">
2 <script src="jquery.min.js"></script>
3 <script src="dist/jquery.schedule.js"></script>

2. Load the jQuery UI library for the ‘Edition’ mode:

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

3. Create a container for the Weekly Scheduler.

view source
1 <div id="schedule-demo"></div>

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

view source
01 $("#schedule-demo").jqs({
02   mode: "read",
03   data: [
04     {
05       day: 0,
06       periods: [
07           ["20:00", "00:00"],
08           ["00:00", "02:00"]
09       ]
10     }, {
11       day: 3,
12       periods: [
13           ["00:00", "08:30"],
14           ["09:00", "12:00"]
15       ]
16     }
17   ]
18 });

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

view source
1 $("#schedule-demo").jqs({
2   mode: "edit"
3 });
4  
5 // or
6 $("#schedule-demo").jqs();

6. Import the custom schedules into a data array.

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

7. More default plugin options.

view source
01 $("#schedule-demo").jqs({
02  
03   mode: "edit", // read
04   hour: 24, // 12
05   periodDuration: 30, // 15/30/60
06   data: [],
07   periodOptions: true,
08   periodColors: [],
09   periodTitle: "",
10   periodBackgroundColor: "rgba(82, 155, 255, 0.5)",
11   periodBorderColor: "#2a3cff",
12   periodTextColor: "#000",
13   periodRemoveButton: "Remove",
14   periodDuplicateButton: 'Duplicate',
15   periodTitlePlaceholder: "Title",
16   days: [
17       "Monday",
18       "Tuesday",
19       "Wednesday",
20       "Thursday",
21       "Friday",
22       "Saturday",
23       "Sunday"
24   ],
25   onInit: function () {},
26   onAddPeriod: function () {},
27   onRemovePeriod: function () {},
28   onClickPeriod: function () {},
29   onDuplicatePeriod: function () {},
30    
31 });

8. Import/export schedule data:

view source
01 // export
02 var data = $("#schedule").jqs('export');
03  
04 // import
05 $("#schedule").jqs('import', [
06     {
07         day: 2,
08         periods:[
09             ["10:30","13:00"]
10         ]
11     }
12 ]);

Change logs:

v2.1.0 (2018-04-26)