A schedule management with jQuery.
jQuery >= 3.2.*
jQuery ui >= 1.12.*
npm install jquery-schedule
yarn add jquery-schedule
<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="https://github.com/Yehzuna/jquery-schedule/raw/master/dist/jquery.schedule.min.js"></script>
<link rel="stylesheet" href="https://github.com/Yehzuna/jquery-schedule/blob/master/dist/jquery.schedule.min.css">
// 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 () {}
});
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"]
]
}
]
0 to 6 (Monday to Sunday)
Two formats are supported :
hh:mm
)hh:mm am/pm
or h:m a/p
)#000
rgb(0, 0, 0)
rgb(0, 0, 0, 0.5)
[
{
"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"
}
]
}
]
mode
string
edit
read
edit
Define the schedule mode.
hour
integer
24
12
24
Define the time format.
days
integer
7
5
7
Define the number of days.
periodDuration
integer
30
15
30
60
Define the period duration interval.
data
array
[]
Define periods on schedule init. (see data format section for more details)
periodOptions
boolean
true
Enable/Disable the option popup.
periodColors
array
[]
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
string
""
Period default title.
periodBackgroundColor
string
rgba(82, 155, 255, 0.5)
Period default background color.
periodBorderColor
string
#2a3cff
Period default border color.
periodTextColor
string
#000
Period default text color.
periodRemoveButton
string
Remove
Label to the period remove button.
periodDuplicateButton
string
Duplicate
Label to the period duplicate button.
periodTitlePlaceholder
string
Title
Label to the title input placeholder in the option popup.
daysList
array
["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
Define list of days labels.
onInit(jqs)
jqs
Schedule containerA callback fire after the schedule init.
onAddPeriod(period, jqs)
period
The new period addedjqs
Schedule containerA callback fire after a new period is added.
onRemovePeriod(period, jqs)
period
The period to removejqs
Schedule containerA callback fire before a period is removed.
onDuplicatePeriod(period, jqs)
period
The period to duplicatejqs
Schedule containerA callback fire before a period is duplicated.
onPeriodClicked(event, period, jqs)
event
click eventperiod
The period targetjqs
Schedule containerA callback fire on a period click.
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');
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 |