216 lines
5.7 KiB
HTML
216 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<link href='../../dist/fullcalendar.css' rel='stylesheet' />
|
||
|
|
<link href='../../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
|
||
|
|
<script src='../../node_modules/jquery/dist/jquery.js'></script>
|
||
|
|
<script src='../../node_modules/moment/moment.js'></script>
|
||
|
|
<script src='../../dist/fullcalendar.js'></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
|
||
|
|
$('#calendar').fullCalendar({
|
||
|
|
headerToolbar: {
|
||
|
|
left: 'prev,next today',
|
||
|
|
center: 'title',
|
||
|
|
right: 'month,week,dayGridWeek,day,dayGridDay'
|
||
|
|
},
|
||
|
|
editable: true,
|
||
|
|
initialView: 'day',
|
||
|
|
firstHour: 0,
|
||
|
|
year: 2013,
|
||
|
|
month: 6, // July
|
||
|
|
date: 31,
|
||
|
|
events: 'slot_event_overlap.json',
|
||
|
|
_eventsPositioned: function() {
|
||
|
|
testOverlap($('#calendar'), true, false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#calendar-nooverlap').fullCalendar({
|
||
|
|
headerToolbar: {
|
||
|
|
left: 'prev,next today',
|
||
|
|
center: 'title',
|
||
|
|
right: 'month,week,dayGridWeek,day,dayGridDay'
|
||
|
|
},
|
||
|
|
editable: true,
|
||
|
|
initialView: 'day',
|
||
|
|
firstHour: 0,
|
||
|
|
year: 2013,
|
||
|
|
month: 6, // July
|
||
|
|
date: 31,
|
||
|
|
events: 'slot_event_overlap.json',
|
||
|
|
slotEventOverlap: false,
|
||
|
|
_eventsPositioned: function() {
|
||
|
|
testOverlap($('#calendar-nooverlap'), false, false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#calendar-rtl').fullCalendar({
|
||
|
|
headerToolbar: {
|
||
|
|
left: 'prev,next today',
|
||
|
|
center: 'title',
|
||
|
|
right: 'month,week,dayGridWeek,day,dayGridDay'
|
||
|
|
},
|
||
|
|
editable: true,
|
||
|
|
initialView: 'day',
|
||
|
|
firstHour: 0,
|
||
|
|
year: 2013,
|
||
|
|
month: 6, // July
|
||
|
|
date: 31,
|
||
|
|
events: 'slot_event_overlap.json',
|
||
|
|
direction: 'rtl',
|
||
|
|
_eventsPositioned: function() {
|
||
|
|
testOverlap($('#calendar-rtl'), true, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#calendar-rtl-nooverlap').fullCalendar({
|
||
|
|
headerToolbar: {
|
||
|
|
left: 'prev,next today',
|
||
|
|
center: 'title',
|
||
|
|
right: 'month,week,dayGridWeek,day,dayGridDay'
|
||
|
|
},
|
||
|
|
editable: true,
|
||
|
|
initialView: 'day',
|
||
|
|
firstHour: 0,
|
||
|
|
year: 2013,
|
||
|
|
month: 6, // July
|
||
|
|
date: 31,
|
||
|
|
events: 'slot_event_overlap.json',
|
||
|
|
direction: 'rtl',
|
||
|
|
slotEventOverlap: false,
|
||
|
|
_eventsPositioned: function() {
|
||
|
|
testOverlap($('#calendar-rtl-nooverlap'), false, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function testOverlap(el, allowOverlap, isRtl) {
|
||
|
|
if (_testOverlap(el, allowOverlap, isRtl)) {
|
||
|
|
el.prev('h2').find('span').css('color', 'green').text('passed');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
el.prev('h2').find('span').css('color', 'red').text('failed');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function _testOverlap(el, allowOverlap, isRtl) {
|
||
|
|
|
||
|
|
var events = el.find('.fc-event');
|
||
|
|
|
||
|
|
var cell = el.find('.fc-slot0 td');
|
||
|
|
var cellLeft = Math.round(cell.offset().left);
|
||
|
|
var cellWidth = Math.round(cell.outerWidth());
|
||
|
|
|
||
|
|
if (!events.length) { // json events probably couldn't load
|
||
|
|
console.log('need to run this from a real web server');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i=0; i<events.length; i++) {
|
||
|
|
|
||
|
|
var event = $(events[i]);
|
||
|
|
var offset = event.offset();
|
||
|
|
var top = Math.ceil(offset.top);
|
||
|
|
var left = Math.ceil(offset.left);
|
||
|
|
var width = Math.floor(event.outerWidth());
|
||
|
|
var height = Math.floor(event.outerHeight());
|
||
|
|
|
||
|
|
if (left < cellLeft || left + width > cellLeft + cellWidth) {
|
||
|
|
console.log('event is out of bounds', event[0]);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (width < 10 || height < 10) {
|
||
|
|
console.log('event is suprisingly small', event[0]);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (allowOverlap) {
|
||
|
|
width /= 2; // make sure nothing overlaps the first half of the event
|
||
|
|
if (isRtl) {
|
||
|
|
left += width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var j=i+1; j<events.length; j++) {
|
||
|
|
// only test again events that are ahead in the DOM, meaning they have a higher
|
||
|
|
// implicit z-index and an top of the current event
|
||
|
|
|
||
|
|
var otherEvent = $(events[j]);
|
||
|
|
var otherOffset = otherEvent.offset();
|
||
|
|
var otherTop = Math.ceil(otherOffset.top);
|
||
|
|
var otherLeft = Math.ceil(otherOffset.left);
|
||
|
|
var otherWidth = Math.floor(otherEvent.outerWidth());
|
||
|
|
var otherHeight = Math.floor(otherEvent.outerHeight());
|
||
|
|
|
||
|
|
if (
|
||
|
|
top < otherTop + otherHeight &&
|
||
|
|
top + height > otherTop &&
|
||
|
|
left < otherLeft + otherWidth &&
|
||
|
|
left + width > otherLeft
|
||
|
|
) {
|
||
|
|
console.log('failed on', event[0], otherEvent[0]);
|
||
|
|
return false; // a collision
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!allowOverlap) {
|
||
|
|
// we know of certain events that should have the same width
|
||
|
|
// because they share a liquid area...
|
||
|
|
|
||
|
|
var equalwidth1 = events.filter('.equalwidth1');
|
||
|
|
if (equalwidth1.eq(0).outerWidth() - equalwidth1.eq(1).outerWidth() > 1) {
|
||
|
|
console.log('not equal width', equalwidth1.toArray());
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
var equalwidth2 = events.filter('.equalwidth2');
|
||
|
|
if (equalwidth2.eq(0).outerWidth() - equalwidth2.eq(1).outerWidth() > 1) {
|
||
|
|
console.log('not equal width', equalwidth2.toArray());
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO: add tests for viewing events in week-mode also
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-size: 13px;
|
||
|
|
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.calendar {
|
||
|
|
width: 900px;
|
||
|
|
margin: 50px auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h2>Default: <span></span></h2>
|
||
|
|
<div id='calendar' class='calendar'></div>
|
||
|
|
|
||
|
|
<h2>No overlap: <span></span></h2>
|
||
|
|
<div id='calendar-nooverlap' class='calendar'></div>
|
||
|
|
|
||
|
|
<h2>RTL: <span></span></h2>
|
||
|
|
<div id='calendar-rtl' class='calendar'></div>
|
||
|
|
|
||
|
|
<h2>RTL, no overlap: <span></span></h2>
|
||
|
|
<div id='calendar-rtl-nooverlap' class='calendar'></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|