|
|
|
|
|
|
|
JQueryFullCalendarHomepage: http://arshaw.com/fullcalendar/Author(s): Adam Shaw Version: 1.4.3 FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). Example: defaultExample: asyncJavaScript initialisationMore...Close
%STARTSECTION{"init"}%
<literal>
<script type='text/javascript'>
jQuery(function($) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar1').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
firstDay: 1,
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
$('#calendar2').fullCalendar({
theme: true,
editable: true,
firstDay: 1,
defaultView: 'agendaWeek',
events: '%SCRIPTURLPATH{"view"}%/%BASEWEB%/%BASETOPIC%?section=json-events;skin=text',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventDragStop: function(calEvent, jsEvent, ui, view) {
alert(calEvent.title +
' was dragged\n' +
'id=' + calEvent.id + '\n' +
'start=' + calEvent.start + '\n' +
'end='+calEvent.end);
},
eventResize: function(calEvent, jsEvent, ui, view) {
alert(calEvent.title +
' was resized\n' +
'id=' + calEvent.id + '\n' +
'start=' + calEvent.start + '\n' +
'end='+calEvent.end);
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + ':\n' +
'id=' + calEvent.id + '\n' +
'start=' + calEvent.start + '\n' +
'end='+calEvent.end);
},
loading: function(bool) {
if (bool) {
$('#loading').show();
} else {
$('#loading').hide();
}
},
timeFormat: {
// for agendaWeek and agendaDay
agenda: 'H:mm{ - H:mm}',
// for all other views
'': 'h(:mm)'
},
columnFormat: {
month: 'ddd',
week: 'ddd d',
day: 'dddd d'
},
axisFormat: 'H:mm'
});
});
</script>
</literal>
%ENDSECTION{"init"}%
JSON events
[
{
id: 1,
title: 'Event1',
start: 'Nov 09 2025',
allDay: true
},
{
id: 2,
title: 'Workingday',
start: 'Nov 09 2025 08:30:00',
end: 'Nov 09 2025 15:00:00',
allDay: false
}
]
![]() |
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.