@extends('serviceprovider.header')

<div class="main_body">
	<div class="main_dashboard_child">
		<div class="card">
			<div class="appointments_title">
				<h5>May 2022 <span>4 Appointments</span></h5>
			</div>
			<div class="appointments_calender">
				<div id='calendar'></div>
			</div>

		</div>



	</div>

		</div>
	</div>

</section>
<style type="text/css">
	 #calendar {
    max-width: 1100px;
    margin: 0 auto;
  }
</style>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/calender.css') }}">
<script type="text/javascript" src="{{ asset('assets/js/calender.js') }}"></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prevYear,prev,next,nextYear today',
        center: 'title',
        right: 'dayGridMonth,dayGridWeek,dayGridDay'
      },
      initialDate: '2020-09-12',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: [
        {
          title: '10AM - 11AM',
          start: '2020-09-01'
        },
        {
          title: '10AM - 11AM',
          start: '2020-09-07'
          //end: '2020-09-10'
        },
        {
          //groupId: 999,
          title: '10AM - 11AM',
          start: '2020-09-09'
        },
        {
          //groupId: 999,
          title: '10AM - 11AM',
          start: '2020-09-16'
        },
        {
          title: '10AM - 11AM',
          start: '2020-09-11'
          //end: '2020-09-13'
        },
        {
          title: '10AM - 11AM',
          start: '2020-09-12'
         // end: '2020-09-12T12:30:00'
        }
      ]
    });

    calendar.render();
  });

</script>
@extends('serviceprovider.footer')