+<link rel='stylesheet' type='text/css' href='$baseurl/library/fullcalendar/fullcalendar.css' />
+<script language="javascript" type="text/javascript"
+ src="$baseurl/library/fullcalendar/fullcalendar.min.js"></script>
+
+<script>
+ function showEvent(eventid) {
+ $.get(
+ '$baseurl/events/?id='+eventid,
+ function(data){
+ $.fancybox(data);
+ }
+ );
+ }
+
+ $(document).ready(function() {
+ $('#events-calendar').fullCalendar({
+ events: '$baseurl/events/json/',
+ header: {
+ left: 'prev,next today',
+ center: 'title',
+ right: 'month,agendaWeek,agendaDay'
+ },
+ timeFormat: 'H(:mm)',
+ eventClick: function(calEvent, jsEvent, view) {
+ showEvent(calEvent.id);
+ },
+
+ eventRender: function(event, element, view) {
+ //console.log(view.name);
+ if (event.item['author-name']==null) return;
+ switch(view.name){
+ case "month":
+ element.find(".fc-event-title").html(
+ "<img src='{0}' style='height:10px;width:10px'>{1} : {2}".format(
+ event.item['author-avatar'],
+ event.item['author-name'],
+ event.title
+ ));
+ break;
+ case "agendaWeek":
+ element.find(".fc-event-title").html(
+ "<img src='{0}' style='height:12px; width:12px'>{1}<p>{2}</p><p>{3}</p>".format(
+ event.item['author-avatar'],
+ event.item['author-name'],
+ event.item.desc,
+ event.item.location
+ ));
+ break;
+ case "agendaDay":
+ element.find(".fc-event-title").html(
+ "<img src='{0}' style='height:24px;width:24px'>{1}<p>{2}</p><p>{3}</p>".format(
+ event.item['author-avatar'],
+ event.item['author-name'],
+ event.item.desc,
+ event.item.location
+ ));
+ break;
+ }
+ }
+
+ })
+
+ // center on date
+ var args=location.href.replace(baseurl,"").split("/");
+ if (args.length>=4) {
+ $("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1);
+ }
+
+ // show event popup
+ var hash = location.hash.split("-")
+ if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]);
+
+ });
+</script>
+
+