bugfixes and final touches for 1.3

This commit is contained in:
Adam Shaw 2009-09-21 10:11:08 +00:00
parent 44526dbe3d
commit bed7a3df9b
19 changed files with 120 additions and 46 deletions

View file

@ -1,5 +1,5 @@
version 1.3 (9/15/09) version 1.3 (9/21/09)
- different 'views': month/basicWeek/basicDay - different 'views': month/basicWeek/basicDay
- more flexible 'header' system for buttons - more flexible 'header' system for buttons
- themable by jQuery UI themes - themable by jQuery UI themes

View file

@ -74,5 +74,5 @@ jQuery object:
Rerenders all events on the screen. Rerenders all events on the screen.
**refetchEvents** - .fullCalendar(``'refetchEvents'``) **refetchEvents** - .fullCalendar(``'refetchEvents'``)
Refetches events from all event sources and rerenders them on the screen. Refetches events from all sources and rerenders them on the screen.

View file

@ -20,7 +20,7 @@
<script type='text/javascript' src='../jquery/ui.core.js'></script> <script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script> <script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script> <script type='text/javascript' src='../jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script> <script type='text/javascript' src='../fullcalendar.min.js'></script>
</dist> </dist>
--> -->
<script type='text/javascript'> <script type='text/javascript'>
@ -78,7 +78,7 @@
body { body {
margin-top: 40px; margin-top: 40px;
text-align: center; text-align: center;
font-size: 14px; font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
} }

View file

@ -15,7 +15,7 @@
<dist> <dist>
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' /> <link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.js'></script> <script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script> <script type='text/javascript' src='../fullcalendar.min.js'></script>
<script type='text/javascript' src='../gcal.js'></script> <script type='text/javascript' src='../gcal.js'></script>
</dist> </dist>
--> -->
@ -29,6 +29,7 @@
events: $.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic'), events: $.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic'),
eventClick: function(event) { eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600'); window.open(event.url, 'gcalevent', 'width=700,height=600');
return false; return false;
}, },
@ -48,7 +49,7 @@
body { body {
margin-top: 40px; margin-top: 40px;
text-align: center; text-align: center;
font-size: 14px; font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
} }

View file

