@extends('serviceprovider.header')

<div class="main_body" style="padding-right: 20px;">
	<div class="main_dashboard_child">
    <div class="row">
      <div class="col-sm-8 pl-0">
        <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 class="col-sm-4 pl-0">
        <div class="card" style="height: 100%;">
          <div class="appointments_details">
            <a href="#" class="close_btn"><img src="images/Icon ionic-ios-close-circle-outline.png"></a>
            <div class="event-details single-event-details">
              <h5>Jeremy Renner</h5>
              <p>Tuesday, May 25, 2022</p>
              <p>01:00 PM-02:00 PM</p>
              <p>60 Min</p>
              <div class="action-btns">
                <a href="#"><img src="images/Group 91.png"></a>
                <a href="#"><img src="images/Group 90.png"></a>
                <a href="#"><img src="images/Group 89.png"></a>
              </div>
            </div>
            <div class="service-details single-event-details">
              <p><b>Service</b></p>
              <p>Accounting, 30 Min, $30.00</p>
            </div>
            <div class="service-details single-event-details">
              <p><b>Details</b></p>
              <div class="contact-details d-flex">
                <div class="contact_label">
                  <p class="text-muted">Phone Number</p>
                  <p class="text-muted">Email</p>
                </div>
                <div class="contact_label text-right">
                  <p>+1 895 784 524</p>
                  <p>jeremyrenner@gmail.com</p>
                </div>
              </div>
            </div>
            
            <div class="service-details single-event-details">
              <p><b>Note</b></p>
              <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            </div>

          </div>

        </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="css/calender.css">
<script type="text/javascript" src="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')