updated examples
This commit is contained in:
Adam Shaw
parent
81c3cd9ee3
commit
e3850a2e3e
8 changed files with 332 additions and 249 deletions
|
|
@ -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
|
||||||
!!!!!!!!!!!
|
!!!!!!!!!!!
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
101
examples/views.html
Executable 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>
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue