{% extends 'themes/'~layout_dir~'/layout.html' %}



{% block body %}

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.css" rel="stylesheet">
<style>
	.fc-state-hover, .fc-state-default, .fc-button {
		background-color: #f5f5f5 !important;
		background-image: none !important;
	}
	
	.fc-body:hover, .fc-body tr:hover, fc-widget-content:hover{
		background-color: white !important;
	}
	
	.fc-v-event {
	  min-height: 15px;
	}
</style>

<div class="row">
	{% include 'themes/default/modules/PortalModule/module.actions.html' %}
</div>
	
	
	
	<div class="row">
  <div id="admin" class="col s12">
	<br>
    <div class="card material-table ">
	    <div class="card-content">
    	<div id="calendar"></div>
	    </div>
    </div>
  
  {% if create_enabled is defined and create_enabled %} 
		<div class="col s12 right-align">
			<a class="btn {{themebasiccolor}} waves-effect waves-light btn-medium" href="{{app.request.requestUri}}create"><i class="material-icons large left">add</i>{{"Create New"|trans}}</a>
		</div>
	{% endif %}
</div>

{% endblock %}
{% block footerscripts %}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.js"></script>

<script>
	$(document).ready(function() {
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'listDay,agendaWeek,month,listYear'
			},

			// customize the button names,
			// otherwise they'd all just say "list"
			views: {
				listDay: { buttonText: '{{"LBL_DAY_TYPE"|trans}}' },
				agendaWeek: { buttonText: '{{"LBL_WEEKS_TYPE"|trans}}' },
				month: { buttonText: '{{"LBL_MONTHS_TYPE"|trans}}' },
				listYear: { buttonText: '{{"LBL_YEAR_TYPE"|trans}}' }
			},
			
			defaultView: 'month',
			navLinks: true, // can click day/week names to navigate views
			editable: false,
			eventLimit: true, // allow "more" link when too many events
			events: {{events|json_encode()|raw}},
			eventColor: '{{app.colors_map[themebasiccolor]}}'
		});
		
	});

</script>

{% endblock %}