mirror of
https://github.com/wassname/fullcalendar.git
synced 2026-06-27 16:10:13 +08:00
sean kenny
157 lines
4.9 KiB
HTML
157 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<link rel="stylesheet" href="./lib/bootstrap.min.css" />
|
||
<link href='../build/out/fullcalendar.css' rel='stylesheet' />
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
|
||
<body>
|
||
<h3 class="text-center">Calendar demo</h3>
|
||
|
||
<div id="calendar"></div>
|
||
|
||
<script src='../build/out/jquery.js'></script>
|
||
<script src='../build/out/jquery-ui.js'></script>
|
||
|
||
<script src="./lib/bootstrap.min.js"></script>
|
||
|
||
<script src='../src/defaults.js'></script>
|
||
<script src='../src/main.js'></script>
|
||
<script src='../src/Calendar.js'></script>
|
||
<script src='../src/Header.js'></script>
|
||
<script src='../src/EventManager.js'></script>
|
||
<script src='../src/ResourceManager.js'></script>
|
||
<script src='../src/date_util.js'></script>
|
||
<script src='../src/util.js'></script>
|
||
<script src='../src/basic/MonthView.js'></script>
|
||
<script src='../src/basic/BasicWeekView.js'></script>
|
||
<script src='../src/basic/BasicDayView.js'></script>
|
||
<script src='../src/basic/BasicView.js'></script>
|
||
<script src='../src/basic/BasicEventRenderer.js'></script>
|
||
<script src='../src/agenda/AgendaWeekView.js'></script>
|
||
<script src='../src/agenda/AgendaDayView.js'></script>
|
||
<script src='../src/agenda/AgendaView.js'></script>
|
||
<script src='../src/agenda/AgendaEventRenderer.js'></script>
|
||
<script src='../src/resource/ResourceDayView.js'></script>
|
||
<script src='../src/resource/ResourceView.js'></script>
|
||
<script src='../src/resource/ResourceEventRenderer.js'></script>
|
||
<script src='../src/common/View.js'></script>
|
||
<script src='../src/common/DayEventRenderer.js'></script>
|
||
<script src='../src/common/SelectionManager.js'></script>
|
||
<script src='../src/common/OverlayManager.js'></script>
|
||
<script src='../src/common/CoordinateGrid.js'></script>
|
||
<script src='../src/common/HoverListener.js'></script>
|
||
<script src='../src/common/HorizontalPositionCache.js'></script>
|
||
<script src='../build/out/gcal.js'></script>
|
||
|
||
<script src="dateFormat.min.js"></script>
|
||
<script>
|
||
// Code goes here
|
||
var date = new Date();
|
||
var d = date.getDate();
|
||
var m = date.getMonth();
|
||
var y = date.getFullYear();
|
||
var study;
|
||
|
||
var ecoEvents = [{
|
||
title: 'Test 1',
|
||
start: new Date(y, m, d, 09, 15),
|
||
end: new Date(y, m, d, 10, 00),
|
||
allDay: false,
|
||
resources: ['1','2']
|
||
}, {
|
||
title: 'Test 2',
|
||
start: new Date(y, m, d, 08, 30),
|
||
end: new Date(y, m, d, 09, 00),
|
||
allDay: false,
|
||
resources: ['2']
|
||
}];
|
||
|
||
var ecoResources = [{'id':'1','name':'Eco Office 1'},{'id':'2', 'name':'Eco Office 2'}];
|
||
|
||
$('#calendar').fullCalendar({
|
||
//When you click and select a time range show up the modal, with date,
|
||
//start and end time fields populated (Didn´t add fields).
|
||
select: function(start, end, allDay, ev, resources) {
|
||
console.log(start);
|
||
console.log(ev.data);
|
||
},
|
||
/*Clicking on an event makes an ajax request with the parameters I pass on the showModal
|
||
function, and shows the modal with all the fields populated. */
|
||
eventClick: function(event) {
|
||
console.log(event);
|
||
},
|
||
resources: ecoResources,
|
||
events: ecoEvents,
|
||
titleFormat: {
|
||
day: 'dd/MM/yyyy',
|
||
week: "MMMM dd[ yyyy]{ '—'[ MMMM] d yyyy}"
|
||
},
|
||
columnFormat: {
|
||
day: 'dddd dd/MM/yyyy',
|
||
week: "dddd dd"
|
||
},
|
||
defaultView: 'resourceDay',
|
||
header: {
|
||
left: 'prev,next today',
|
||
center: 'title',
|
||
right: 'agendaWeek, agendaDay, resourceDay'
|
||
},
|
||
editable: true,
|
||
eventDrop: function (event, delta, revertFunc) {
|
||
console.log(event.resources);
|
||
},
|
||
allDaySlot: true,
|
||
selectable: true,
|
||
selectHelper: true,
|
||
|
||
droppable: true,
|
||
snapMinutes: 5,
|
||
slotMinutes: 15,
|
||
aspectRatio: 2,
|
||
height: 500,
|
||
theme: false,
|
||
buttonIcons: false,
|
||
minTime: 8,
|
||
maxTime: 21
|
||
});
|
||
|
||
$("#study-selector").change(function(a, b, c) {
|
||
var office = $(this).val();
|
||
|
||
// TAC
|
||
if (office == 2){
|
||
events = [{
|
||
title: 'TAC Appointment',
|
||
start: new Date(y, m, d, 08, 30),
|
||
end: new Date(y, m, d, 09, 00),
|
||
allDay: false,
|
||
resources: ['3']
|
||
}];
|
||
resources = [{'id':'3','name':'Tac Office'}];
|
||
} else if (office == 3){
|
||
events = [{
|
||
title: 'RMN Appointment',
|
||
start: new Date(y, m, d, 09, 15),
|
||
end: new Date(y, m, d, 10, 00),
|
||
allDay: false,
|
||
resources: ['4']
|
||
}];
|
||
resources = [{'id':'4','name':'RMS Office'}];
|
||
} else {
|
||
events = ecoEvents;
|
||
resources = ecoResources;
|
||
}
|
||
|
||
cal = $('#calendar');
|
||
cal.fullCalendar('setResources', resources)
|
||
cal.fullCalendar('removeEvents')
|
||
cal.fullCalendar('render')
|
||
cal.fullCalendar('addEventSource', events)
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |