jQ.Scuedule.js

jq.Schedule

javascript base time schedule plugin.

Drag and Drop Support/Resize Schedule/Ajax Support(Callback Event Option)

Demo

Example Sample Demo

Method

Ajax

Log

clear

Get Start

  1. Please Download jQuery.Schedule

  2. include jquery.jsandjquery.ui.js after jq.schedule

    <script src="jquery-3.4.1.js" type="text/javascript" language="javascript"></script>
<script src="jquery-ui-2.3.2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="../dist/js/jq.schedule.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/css/style.min.css" />

  3. init scripts

    <script type="text/javascript">
$(function(){
    var $sc = jQuery("#schedule").timeSchedule($options);
});
</script>

Option

name Type description
className String add elemnt class(default jq.schedule)
startTime String(HH:ii) schedule start time
endTime String(HH:ii) schedule end time
widthTime Integer minuite time line cell
timeLineY Integer cell height px
verticalScrollbar Integer scrollbar (px)
timeLineBorder Integer border(top and bottom)
bundleMoveWidth Integer width to move all schedules to the right of the clicked time line cell.
draggable Boolean enable draggable
resizable Boolean enable resizable
resizableLeft Boolean enable left handle resizable(default false)
rows Array Schedule Data
title String Schedule Left Cell Text
subtitle String(Option) Schedule Left Cell Sub Text
schedule Array Schedule Cell Data
onInitRow function callback init time
onChange function callback change time
onClick function callback click time
onScheduleClick function callback timebar click
onAppendRow function callback append time
onAppendSchedule function callback append time data

Schedule Data

name Type description
title String Visible Text Schedule Bar
class String add class name
schedule array add schedule data
start String time String(HH:ii)
end String time String(HH:ii)
text String Show Text
data Object,Array callback data Object