@ -6,14 +6,14 @@
echo json_encode(array( echo json_encode(array(
array( array(
'id' => 1, 'id' => 111,
'title' => "Event1", 'title' => "Event1",
'start' => "$year-$month-10", 'start' => "$year-$month-10",
'url' => "http://yahoo.com/" 'url' => "http://yahoo.com/"
), ),
array( array(
'id' => 2, 'id' => 222,
'title' => "Event2", 'title' => "Event2",
'start' => "$year-$month-20", 'start' => "$year-$month-20",
'end' => "$year-$month-22", 'end' => "$year-$month-22",

View file

@ -20,7 +20,7 @@
<script type='text/javascript' src='../jquery/ui.core.js'></script> <script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script> <script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script> <script type='text/javascript' src='../jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script> <script type='text/javascript' src='../fullcalendar.min.js'></script>
</dist> </dist>
--> -->
<script type='text/javascript'> <script type='text/javascript'>
@ -53,7 +53,7 @@
body { body {
margin-top: 40px; margin-top: 40px;
text-align: center; text-align: center;
font-size: 14px; font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
} }

View file

@ -21,7 +21,7 @@
<script type='text/javascript' src='../jquery/ui.core.js'></script> <script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script> <script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script> <script type='text/javascript' src='../jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script> <script type='text/javascript' src='../fullcalendar.min.js'></script>
</dist> </dist>
--> -->
<script type='text/javascript'> <script type='text/javascript'>
@ -85,7 +85,7 @@
body { body {
margin-top: 40px; margin-top: 40px;
text-align: center; text-align: center;
font-size: 14px; font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
} }

View file

@ -20,7 +20,7 @@
<script type='text/javascript' src='../jquery/ui.core.js'></script> <script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script> <script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script> <script type='text/javascript' src='../jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script> <script type='text/javascript' src='../fullcalendar.min.js'></script>
</dist> </dist>
--> -->
<script type='text/javascript'> <script type='text/javascript'>
@ -83,7 +83,7 @@
body { body {
margin-top: 40px; margin-top: 40px;
text-align: center; text-align: center;
font-size: 14px; font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
text-align: left; text-align: left;
} }

View file

@ -275,7 +275,7 @@ table.fc-header {
display: block; display: block;
position: absolute; position: absolute;
z-index: 99999; z-index: 99999;
border: 0 !important; /* important overrides pre jquery ui 1.7 styles */ border: 0; /* important overrides pre jquery ui 1.7 styles */
background: url(data:image/gif;base64,AAAA) !important; /* hover fix for IE */ background: url(data:image/gif;base64,AAAA) !important; /* hover fix for IE */
} }
@ -315,10 +315,6 @@ table.fc-header {
/* resizable */ /* resizable */
.fc-event-hori .ui-resizable-handle {
_height: 14px !important; /* IE6 had 0 height */
}
.fc-event-hori .ui-resizable-e { .fc-event-hori .ui-resizable-e {
top: 0 !important; /* importants override pre jquery ui 1.7 styles */ top: 0 !important; /* importants override pre jquery ui 1.7 styles */
right: -3px !important; right: -3px !important;
@ -335,4 +331,8 @@ table.fc-header {
cursor: w-resize; cursor: w-resize;
} }
.fc-event-hori .ui-resizable-handle {
_padding-bottom: 14px; /* IE6 had 0 height */
}

View file

@ -256,15 +256,12 @@ function Grid(element, options, methods) {
function updateSize() { function updateSize() {
var width = element.width(),
height = Math.round(width / options.aspectRatio), var height = Math.round(element.width() / options.aspectRatio),
leftTDs = tbody.find('tr td:first-child'), leftTDs = tbody.find('tr td:first-child'),
tbodyHeight = height - thead.height(), tbodyHeight = height - thead.height(),
rowHeight1, rowHeight2; rowHeight1, rowHeight2;
setOuterWidth(
thead.find('th').slice(0, -1),
colWidth = Math.floor(width / colCnt)
);
if (options.weekMode == 'variable') { if (options.weekMode == 'variable') {
rowHeight1 = rowHeight2 = Math.floor(tbodyHeight / (rowCnt==1 ? 2 : 6)); rowHeight1 = rowHeight2 = Math.floor(tbodyHeight / (rowCnt==1 ? 2 : 6));
}else{ }else{
@ -283,6 +280,7 @@ function Grid(element, options, methods) {
trTopBug = trTop != tdTop; trTopBug = trTop != tdTop;
tbodyTopBug = tbody.position().top != trTop; tbodyTopBug = tbody.position().top != trTop;
} }
if (tdHeightBug == undefined) { if (tdHeightBug == undefined) {
// bug in firefox where cell height includes padding // bug in firefox where cell height includes padding
td.height(rowHeight1); td.height(rowHeight1);
@ -296,6 +294,12 @@ function Grid(element, options, methods) {
setOuterHeight(leftTDs.slice(0, -1), rowHeight1); setOuterHeight(leftTDs.slice(0, -1), rowHeight1);
setOuterHeight(leftTDs.slice(-1), rowHeight2); setOuterHeight(leftTDs.slice(-1), rowHeight2);
} }
setOuterWidth(
thead.find('th').slice(0, -1),
colWidth = Math.floor(element.width() / colCnt)
);
} }
@ -370,10 +374,16 @@ function Grid(element, options, methods) {
for (k=0; k<segs.length; k++) { for (k=0; k<segs.length; k++) {
seg = segs[k]; seg = segs[k];
event = seg.event; event = seg.event;
eventClasses = event.className || []; eventClasses = event.className;
if (typeof eventClasses == 'string') { if (typeof eventClasses == 'object') { // an array
eventClasses = eventClasses.slice(0);
}
else if (typeof eventClasses == 'string') {
eventClasses = eventClasses.split(' '); eventClasses = eventClasses.split(' ');
} }
else {
eventClasses = [];
}
eventClasses.push('fc-event', 'fc-event-hori'); eventClasses.push('fc-event', 'fc-event-hori');
startElm = seg.isStart ? startElm = seg.isStart ?
tr.find('td:eq('+((seg.start.getDay()-firstDay+colCnt)%colCnt)+') div.fc-day-content div') : tr.find('td:eq('+((seg.start.getDay()-firstDay+colCnt)%colCnt)+') div.fc-day-content div') :
@ -434,8 +444,10 @@ function Grid(element, options, methods) {
eventElementHandlers(event, eventElement); eventElementHandlers(event, eventElement);
if (event.editable || event.editable == undefined && options.editable) { if (event.editable || event.editable == undefined && options.editable) {
draggableEvent(event, eventElement); draggableEvent(event, eventElement);
if (seg.isEnd) {
resizableEvent(event, eventElement); resizableEvent(event, eventElement);
} }
}
view.reportEventElement(event, eventElement); view.reportEventElement(event, eventElement);
levelHeight = Math.max(levelHeight, eventElement.outerHeight(true)); levelHeight = Math.max(levelHeight, eventElement.outerHeight(true));
} }
@ -475,7 +487,7 @@ function Grid(element, options, methods) {
var matrix; var matrix;
eventElement.draggable({ eventElement.draggable({
zIndex: 3, zIndex: 3,
delay: 100, delay: 50,
opacity: options.dragOpacity, opacity: options.dragOpacity,
revertDuration: options.dragRevertDuration, revertDuration: options.dragRevertDuration,
start: function(ev, ui) { start: function(ev, ui) {
@ -535,7 +547,8 @@ function Grid(element, options, methods) {
if (!options.disableResizing && eventElement.resizable) { if (!options.disableResizing && eventElement.resizable) {
eventElement.resizable({ eventElement.resizable({
handles: rtl ? 'w' : 'e', handles: rtl ? 'w' : 'e',
grid: [colWidth, 0], grid: colWidth,
minWidth: colWidth/2, // need this or else IE throws errors when too small
containment: element, containment: element,
start: function(ev, ui) { start: function(ev, ui) {
eventElement.css('z-index', 3); eventElement.css('z-index', 3);

View file

@ -215,14 +215,21 @@ $.fn.fullCalendar = function(options) {
} }
} }
} }
else if (view.sizeDirty) {
view.updateSize();
view.rerenderEvents();
}
else if (view.eventsDirty) { else if (view.eventsDirty) {
// ensure events are rerendered if another view messed with them // ensure events are rerendered if another view messed with them
view.rerenderEvents(); // pass in 'events' b/c event might have been added/removed
view.clearEvents();
view.renderEvents(events);
} }
if (header) { if (header) {
// update title text // update title text
header.find('h2.fc-header-title').html(view.title); header.find('h2.fc-header-title').html(view.title);
} }
view.sizeDirty = false;
view.eventsDirty = false; view.eventsDirty = false;
view.trigger('viewDisplay', _element); view.trigger('viewDisplay', _element);
} }
@ -236,6 +243,15 @@ $.fn.fullCalendar = function(options) {
}); });
} }
// marks other views' sizes as dirty
function sizesDirtyExcept(exceptView) {
$.each(viewInstances, function() {
if (this != exceptView) {
this.sizeDirty = true;
}
});
}
// called when any event objects have been added/removed/changed, rerenders // called when any event objects have been added/removed/changed, rerenders
function eventsChanged() { function eventsChanged() {
view.clearEvents(); view.clearEvents();
@ -399,6 +415,7 @@ $.fn.fullCalendar = function(options) {
e.end = null; e.end = null;
} }
e.title = event.title; e.title = event.title;
e.url = event.url;
e.allDay = event.allDay; e.allDay = event.allDay;
e.className = event.className; e.className = event.className;
e.editable = event.editable; e.editable = event.editable;
@ -612,6 +629,7 @@ $.fn.fullCalendar = function(options) {
elementWidth = newWidth; elementWidth = newWidth;
view.updateSize(); view.updateSize();
view.rerenderEvents(true); view.rerenderEvents(true);
sizesDirtyExcept(view);
view.trigger('windowResize', _element); view.trigger('windowResize', _element);
} }
} }

View file

@ -15,8 +15,8 @@
$.fullCalendar.gcalFeed( $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic", "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
{ {
//editable: true, editable: true,
className: 'holiday' className: ['holiday']
} }
), ),
/*$.fullCalendar.gcalFeed( /*$.fullCalendar.gcalFeed(

View file

@ -84,7 +84,7 @@ if (_build) {
} }
var _userAgent = navigator.userAgent.toLowerCase(); var _userAgent = navigator.userAgent.toLowerCase();
if (!/mozilla/.test(_userAgent) || /(compatible|webkit)/.test(_userAgent)) { if (!/mozilla/.test(_userAgent) || /(compatible|webkit)/.test(_userAgent) || !window.console || !window.console.log) {
includeJS('firebug-lite/firebug-lite-compressed.js'); includeJS('firebug-lite/firebug-lite-compressed.js');
} }

View file

@ -10,16 +10,45 @@
$(document).ready(function() { $(document).ready(function() {
$('#calendar').fullCalendar({ $('#calendar').fullCalendar({
header: { header: {
center: 'month,basicWeek,basicDay' center: 'month,basicWeek,basicDay'
}, },
editable: true, editable: true,
isRTL: true, isRTL: true,
firstDay: 1,
monthNames: ["januari", "februari", "maart", "april", "mei", "juni","juli", "augustus", "september", "oktober", "november", "december"],
monthNamesShort: ["jan", "feb", "maa", "apr", "mei", "jun", "jul", "aug","sep", "okt", "nov", "dec"],
dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag','donderdag', 'vrijdag', 'zaterdag'],
dayNamesShort: ["zo", "ma", "di", "wo", "do", "vr", "za", "zo"],
timeFormat: 'H(:mm)t',
weekMode: 'variable', weekMode: 'variable',
// TODO: add drag & resize tests // TODO: add drag & resize tests
dayClick: function(dayDate, view) {
console.log('dayClick - ' + dayDate + ' - ' + view.title);
},
eventDrop: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
console.log('DROP ' + event.title);
console.log(dayDelta + ' days');
console.log(event.start);
//console.log(minuteDelta + ' minutes');
},
eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
console.log('RESIZE!! ' + event.title);
console.log(dayDelta + ' days');
console.log(event.end);
//console.log(minuteDelta + ' minutes');
},
events: [ events: [
{ {
id: 1, id: 1,
@ -76,7 +105,7 @@
</script> </script>
</head> </head>
<body style='font-size:14px'> <body style='font-size:12px'>
<div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div> <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
</body> </body>
</html> </html>

View file

@ -19,6 +19,13 @@
center: 'title', center: 'title',
right: 'month,basicWeek,basicDay' right: 'month,basicWeek,basicDay'
}, },
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
},
events: staticEvents = [ events: staticEvents = [
{ {
id: 1, id: 1,
@ -77,17 +84,20 @@
var event = cal.fullCalendar('clientEvents', 3)[0]; var event = cal.fullCalendar('clientEvents', 3)[0];
event.start = new Date(y, m, 25, 10, 30); event.start = new Date(y, m, 25, 10, 30);
event.end = new Date(y, m, 26); event.end = new Date(y, m, 26);
//event.allDay = true;
cal.fullCalendar('updateEvent', event); cal.fullCalendar('updateEvent', event);
} }
function updateRepeatingEvent() { function updateRepeatingEvent() {
var event = cal.fullCalendar('clientEvents', 2)[0]; var event = cal.fullCalendar('clientEvents', 2)[0];
event.start = new Date(y, m, 4, 13, 30); event.start = new Date(y, m, 4, 13, 30);
event.end = new Date(y, m, 5, 1, 0); event.end = new Date(y, m, 5, 2, 0);
event.allDay = false; event.allDay = false;
event.title = "repeat yo"; event.title = "repeat yo";
//event.editable = false;
event.url = "http://google.com/";
cal.fullCalendar('updateEvent', event); cal.fullCalendar('updateEvent', event);
console.log(cal.fullCalendar('clientEvents', 2)); //console.log(cal.fullCalendar('clientEvents', 2));
} }
function renderEvent(stick) { function renderEvent(stick) {
@ -99,7 +109,7 @@
var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"); var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic");
var jsonFeed = "../examples/json_events.php"; var jsonFeed = "../examples/json-events.php";
</script> </script>
<style> <style>
@ -117,8 +127,8 @@
<button onclick="cal.fullCalendar('next')">next</button> <button onclick="cal.fullCalendar('next')">next</button>
<button onclick="cal.fullCalendar('today')">today</button> <button onclick="cal.fullCalendar('today')">today</button>
<button onclick="cal.fullCalendar('gotoDate', 1999, 9, 31)">Oct 31 1999</button> <button onclick="cal.fullCalendar('gotoDate', 1999, 9, 31)">Oct 31 1999</button>
<button onclick="cal.fullCalendar('moveDate', 1, 1, 1)">+1 +1 +1</button> <button onclick="cal.fullCalendar('incrementDate', 1, 1, 1)">+1 +1 +1</button>
<button onclick="cal.fullCalendar('moveDate', -1, -1, -1)">-1 -1 -1</button> <button onclick="cal.fullCalendar('incrementDate', -1, -1, -1)">-1 -1 -1</button>
<button onclick="updateEventStart()">update event start</button> <button onclick="updateEventStart()">update event start</button>
<button onclick="updateRepeatingEvent()">update repeating event</button> <button onclick="updateRepeatingEvent()">update repeating event</button>
@ -145,6 +155,7 @@
<button onclick="cal.fullCalendar('refetchEvents')">refetch</button> <button onclick="cal.fullCalendar('refetchEvents')">refetch</button>
</p> </p>
<div id='loading' style='position:absolute;display:none'>loading...</div>
<div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div> <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
</body> </body>
</html> </html>

View file

@ -13,8 +13,8 @@
/* /*
year: 2010, year: 2010,
month: 2, month: 0,
date: 1, date: 0,
defaultView: 'basicDay', defaultView: 'basicDay',
@ -33,7 +33,7 @@
dragOpacity: .5, dragOpacity: .5,
dragRevertDuration: 100, dragRevertDuration: 100,
//weekMode: 'liquid', //'variable' weekMode: 'variable',
/* /*
titleFormat: { titleFormat: {

View file

@ -39,7 +39,7 @@
allDay: false, allDay: false,
//className: 'yellow-event black-text-event', //className: 'yellow-event black-text-event',
className: ['yellow-event', 'black-text-event'], className: ['yellow-event', 'black-text-event'],
editable: false editable: true
}, },
{ {
id: 4, id: 4,

View file

@ -15,6 +15,8 @@
theme: true, theme: true,
editable: true, editable: true,
//isRTL: true,
header: { header: {
center: 'month,basicWeek,basicDay' center: 'month,basicWeek,basicDay'
}, },

View file

@ -94,11 +94,11 @@
eventResizeStart: function(event, jsEvent, ui, view) { eventResizeStart: function(event, jsEvent, ui, view) {
console.log('RESIZE START ' + event.title); console.log('RESIZE START ' + event.title);
console.log(this); //console.log(this);
}, },
eventResizeStop: function(event, jsEvent, ui, view) { eventResizeStop: function(event, jsEvent, ui, view) {
console.log('RESIZE STOP ' + event.title); console.log('RESIZE STOP ' + event.title);
console.log(this); //console.log(this);
}, },
eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) { eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
console.log('RESIZE!! ' + event.title); console.log('RESIZE!! ' + event.title);