updated examples

This commit is contained in:
Adam Shaw 2009-09-15 06:19:43 +00:00
parent 81c3cd9ee3
commit e3850a2e3e
8 changed files with 332 additions and 249 deletions

View file

@ -1,4 +1,67 @@
version 1.3 (9/15/09)
- different 'views': month/basicWeek/basicDay
- more flexible 'header' system for buttons
- themable by jQuery UI themes
- resizable events (require jQuery UI resizable plugin)
- reworked options/API to support idea of multiple views / be consistent with jQuery UI datepicker
- refactoring of entire codebase for future of development
- broken into different JS files, assembled w/ build scripts
- new test suite for new features, uses firebug-lite
- Options
- added:
date
defaultView
aspectRatio
disableResizing
monthNames (use instead of $.fullCalendar.monthNames)
monthNamesShort (use instead of $.fullCalendar.monthAbbrevs)
dayNames (use instead of $.fullCalendar.dayNames)
dayNamesShort (use instead of $.fullCalendar.dayAbbrevs)
theme
buttonText
buttonIcons
- superseded:
editable/disableDragging <- draggable
weekMode <- fixedWeeks
columnFormat <- abbrevDayHeadings
header <- buttons/title
dragOpacity <- eventDragOpacity
dragRevertDuration <- eventRevertDuration
firstDay <- weekStart
isRTL <- rightToLeft
- removed:
showTime (use 'allDay' CalEvent property instead)
- Triggered Actions
- added:
eventResizeStart
eventResizeStop
eventResize
- superseded:
viewDisplay <- monthDisplay
windowResize <- resize
- CalEvent Properties
- superseded:
allDay <- showTime
editable <- draggable
- 'end' is now INCLUSIVE when allDay=true
- Methods:
- added:
renderEvent
- superseded:
prev <- prevMonth
next <- nextMonth
moveDate <- prevYear/nextYear
rerenderEvents/refetchEvents <- refresh
removeEvents <- removeEvent
clientEvents <- getEventsByID
- Utilities:
- 'formatDate' format string completely changed (inspired by jqueryui datepicker + datejs)
- 'formatDates' added to support date-ranges
- gcalFeed Options:
- superseded:
draggable <- editable
version 1.2.1 (6/29/09) version 1.2.1 (6/29/09)
- bugfixes - bugfixes
- allows and corrects invalid end dates for events - allows and corrects invalid end dates for events
@ -55,4 +118,3 @@ version 1.1 (5/10/09)
- for THEAD and TBODY (in 1.0, just used TBODY, restructured in 1.1) - for THEAD and TBODY (in 1.0, just used TBODY, restructured in 1.1)
- IF UPGRADING FROM FULLCALENDAR 1.0, YOU MUST UPGRADE FULLCALENDAR.CSS - IF UPGRADING FROM FULLCALENDAR 1.0, YOU MUST UPGRADE FULLCALENDAR.CSS
!!!!!!!!!!! !!!!!!!!!!!

View file

@ -1,6 +1,79 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <html>
<head> <head>
<!--<src>-->
<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
<script type='text/javascript' src='../src/jquery/jquery.js'></script>
<script type='text/javascript' src='../src/jquery/ui.core.js'></script>
<script type='text/javascript' src='../src/jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../src/jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../src/main.js'></script>
<script type='text/javascript' src='../src/grid.js'></script>
<script type='text/javascript' src='../src/view.js'></script>
<script type='text/javascript' src='../src/util.js'></script>
<!--</src>-->
<!--
<dist>
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.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.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script>
</dist>
-->
<script type='text/javascript'>
$(document).ready(function() {
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth();
$('#calendar').fullCalendar({
editable: true,
events: [
{
id: 1,
title: "Long Event",
start: new Date(y, m, 6, 14, 0),
end: new Date(y, m, 11),
allDay: false
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 2),
allDay: true
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 9),
allDay: true
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
allDay: false
},
{
id: 4,
title: "Click for Facebook",
start: new Date(y, m, 27, 16),
end: new Date(y, m, 29),
url: "http://facebook.com/",
allDay: false
}
]
});
});
</script>
<style type='text/css'> <style type='text/css'>
body { body {
@ -16,56 +89,6 @@
} }
</style> </style>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.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='../fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth();
$('#calendar').fullCalendar({
draggable: true,
events: [
{
id: 1,
title: "Long Event",
start: new Date(y, m, 6, 14, 0),
end: new Date(y, m, 11)
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 2)
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 9)
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0)
},
{
id: 4,
title: "Click for Facebook",
start: new Date(y, m, 27, 16),
end: new Date(y, m, 29),
url: "http://facebook.com/"
}
]
});
});
</script>
</head> </head>
<body> <body>
<div id='calendar'></div> <div id='calendar'></div>

