{% block stylesheets %}
	<link rel='stylesheet' type='text/css' href='{{ asset('css/fullcalendar.css') }}' />
	<link href="{{ asset ('css/stylecolabora.css') }}" rel="stylesheet" type="text/css" />        
    <link href="{{ asset('bootstrap/css/bootstrap.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block body %}
		<div style="margin-bottom:10px; text-align:center;"><h2>{{user.employee|title}}'s calendar</h2>
		</div>
		<div id='calendar'></div>
{% endblock %}

{% block javascripts %}
<script type='text/javascript' src='{{ asset('js/jquery.js') }}'></script>
<script type='text/javascript' src='{{ asset('js/fullcalendar.js') }}'></script>

<script>
	$(document).ready(function() {

		if({{info|json_encode|raw}} != null){
			var e = {{info|json_encode|raw}};
			var data= [];
			for (var i = 0; i < e.length; i++) 
	        {
	            data.push({
	                title: e[i]['title'],
	                start: e[i]['start'],
	                end: e[i]['end'],
	                color : e[i]['color']
	            });
	        }

	        $('#calendar').fullCalendar({
	        	header: {
	        		left:'prev,next today',
	        		center:'title',
	        		right:'month,agendaWeek,agendaDay'

	        	},
		        // put your options and callbacks here
		       /* dayClick: function() {
			        console.log('a day has been clicked!');
			    },*/

			    events: data,					
				
		    })
		}else{

			$('#calendar').fullCalendar({
		        // put your options and callbacks here
		       /* dayClick: function() {
			        console.log('a day has been clicked!');
			    },*/
				
		    })

		}		    

	});
</script>

{% endblock %}