Skip to content
Find file
2a90238 Apr 27, 2012
@themouette @K-Phoen @darkbreton
246 lines (222 sloc) 9.37 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Demo 3 - jQuery Week Calendar</title>
<link rel='stylesheet' type='text/css' href='libs/css/smoothness/jquery-ui-1.8.11.custom.css' />
<link rel="stylesheet" type="text/css" href="jquery.weekcalendar.css" />
<link rel="stylesheet" type="text/css" href="skins/default.css" />
<link rel="stylesheet" type="text/css" href="skins/gcalendar.css" />
<style type="text/css">
body {
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
margin: 0;
}
h1 {
margin:0 0 2em;
padding: 0.5em;
font-size: 1.3em;
}
p.description {
font-size: 0.8em;
padding: 1em;
position: absolute;
top: 1.2em;
margin-right: 400px;
}
#calendar_selection {
font-size: 0.7em;
position: absolute;
top: 1em;
right: 1em;
padding: 1em;
background: #ffc;
border: 1px solid #dda;
width: 270px;
}
#message {
font-size: 0.7em;
position: absolute;
top: 1em;
right: 320px;
padding: 1em;
background: #ddf;
border: 1px solid #aad;
width: 270px;
}
</style>
<script type='text/javascript' src='libs/jquery-1.4.4.min.js'></script>
<script type='text/javascript' src='libs/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='libs/jquery-ui-i18n.js'></script>
<script type="text/javascript" src="libs/date.js"></script>
<script type="text/javascript" src="jquery.weekcalendar.js"></script>
<script type="text/javascript">
(function($) {
var d = new Date();
d.setDate(d.getDate() - d.getDay());
var year = d.getFullYear();
var month = d.getMonth();
var day = d.getDate();
var eventData1 = {
options: {
timeslotsPerHour: 4,
timeslotHeight: 20,
defaultFreeBusy: {free: true}
},
events : [
{'id':1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 30), 'title': 'Lunch with Mike', userId: 0},
{'id':2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 45), 'title': 'Dev Meeting', userId: 1},
{'id':3, 'start': new Date(year, month, day+1, 18), 'end': new Date(year, month, day+1, 18, 45), 'title': 'Hair cut', userId: 1},
{'id':4, 'start': new Date(year, month, day+2, 8), 'end': new Date(year, month, day+2, 9, 30), 'title': 'Team breakfast', userId: 0},
{'id':5, 'start': new Date(year, month, day+1, 14), 'end': new Date(year, month, day+1, 15), 'title': 'Product showcase', userId: 1}
],
freebusys: [
{'start': new Date(year, month, day), 'end': new Date(year, month, day+3), 'free': false, userId: [0,1,2,3]},
{'start': new Date(year, month, day, 8), 'end': new Date(year, month, day, 12), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+1, 8), 'end': new Date(year, month, day+1, 12), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+2, 8), 'end': new Date(year, month, day+2, 12), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+1, 14), 'end': new Date(year, month, day+1, 18), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+2, 8), 'end': new Date(year, month, day+2, 12), 'free': true, userId: [0,3]},
{'start': new Date(year, month, day+2, 14), 'end': new Date(year, month, day+2, 18), 'free': true, userId: 1}
]
};
d = new Date();
d.setDate(d.getDate() -(d.getDay() - 3));
year = d.getFullYear();
month = d.getMonth();
day = d.getDate();
var eventData2 = {
options: {
timeslotsPerHour: 3,
timeslotHeight: 30,
defaultFreeBusy: {free: false}
},
events : [
{'id':1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 00), 'title': 'Lunch with Sarah', userId: [1, 2]},
{'id':2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 40), 'title': 'Team Meeting', userId: 0},
{'id':3, 'start': new Date(year, month, day+1, 18), 'end': new Date(year, month, day+1, 18, 40), 'title': 'Meet with Joe', userId: 1},
{'id':4, 'start': new Date(year, month, day-1, 8), 'end': new Date(year, month, day-1, 9, 20), 'title': 'Coffee with Alison', userId: 1},
{'id':5, 'start': new Date(year, month, day+1, 14), 'end': new Date(year, month, day+1, 15, 00), 'title': 'Product showcase', userId: 0}
],
freebusys: [
{'start': new Date(year, month, day-1, 8), 'end': new Date(year, month, day-1, 18), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day, 8), 'end': new Date(year, month, day+0, 18), 'free': true, userId: [0,1,2,3]},
{'start': new Date(year, month, day+1, 8), 'end': new Date(year, month, day+1, 18), 'free': true, userId: [0,3]},
{'start': new Date(year, month, day+2, 14), 'end': new Date(year, month, day+2, 18), 'free': true, userId: 1}
]
};
function updateMessage() {
var dataSource = $('#data_source').val();
$('#message').fadeOut(function() {
if (dataSource === '1') {
$('#message').text('Displaying event data set 1 with timeslots per hour of 4 and timeslot height of 20px. Moreover, the calendar is free by default.');
} else if(dataSource === '2') {
$('#message').text('Displaying event data set 2 with timeslots per hour of 3 and timeslot height of 30px. Moreover, the calendar is busy by default.');
} else {
$('#message').text('Displaying no events.');
}
$(this).fadeIn();
});
}
$(document).ready(function() {
var $calendar = $('#calendar').weekCalendar({
timeslotsPerHour: 4,
scrollToHourMillis : 0,
height: function($calendar){
return $(window).height() - $('h1').outerHeight(true);
},
eventRender : function(calEvent, $event) {
if (calEvent.end.getTime() < new Date().getTime()) {
$event.css('backgroundColor', '#aaa');
$event.find('.wc-time').css({
backgroundColor: '#999',
border:'1px solid #888'
});
}
},
eventNew : function(calEvent, $event, FreeBusyManager, calendar) {
var isFree = true;
$.each(FreeBusyManager.getFreeBusys(calEvent.start, calEvent.end), function() {
if (
this.getStart().getTime() != calEvent.end.getTime()
&& this.getEnd().getTime() != calEvent.start.getTime()
&& !this.getOption('free')
){
isFree = false;
return false;
}
});
if (!isFree) {
alert('looks like you tried to add an event on busy part !');
$(calendar).weekCalendar('removeEvent',calEvent.id);
return false;
}
alert('You\'ve added a new event. You would capture this event, add the logic for creating a new event with your own fields, data and whatever backend persistence you require.');
calEvent.id = calEvent.userId +'_'+ calEvent.start.getTime();
$(calendar).weekCalendar('updateFreeBusy', {
userId: calEvent.userId,
start: calEvent.start,
end: calEvent.end,
free:false
});
},
data: function(start, end, callback) {
var dataSource = $('#data_source').val();
if (dataSource === '1') {
callback(eventData1);
} else if(dataSource === '2') {
callback(eventData2);
} else {
callback({
options: {
defaultFreeBusy: {
free:true
}
},
events: []
});
}
},
users: ['user 1', 'user 2', 'long username', 'user 4'],
showAsSeparateUser: true,
displayOddEven: true,
displayFreeBusys: true,
daysToShow: 7,
switchDisplay: {'1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7},
headerSeparator: ' ',
useShortDayNames: true,
// I18N
firstDayOfWeek: $.datepicker.regional['fr'].firstDay,
shortDays: $.datepicker.regional['fr'].dayNamesShort,
longDays: $.datepicker.regional['fr'].dayNames,
shortMonths: $.datepicker.regional['fr'].monthNamesShort,
longMonths: $.datepicker.regional['fr'].monthNames,
dateFormat: 'd F y'
});
$('#data_source').change(function() {
$calendar.weekCalendar('refresh');
updateMessage();
});
updateMessage();
});
})(jQuery);
</script>
</head>
<body>
<h1>Week Calendar Demo</h1>
<p class="description">
This calendar demonstrates the differents new options that allow user
management and freebusy display / computation.
</p>
<div id="message" class="ui-corner-all"></div>
<div id="calendar_selection" class="ui-corner-all">
<strong>Event Data Source: </strong>
<select id="data_source">
<option value="">Select Event Data</option>
<option value="1">Event Data 1</option>
<option value="2">Event data 2</option>
</select>
</div>
<div id="calendar"></div>
</body>
</html>
Something went wrong with that request. Please try again.