I am currently working on creating a scheduler that has specific requirements:
- Show the working hours for each resource
- Show the interviews, allow changing the interview duration by resizing, and move the interviews using drag-and-drop functionality.
I need assistance with the following:
- After building the schedule, how can I draw each interview to be placed on top of the schedule in the correct position?
- If there are multiple schedules drawn next to each other, is it possible to drag an interview from one schedule to another?
$.fn.scheduler = function(options) {
var context = $(this)
var resources = {
start: null,
end: null,
ownerId: null,
ownerName: null,
duration: 15, // 15 minutes,
interviews: []
}
// build the scheduler
function build() {
if (options !== null && options !== undefined)
$.extend(resources, options)
var start = resources.start
var end = resources.end
var table = $('<table>')
var temp = start
console.log(start)
while (temp < end) {
console.log(temp)
var tr = $('<tr>')
var time = $('<td>')
time.addClass('time')
time.html(temp.getHours() + ':' + temp.getMinutes())
tr.append(time)
var event = $('<td>')
event.addClass('event')
tr.append(event)
tr.appendTo(table)
temp.setMinutes(temp.getMinutes() + resources.duration)
}
context.append(table)
}
build()
}
$(document).ready(function() {
$('.scheduler').scheduler({
start: new Date(2015, 11, 21, 9, 0, 0),
end: new Date(2015, 11, 21, 17, 0, 0),
ownerId: 1196,
interviews: [{
id: 111,
start: new Date(2015, 11, 21, 11, 35, 0),
duration: 45
}]
})
}).scheduler {
height: 200px;
overflow-y: scroll;
}
.scheduler table {
border: 1px solid #ddd;
border-collapse: collapse;
;
}
table {
font-size: 1.0em;
}
table td {
height: 20px;
border-bottom: 1px solid #ddd;
}
table td.time {
border-right: 1px solid #ddd;
}
.time {
width: 70px;
font-weight: bold;
color: #c1c1c1;
}
.event {
width: 160px;
}
.interview {
position: absolute;
width: 160px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='scheduler'>
</div>