@ateliee/jq.schedule
Version:
jQuery time schedule plugin
463 lines (453 loc) • 17.8 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jq.Schedule Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../dist/css/style.min.css" />
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#logs{
border: solid 1px #bbb;
padding: 16px;
background: #eee;
}
#logs .table{
margin-bottom: 0;
}
#logs .table td,
#logs .table th{
border: none;
}
#schedule .sc_bar_insert{
background-color: #ff678a;
}
#schedule .example2{
background-color: #3eb698;
}
#schedule .example3{
color: #2c0000;
font-weight: bold;
background-color: #c7ae50;
}
#schedule .sc_bar.sc_bar_photo .head,
#schedule .sc_bar.sc_bar_photo .text{
padding-left: 60px;
}
#schedule .sc_bar.sc_bar_photo .photo{
position: absolute;
left: 10px;
top: 10px;
width: 38px;
}
#schedule .sc_bar.sc_bar_photo .photo img{
max-width: 100%;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">jQ.Scuedule.js</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#info">Get Start</a></li>
<li><a href="#option">Option</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron" style="padding-bottom: 16px; padding-top: 24px;">
<h1 id="home" class="h2" style="padding-bottom: 16px">jq.Schedule</h1>
<p>javascript base time schedule plugin.</p>
<p>
Drag and Drop Support/Resize Schedule/Ajax Support(Callback Event Option)
</p>
<div style="padding-bottom: 16px">
<span class="label label-info" id="version-badge">Loading version...</span>
</div>
<div style="padding-bottom: 16px"><button onclick="javascript:location.href='https://github.com/ateliee/jquery.schedule';" class="btn btn-lg btn-primary" type="button">Download jq.Schedule</button></div>
<div>
<iframe src="https://ghbtns.com/github-btn.html?user=ateliee&repo=jquery.schedule&type=star&count=true&size=large" frameborder="0" scrolling="0" width="140px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=ateliee&repo=jquery.schedule&type=watch&count=true&size=large&v=2" frameborder="0" scrolling="0" width="140px" height="30px"></iframe>
</div>
</div>
<h2 id="demo">Demo</h2>
<p>
Example Sample Demo
</p>
<h3>Method</h3>
<div style="padding: 0 0 12px;">
<button id="event_timelineData" class="btn btn-info" style="margin-bottom: 12px;">timelineData()</button>
<button id="event_scheduleData" class="btn btn-info" style="margin-bottom: 12px;">scheduleData()</button>
<button id="event_setDraggable" class="btn btn-info" style="margin-bottom: 12px;">toggleDraggable</button>
<button id="event_setResizable" class="btn btn-info" style="margin-bottom: 12px;">toggleResizable</button>
<button id="event_resetData" class="btn btn-danger" style="margin-bottom: 12px;">resetData()</button>
<button id="event_resetRowData" class="btn btn-danger" style="margin-bottom: 12px;">resetRowData()</button>
</div>
<h3>Ajax</h3>
<div style="padding: 0 0 12px;">
<button class="btn btn-info ajax-data" data-target="1.json" style="margin-bottom: 12px;">ajax1()</button>
<button class="btn btn-info ajax-data" data-target="2.json" style="margin-bottom: 12px;">ajax2()</button>
<button class="btn btn-info ajax-data" data-target="3.json" style="margin-bottom: 12px;">ajax3()</button>
</div>
<div style="padding: 0 0 40px;">
<div id="schedule"></div>
<div class="row">
<div class="col-md-8">
<h3>Log</h3>
</div>
<div class="col-md-4 text-right">
<a class="btn btn-default" style="margin-top: 16px;" id="clear-logs">clear</a>
</div>
</div>
<div style="padding: 12px 0 0;">
<div id="logs" class="table-responsive"></div>
</div>
</div>
<h2 id="info">Get Start</h2>
<ol>
<li><p>Please Download <a href="https://github.com/ateliee/jquery.schedule/archive/master.zip">jQuery.Schedule</a></p></li>
<li>
<p>include <code>jquery.js</code>and<code>jquery.ui.js</code> after jq.schedule</p>
<pre><code><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" /></code></pre>
</li>
<li>
<p>init scripts</p>
<pre><code><script type="text/javascript">
$(function(){
var $sc = jQuery("#schedule").timeSchedule($options);
});
</script></code></pre>
</li>
</ol>
<h2 id="option">Option</h2>
<div class="p">
<table class="table table-striped">
<tr>
<th colspan="2">name</th>
<th width="80">Type</th>
<th>description</th>
</tr>
<tr>
<td colspan="2">className</td>
<td>String</td>
<td>add elemnt class(default jq.schedule)</td>
</tr>
<tr>
<td colspan="2">startTime</td>
<td>String(HH:ii)</td>
<td>schedule start time</td>
</tr>
<tr>
<td colspan="2">endTime</td>
<td>String(HH:ii)</td>
<td>schedule end time</td>
</tr>
<tr>
<td colspan="2">widthTime</td>
<td>Integer</td>
<td>minuite time line cell</td>
</tr>
<tr>
<td colspan="2">timeLineY</td>
<td>Integer</td>
<td>cell height px</td>
</tr>
<tr>
<td colspan="2">verticalScrollbar</td>
<td>Integer</td>
<td>scrollbar (px)</td>
</tr>
<tr>
<td colspan="2">timeLineBorder</td>
<td>Integer</td>
<td>border(top and bottom)</td>
</tr>
<tr>
<td colspan="2">bundleMoveWidth</td>
<td>Integer</td>
<td>width to move all schedules to the right of the clicked time line cell.
</td>
</tr>
<tr>
<td colspan="2">draggable</td>
<td>Boolean</td>
<td>enable draggable</td>
</tr>
<tr>
<td colspan="2">resizable</td>
<td>Boolean</td>
<td>enable resizable</td>
</tr>
<tr>
<td colspan="2">resizableLeft</td>
<td>Boolean</td>
<td>enable left handle resizable(default false)</td>
</tr>
<tr>
<td rowspan="3">rows</td>
<td></td>
<td>Array</td>
<td>Schedule Data</td>
</tr>
<tr>
<td>title</td>
<td>String</td>
<td>Schedule Left Cell Text</td>
</tr>
<tr>
<td>subtitle</td>
<td>String(Option)</td>
<td>Schedule Left Cell Sub Text</td>
</tr>
<tr>
<td>schedule</td>
<td>Array</td>
<td>Schedule Cell Data</td>
</tr>
<tr>
<td colspan="2">onInitRow</td>
<td>function</td>
<td>callback init time</td>
</tr>
<tr>
<td colspan="2">onChange</td>
<td>function</td>
<td>callback change time</td>
</tr>
<tr>
<td colspan="2">onClick</td>
<td>function</td>
<td>callback click time</td>
</tr>
<tr>
<td colspan="2">onScheduleClick</td>
<td>function</td>
<td>callback timebar click</td>
</tr>
<tr>
<td colspan="2">onAppendRow</td>
<td>function</td>
<td>callback append time</td>
</tr>
<tr>
<td colspan="2">onAppendSchedule</td>
<td>function</td>
<td>callback append time data</td>
</tr>
</table>
</div>
<h2 id="data">Schedule Data</h2>
<div>
<table class="table table-striped">
<tr>
<th colspan="2">name</th>
<th width="80">Type</th>
<th>description</th>
</tr>
<tr>
<td colspan="2">title</td>
<td>String</td>
<td>Visible Text Schedule Bar</td>
</tr>
<tr>
<td colspan="2">class</td>
<td>String</td>
<td>add class name</td>
</tr>
<tr>
<td rowspan="5">schedule</td>
<td colspan="2">array</td>
<td>add schedule data</td>
</tr>
<tr>
<td>start</td>
<td>String</td>
<td>time String(HH:ii)</td>
</tr>
<tr>
<td>end</td>
<td>String</td>
<td>time String(HH:ii)</td>
</tr>
<tr>
<td>text</td>
<td>String</td>
<td>Show Text</td>
</tr>
<tr>
<td>data</td>
<td>Object,Array</td>
<td>callback data Object</td>
</tr>
</table>
</div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Copyright © 2014 <a href="https://github.com/ateliee" target="_blank">ateliee</a> inc. All Rights Reserved.</p>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript" language="javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="../dist/js/jq.schedule.min.js"></script>
<script type="text/javascript">
function addLog(type, message){
var $log = $('<tr />');
$log.append($('<th />').text(type));
$log.append($('<td />').text(message ? JSON.stringify(message) : ''));
$("#logs table").prepend($log);
}
$(function(){
$("#logs").append('<table class="table">');
var isDraggable = true;
var isResizable = true;
var $sc = $("#schedule").timeSchedule({
startTime: "07:00", // schedule start time(HH:ii)
endTime: "21:00", // schedule end time(HH:ii)
widthTime: 60 * 10, // cell timestamp example 10 minutes
timeLineY: 60, // height(px)
verticalScrollbar: 20, // scrollbar (px)
timeLineBorder: 2, // border(top and bottom)
bundleMoveWidth: 6, // width to move all schedules to the right of the clicked time line cell
draggable: isDraggable,
resizable: isResizable,
resizableLeft: true,
rows : {
'0' : {
title : 'Title Area1',
schedule:[
{
start: '09:00',
end: '12:00',
text: 'Text Area',
data: {
}
},
{
start: '11:00',
end: '14:00',
text: 'Text Area',
data: {
}
}
]
},
'1' : {
title : 'Title Area2',
schedule:[
{
start: '16:00',
end: '17:00',
text: 'Text Area',
data: {
}
}
]
}
},
onChange: function(node, data){
addLog('onChange', data);
},
onInitRow: function(node, data){
addLog('onInitRow', data);
},
onClick: function(node, data){
addLog('onClick', data);
},
onAppendRow: function(node, data){
addLog('onAppendRow', data);
},
onAppendSchedule: function(node, data){
addLog('onAppendSchedule', data);
if(data.data.class){
node.addClass(data.data.class);
}
if(data.data.image){
var $img = $('<div class="photo"><img></div>');
$img.find('img').attr('src', data.data.image);
node.prepend($img);
node.addClass('sc_bar_photo');
}
},
onScheduleClick: function(node, time, timeline){
var start = time;
var end = $(this).timeSchedule('formatTime', $(this).timeSchedule('calcStringTime', time) + 3600);
$(this).timeSchedule('addSchedule', timeline, {
start: start,
end: end,
text:'Insert Schedule',
data:{
class: 'sc_bar_insert'
}
});
addLog('onScheduleClick', time + ' ' + timeline);
},
});
$('#event_timelineData').on('click', function(){
addLog('timelineData', $sc.timeSchedule('timelineData'));
});
$('#event_scheduleData').on('click', function(){
addLog('scheduleData', $sc.timeSchedule('scheduleData'));
});
$('#event_resetData').on('click', function(){
$sc.timeSchedule('resetData');
addLog('resetData');
});
$('#event_resetRowData').on('click', function(){
$sc.timeSchedule('resetRowData');
addLog('resetRowData');
});
$('#event_setDraggable').on('click', function(){
isDraggable = !isDraggable;
$sc.timeSchedule('setDraggable', isDraggable);
addLog('setDraggable', isDraggable ? 'enable' : 'disable');
});
$('#event_setResizable').on('click', function(){
isResizable = !isResizable;
$sc.timeSchedule('setResizable', isResizable);
addLog('setResizable', isResizable ? 'enable' : 'disable');
});
$('.ajax-data').on('click', function(){
$.ajax({url: './data/'+$(this).attr('data-target')})
.done( (data) => {
addLog('Ajax GetData', data);
$sc.timeSchedule('setRows', data);
});
});
$('#clear-logs').on('click', function(){
$('#logs .table').empty();
});
$.getJSON('../package.json', function(data) {
$('#version-badge').text('v' + data.version);
}).fail(function() {
$('#version-badge').text('v4.0.2');
});
});
</script>
</body>
</html>