In this tutorial I am going to introduce a cool plugin to create schedule management system with jQuery, jQuery Schedule is small jQuery plugin for rendering a dynamic weekly scheduler that allows setting time periods for weekly tasks. You’re able to select multiple time slots via mouse drag and move. It is helpful to create appointment system for clinic or any other business where schedule management system required, It display weekly schedule in simple graphical manner so that user can easily view and create Schedules for meeting appointments etc.

jquery-schedule-plugin



Integrating schedule management system with jQuery

Follow step by step guide to integrate schedule management system on your web based application.

Libraries

Include required libraries on page to add weekly schedule management system in your website. jQuery Schedule plugin dependent on jquery ui library

<!--CSS-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="dist/jquery.schedule.min.css">
    <link rel="stylesheet" href="dist/jquery.schedule-demo.min.css">
 
<!--JS-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="dist/jquery.schedule.min.js"></script>

HTML

Add html markup to create Weekly Scheduler.

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

JS

Just call the plugin and display basic schedule.

$("#schedule").jqs();

You can also display custom time periods on Weekly Scheduler.

$("#schedule").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"]
                    ]
                }
            ]
        });



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

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

Create a weekly Scheduler In Translation & 12-hour clock.

$("#schedule").jqs({
            mode: "read",
            days: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday"
  ],
            hour: 12,
            data: [
                {
                    day: 0,
                    periods: [
                        ["10pm", "12am"],
                        ["12am", "2:30am"]
                    ]
                }
            ]
        });

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.