daily-time-scheduler
v0.0.7
Published
jQuery daily time scheduler plugin
Downloads
31
Readme
Daily-Time-Scheduler
How to use it:
- Include the needed jQuery and jQuery UI on the html page.
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet"href="jquery-ui.css">
- Include the jQuery schedule plugin's stylesheet and JavaScript after jQuery library.
<script src="jq.scheduler.js"></script>
<link rel="stylesheet" href="style.css">
- Render a basic time schedule with custom events.
jQuery("#schedule").timeSchedule({
rows : {
'1' : {
title : 'Title Area',
schedule:[{
start:'09:00',
end:'12:00',
text:'Text Area',
data:{}
},{
start:'11:00',
end:'14:00',
text:'Text Area',
data:{}
}]
},},
});
- Customization options.
// scheduled events
rows: {},
// schedule start time(HH:ii)
startTime: "07:00",
// schedule end time(HH:ii)
endTime: "21:00",
// width(px)
widthTimeX: 25,
// cell timestamp example 30 minutes
widthTime: 60 * 30,
// height(px)
timeLineY: 60,
// options for time slots
timeLineBorder: 1,
timeBorder: 1, // border width
timeLinePaddingTop: 0,
timeLinePaddingBottom: 0,
headTimeBorder: 1, // time border width
// data width
dataWidth: 160,
- Events
init_data: null,
change: null,
click: null,
append: null,
time_click: null,
debug: "" // debug selecter