# To workaround Chrome specific issue I could increment start time of event of 1 sec
{{response.files.append(URL(r=request,c='static',f='js/fullcalendar.min.js'))}}
{{response.files.append(URL(r=request,c='static',f='js/gcal.js'))}}
{{response.files.append(URL(r=request,c='static',f='css/fullcalendar.css'))}}
{{'''response.files.append(URL(r=request,c='static',f='css/fullcalendar.print.css'))'''}}
{{extend 'layout.html'}}
<h1>{{=T('Calendar')}}</h1>
<div id="calendar"></div>
<script type='text/javascript'>
jQuery(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
editable: false,
eventMouseover: function(calEvent, jsEvent, view) {
savBg = $(this).css("background-color");
savClr = $(this).css("color");
$(this).css( { color:'#fff', backgroundColor:"#006" } );
}, // To set the underline onMouseOver to be white
eventSources: [
// Ex.: Google calendar
// className: 'gcal-event',
// currentTimezone: 'America/Montreal'},
{url: '/your_app_name/your_controller/calendar_json_feed', 'color': 'rgb(84, 132, 237)', cache: true},
// you can insert here all the other json feed you want for the stuff you want to display, you can change color to make those differents groups of events distinctive
],
// feed by simplejson function
//[
// {
// title: "S-20120215-U219-2p",
// allDay: false,
// end: "2013-03-22 09:30:00",
// url: '/sgddms/lotns/read/lotns_sample/623'
// }
// ],
header: {
left: 'today prevYear,nextYear prev,next',
center: 'title',
right: 'month,basicWeek,basicDay'
},
{{if T.accepted_language.split('-')[0] == 'fr':}}
timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
{{pass}}
monthNames: ["{{=T('January')}}",
"{{=T('February')}}",
"{{=T('March')}}",
"{{=T('April')}}",
"{{=T('May')}}",
"{{=T('June')}}",
"{{=T('July')}}",
"{{=T('August')}}",
"{{=T('September')}}",
"{{=T('October')}}",
"{{=T('November')}}",
"{{=T('December')}}"],
dayNames: ["{{=T('Sunday')}}",
"{{=T('Monday')}}",
"{{=T('Tuesday')}}",
"{{=T('Wednesday')}}",
"{{=T('Thursday')}}",
"{{=T('Friday')}}",
"{{=T('Saturday')}}"],
dayNamesShort: ["{{=T('Sun')}}",
"{{=T('Mon')}}",
"{{=T('Tue')}}",
"{{=T('Wed')}}",
"{{=T('Thu')}}",
"{{=T('Fri')}}",
"{{=T('Sat')}}"],
buttonText: {
prev: ' ◄ ', // left triangle
next: ' ► ', // right triangle
prevYear: ' ◄◄ ', // <<
nextYear: ' ►► ', // >>
today: "{{=T('today')}}",
month: "{{=T('month')}}",
week: "{{=T('week')}}",
day: "{{=T('day')}}"
}
});
});
</script>
Since I save you a lot of time you can consider to update the AppointmentManager app with this example to return to community :