View file

@ -1,6 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <html>
<head> <head>
<!--<src>-->
<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
<script type='text/javascript' src='../src/jquery/jquery.js'></script>
<script type='text/javascript' src='../src/main.js'></script>
<script type='text/javascript' src='../src/grid.js'></script>
<script type='text/javascript' src='../src/view.js'></script>
<script type='text/javascript' src='../src/util.js'></script>
<script type='text/javascript' src='../src/gcal.js'></script>
<!--</src>-->
<!--
<dist>
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script>
<script type='text/javascript' src='../gcal.js'></script>
</dist>
-->
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
// US Holidays
events: $.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic'),
eventClick: function(event) {
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
<style type='text/css'> <style type='text/css'>
body { body {
@ -22,33 +65,6 @@
} }
</style> </style>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.js'></script>
<script type='text/javascript' src='../fullcalendar/gcal.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
// US Holidays
events: $.fullCalendar.gcalFeed(
'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
{draggable: false, className: 'mygcal'}
),
eventClick: function(event) {
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
</head> </head>
<body> <body>
<div id='loading' style='display:none'>loading...</div> <div id='loading' style='display:none'>loading...</div>

View file

@ -1,6 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <html>
<head> <head>
<!--<src>-->
<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
<script type='text/javascript' src='../src/jquery/jquery.js'></script>
<script type='text/javascript' src='../src/jquery/ui.core.js'></script>
<script type='text/javascript' src='../src/jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../src/jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../src/main.js'></script>
<script type='text/javascript' src='../src/grid.js'></script>
<script type='text/javascript' src='../src/view.js'></script>
<script type='text/javascript' src='../src/util.js'></script>
<!--</src>-->
<!--
<dist>
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.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.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script>
</dist>
-->
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "json-events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
<style type='text/css'> <style type='text/css'>
body { body {
@ -22,35 +70,10 @@
} }
</style> </style>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.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='../fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
draggable: true,
events: "json_events.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
</head> </head>
<body> <body>
<div id='loading' style='display:none'>loading...</div> <div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div> <div id='calendar'></div>
<p>json_events.php needs to be running in the same directory.</p> <p>json-events.php needs to be running in the same directory.</p>
</body> </body>
</html> </html>

View file

@ -1,143 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='redmond/theme.css' />
<!--<src>-->
<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
<script type='text/javascript' src='../src/jquery/jquery.js'></script>
<script type='text/javascript' src='../src/jquery/ui.core.js'></script>
<script type='text/javascript' src='../src/jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../src/jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../src/main.js'></script>
<script type='text/javascript' src='../src/grid.js'></script>
<script type='text/javascript' src='../src/view.js'></script>
<script type='text/javascript' src='../src/util.js'></script>
<script type='text/javascript' src='../src/gcal.js'></script>
<!--</src>-->
<!--<dist>
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.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.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='../gcal.js'></script>
</dist>-->
<script type='text/javascript'>
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth();
$(document).ready(function() {
$('#calendar').fullCalendar({
windowResize: function() {
//alert('resize');
},
theme: false,
isRTL: false,
weekStart: 1,
weekMode: 'fixed',
//defaultView: 'dayBasic',
viewDisplay: function(date, view) {
//console.log(date + ', ' + view.name);
},
dayClick: function(date, view) {
//console.log(date + ', ' + view.name);
},
eventRender: function(event, element) {
//console.log(event.title + ' RENDER');
},
eventMouseover: function(event) {
//console.log('OVER ' + event.title);
},
eventMouseout: function(event) {
//console.log('OUT ' + event.title);
},
eventClick: function(event) {
//console.log('CLICK ' + event.title + ' /// ' + this.className);
//return false;
},
eventDragStart: function(event) {
//console.log('DRAG START ' + event.title);
},
eventDragStop: function(event) {
//console.log('DRAG STOP ' + event.title);
},
eventDrop: function(event, dayDelta, minuteDelta) {
//console.log(dayDelta + ' ' + minuteDelta + ' --- ' + event.title);
},
eventResizeStart: function(event) {
//console.log('resize START');
},
eventResizeStop: function(event) {
//console.log('resize STOP');
},
eventResize: function(event, dayDelta, minuteDelta) {
//console.log(dayDelta + ' ' + minuteDelta + ' --- ' + event.title);
},
editable: true,
eventSources: [
$.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic')
],
events: [
{
id: 1,
title: "Long Event",
start: new Date(y, m, 6),
end: new Date(y, m, 10)
},
{
id: 2,
title: "Repeating",
start: new Date(y, m, 2)
},
{
id: 2,
title: "Repeating",
start: new Date(y, m, 9)
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
hasTime: true
},
{
id: 4,
title: "Click for Facebook",
start: new Date(y, m, 27),
end: new Date(y, m, 28),
url: "http://facebook.com/"
},
{
id: 5,
title: "timed event1",
start: new Date (y, m, 31, 17, 30),
hasTime: true
},
{
id: 6,
title: "timed event1",
start: new Date (y, m+1, 2, 14, 15),
hasTime: true
},
{
id: 7,
title: "timed event1",
start: new Date (y, m+1, 4, 15, 00),
end: new Date(y, m+1, 4, 17, 00),
hasTime: true
}
]
});
});
</script>
</head>
<body style='font-size:12px'>
<div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
</body>

101
examples/views.html Executable file
View file

@ -0,0 +1,101 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!--<src>-->
<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
<script type='text/javascript' src='../src/jquery/jquery.js'></script>
<script type='text/javascript' src='../src/jquery/ui.core.js'></script>
<script type='text/javascript' src='../src/jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../src/jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../src/main.js'></script>
<script type='text/javascript' src='../src/grid.js'></script>
<script type='text/javascript' src='../src/view.js'></script>
<script type='text/javascript' src='../src/util.js'></script>
<!--</src>-->
<!--
<dist>
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.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.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.js'></script>
</dist>
-->
<script type='text/javascript'>
$(document).ready(function() {
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth();
$('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
events: [
{
id: 1,
title: "Long Event",
start: new Date(y, m, 6, 14, 0),
end: new Date(y, m, 11),
allDay: false
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 2),
allDay: true
},
{
id: 2,
title: "Repeating Event",
start: new Date(y, m, 9),
allDay: true
},
{
id: 3,
title: "Meeting",
start: new Date(y, m, 20, 9, 0),
allDay: false
},
{
id: 4,
title: "Click for Facebook",
start: new Date(y, m, 27, 16),
end: new Date(y, m, 29),
url: "http://facebook.com/",
allDay: false
}
]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

View file

@ -216,6 +216,7 @@ table.fc-header {
overflow: hidden; overflow: hidden;
font-size: 11px; font-size: 11px;
text-decoration: none; text-decoration: none;
text-align: left;
cursor: pointer; cursor: pointer;
} }