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)
|
||||
- bugfixes
|
||||
- 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)
|
||||
- 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">
|
||||
<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,
|
||||
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 {
|
||||
|
|
@ -16,56 +89,6 @@
|
|||
}
|
||||
|
||||
</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>
|
||||
<body>
|
||||
<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">
|
||||
<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/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'>
|
||||
|
||||
body {
|
||||
|
|
@ -22,33 +65,6 @@
|
|||
}
|
||||
|
||||
</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>
|
||||
<body>
|
||||
<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">
|
||||
<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() {
|
||||
|
||||
$('#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'>
|
||||
|
||||
body {
|
||||
|
|
@ -22,35 +70,10 @@
|
|||
}
|
||||
|
||||
</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>
|
||||
<body>
|
||||
<div id='loading' style='display:none'>loading...</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>
|
||||
</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;
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue