@extends('layouts.app_discussion')
@section('content')
<div class="container">
  <div class="row">
      <div class="col-md-3">
          @include('includes/dashboard/left_menu')
      </div>
      <div class="col">
        <div class="wrapper wrapper-content animated fadeInRight" style="min-height: 1000px">
          <div class="ibox-content forum-container h-100">
              <div class="forum-title">
                <h3 class="text-primary">Calendar</h3>
                {{ Breadcrumbs::render('calendar') }}
              </div>
              <div id='calendar' class="bg-white"></div>
          </div>
        </div>
      </div>
  </div>
</div>

@endsection
<script src="{{ asset('assets/pluggins/fullcalendar/index.global.min.js') }}"></script>
 {{-- <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.0.2/index.global.min.js"></script> --}}
{{-- <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.0.2/index.global.min.js"></script> --}}


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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    // initialDate: '2021-04-07',
    // themeSystem: "bootstrap",
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: [
      {
        title: 'All Day Event',
        start: '2021-04-01'
      },
      {
        title: 'Long Event',
        start: '2021-04-07',
        end: '2021-04-10'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2021-04-09T16:00:00'
      },
      {
        groupId: '999',
        title: 'Repeating Event',
        start: '2021-04-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2021-04-11',
        end: '2021-04-13'
      },
      {
        title: 'Meeting',
        start: '2021-04-12T10:30:00',
        end: '2021-04-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2021-04-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2021-04-12T14:30:00'
      },
      {
        title: 'Birthday Party',
        start: '2021-04-13T07:00:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2021-04-28'
      }
    ]
  });

  calendar.render();
});
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
}

#calendar {
  /* max-width: 1100px;
  margin: 40px auto; */
}
a {
    color: black !important
}
.fc-button-group{
    padding: 0px 0
}
.fc-toolbar-title {}
</style>