jQuery Schedule

A schedule management with jQuery.

Requirements

jQuery >= 3.2.*

jQuery ui >= 1.12.*

Demo

Link

Install

npm

npm install jquery-schedule

yarn

yarn add jquery-schedule

scripts

<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>
<link rel="stylesheet" href="dist/jquery.schedule.min.css">

Usage examples

// Base
$('#schedule').jqs();
 
// Full options
$('#schedule').jqs({
  mode: 'edit',
  hour: 24,
  days: 7,
  periodDuration: 30,
  data: [],
  periodOptions: true,
  periodColors: [],
  periodTitle: '',
  periodBackgroundColor: 'rgba(82, 155, 255, 0.5)',
  periodBorderColor: '#2a3cff',
  periodTextColor: '#000',
  periodRemoveButton: 'Remove',
  periodDuplicateButton: 'Duplicate',
  periodTitlePlaceholder: 'Title',
  daysList: [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday'
  ],
  onInit: function () {},
  onAddPeriod: function () {},
  onRemovePeriod: function () {},
  onDuplicatePeriod: function () {},
  onClickPeriod: function () {}
});

Data Format

The plugin use two data formats to render periods.

Full

[
  {
    "day": "Day number",
    "periods": [
      {
        "start": "Period start time",
        "end": "Period end time",
        "title": "Period title",
        "backgroundColor": "Period background color",
        "borderColor":"Period border color",
        "textColor": "Period text color"
      }
    ]
  }
]

Compact

[
  {
    "day": "Day number",
    "periods": [
      ["Period start time", "Period end time"]
    ]
  }
]

Day format

0 to 6 (Monday to Sunday)

Hour format

Two formats are supported :

• 24-hour clock (hh:mm)
• 12-hour clock (hh:mm am/pm or h:m a/p)

Colors support

• Hexadecimal #000
• RGB rgb(0, 0, 0)
• RGBa rgb(0, 0, 0, 0.5)

Examples

[
  {
    "day": 0,
    "periods": [
      ["00:00", "02:00"]
    ]
  },
  {
    "day": 2,
    "periods": [
      {
        "start": "10:00",
        "end": "12:00",
        "title": "A black period",
        "backgroundColor": "rgba(0, 0, 0, 0.5)",
        "borderColor":"#000",
        "textColor": "#fff"
      }
    ]
  }
]

Options

mode

• Type: string
• Default: edit
• Options: read edit

Define the schedule mode.

hour

• Type: integer
• Default: 24
• Options: 12 24

Define the time format.

days

• Type: integer
• Default: 7
• Options: 5 7

Define the number of days.

periodDuration

• Type: integer
• Default : 30
• Options: 15 30 60

Define the period duration interval.

data

• Type: array
• Default : []

Define periods on schedule init. (see data format section for more details)

periodOptions

• Type: boolean
• Default : true

Enable/Disable the option popup.

periodColors

• Type: array
• Default : []

Define list of available colors in the option popup. Must be an array of 3 colors (backgroundColor, borderColor and textColor)

{
  "periodColors": [
    ["backgroundColor", "borderColor", "textColor"],
    ["rgba(82, 155, 255, 0.5)", "#2a3cff", "#000000"],
    ["#000", "#fff", "#fff"]
  ]
}

periodTitle

• Type: string
• Default : ""

Period default title.

periodBackgroundColor

• Type: string
• Default : rgba(82, 155, 255, 0.5)

Period default background color.

periodBorderColor

• Type: string
• Default : #2a3cff

Period default border color.

periodTextColor

• Type: string
• Default : #000

Period default text color.

periodRemoveButton

• Type: string
• Default : Remove

Label to the period remove button.

periodDuplicateButton

• Type: string
• Default : Duplicate

Label to the period duplicate button.

periodTitlePlaceholder

• Type: string
• Default : Title

Label to the title input placeholder in the option popup.

daysList

• Type: array
• Default : ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

Define list of days labels.

Events

onInit(jqs)

• jqs Schedule container

A callback fire after the schedule init.

onAddPeriod(period, jqs)

• period The new period added
• jqs Schedule container

A callback fire after a new period is added.

onRemovePeriod(period, jqs)

• period The period to remove
• jqs Schedule container

A callback fire before a period is removed.

onDuplicatePeriod(period, jqs)

• period The period to duplicate
• jqs Schedule container

A callback fire before a period is duplicated.

onPeriodClicked(event, period, jqs)

• event click event
• period The period target
• jqs Schedule container

A callback fire on a period click.

Methods

export

Export all periods to a JSON.

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

Example :

[
  {"day":0,"periods":[]},
  {"day":1,"periods":[]},
  {"day":2,"periods":[
    {"start":"02:00","end":"04:00","title":"","backgroundColor":"rgba(82, 155, 255, 0.5)","borderColor":"rgb(42, 60, 255)","textColor":"rgb(0, 0, 0)"}
  ]},
  {"day":3,"periods":[]},
  {"day":4,"periods":[]},
  {"day":5,"periods":[]},
  {"day":6,"periods":[]}
]

import

Import periods from a JSON.

$('#schedule').jqs('import', [
  {
    'day': 0,
    'periods': [
      ['00:00', '04:00'],
      ['02:00', '04:00'] // Invalid period
    ]
  },
  {
    'day': 2,
    'periods': [
      {
        'start': '10:00',
        'end': '12:00',
        'title': 'A black period',
        'backgroundColor': 'rgba(0, 0, 0, 0.5)',
        'borderColor':'#000',
        'textColor': '#fff'
      }
    ]
  }
]);

Return a JSON with each period status.

[
  {"day":0,"period":["00:00","04:00"],"status":true},
  {"day":0,"period":["02:00","04:00"],"status":false},
  {"day":2,"period":["10:00","12:00"],"status":true}
]

reset

Reset the schedule. (remove all periods)

$('#schedule').jqs('reset');

Theming

Plugin

CSS Class	Description
.jqs	Plugin main container
.jqs-table	Schedule structure
.jqs-grid	Grid container
.jqs-grid-head	Header grid container
.jqs-grid-line	Line grid container
.jqs-grid-day	Grid day label
.jqs-grid-hour	Grid hour label
.jqs-day	Day container
.jqs-day-remove	Period remove button for the day
.jqs-day-duplicate	Period duplicate button for the day
.jqs-mode-read	Added on init
.jqs-mode-edit	Added on init

Period

CSS Class	Description
.jqs-period	Period container
.jqs-period-container	Period placeholder (contains colors style)
.jqs-period-time	Period time container
.jqs-period-title	Period title container
.jqs-period-remove	Period remove button
.jqs-period-duplicate	Period duplicate button
.jqs-period-15	Added to .jqs-period-container when the period duration is 15mn
.jqs-period-30	Added to .jqs-period-container when the period duration is 30mn
.jqs-period-helper	Period helper
.jqs-period-helper-time	Period helper title

Popup

CSS Class	Description
.jqs-options	Popup option container
.jqs-options-time	Popup title
.jqs-options-title	Title input
.jqs-options-title-container	Title input container
.jqs-options-color	Color items
.jqs-options-color-container	Color items container
.jqs-options-remove	Period remove button
.jqs-options-duplicate	Period duplicate button
.jqs-options-close	Popup close button

Todo

• Add custom data for periods (import/export/options)
• Add option to reduce schedule hours range
• Add option to disable period selection by day or not
• Add an option to define compact or full data export
• Responsive.
• Better options validation and tests.