@if(Auth::check())
	<style type="text/css">
		.cal-container{
			margin-top:70px;	
		}
    </style>
@endif

<div class="cmpages-conatiner">
	<div class="container cal-container">
			<h3>Events Calendar</h3>        
		    <link href='{{URL::to('/')}}/themes/frontend/default/css/fullcalendar.css' rel='stylesheet' />
			<script src='{{URL::to('/')}}/themes/frontend/default/js/fullcalendar.js'></script>
			
			<script>
				document.addEventListener('DOMContentLoaded', function() {
					var calendarEl = document.getElementById('events_calendar');

					var str = '{{$datesEvent}}';
					var eventsData = JSON.parse(str.replace(/(&quot\;)/g, "\""));
					
					var calendar = new FullCalendar.Calendar(calendarEl, {
						  headerToolbar: {
							left: 'prev,next today',
							center: 'title',
							right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
						  },
						  initialDate: null,
						  navLinks: true, // can click day/week names to navigate views
						  nowIndicator: true,
						  weekNumbers: true,
						  weekNumberCalculation: 'ISO',
						  editable: false,
						  selectable: true,
						  dayMaxEvents: false, // allow "more" link when too many events
						  events: eventsData,
						  firstDay:0,
						  dateClick: function (info) { 
								
						  },
						  eventClick: function(event) {
							if (event.event.url) {
							  event.jsEvent.preventDefault();
							  window.open(event.event.url, "_blank");
							}							
						  }
					});
					calendar.render();
				});
			</script>

			<div id='events_calendar' class="cm_events_calendar"></div>
			
			<br>
    </div>	
</div>