/jquery-schedule

jQuery Schedule

Primary LanguageJavaScriptMIT LicenseMIT

jQuery Schedule

A schedule management with jQuery.

GitHub release Version

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.