@extends('layouts.app')
@section('content')
  <div class="page-content">
    <div class="container-fluid">

      <!-- start page title -->
      @include('layouts.partials.breadcrumb', ['title' => $title])

      <!-- end page title -->

      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-xl-3">
              <div class="card card-h-100">
                <div class="card-body">
                  <button class="btn btn-primary w-100" id="btn-new-event"><i class="mdi mdi-plus"></i> Create New
                    Event</button>

                  <div id="external-events">
                    <br>
                    <p class="text-muted">Drag and drop your event or click in the calendar</p>
                    <div class="external-event fc-event bg-success-subtle text-success" data-class="bg-success-subtle">
                      <i class="mdi mdi-checkbox-blank-circle me-2"></i>New Event Planning
                    </div>
                    <div class="external-event fc-event bg-info-subtle text-info" data-class="bg-info-subtle">
                      <i class="mdi mdi-checkbox-blank-circle me-2"></i>Meeting
                    </div>
                    <div class="external-event fc-event bg-warning-subtle text-warning" data-class="bg-warning-subtle">
                      <i class="mdi mdi-checkbox-blank-circle me-2"></i>Generating Reports
                    </div>
                    <div class="external-event fc-event bg-danger-subtle text-danger" data-class="bg-danger-subtle">
                      <i class="mdi mdi-checkbox-blank-circle me-2"></i>Create New theme
                    </div>
                  </div>

                </div>
              </div>
              <div>
                <h5 class="mb-1">Upcoming Events</h5>
                <p class="text-muted">Don't miss scheduled events</p>
                <div class="me-n1 simplebar-scrollable-y mb-3 pe-2" data-simplebar="init" style="height: 400px">
                  <div class="simplebar-wrapper" style="margin: 0px -8px 0px 0px;">
                    <div class="simplebar-height-auto-observer-wrapper">
                      <div class="simplebar-height-auto-observer"></div>
                    </div>
                    <div class="simplebar-mask">
                      <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
                        <div class="simplebar-content-wrapper" tabindex="0" role="region"
                          aria-label="scrollable content" style="height: 100%; overflow: hidden scroll;">
                          <div class="simplebar-content" style="padding: 0px 8px 0px 0px;">
                            <div id="upcoming-event-list">
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span class="fw-medium">4
                                        Jan 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> World Braille Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">30 Jan 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> World Leprosy Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">21 Feb 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> International Mother Language Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">22 Feb 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> World Thinking Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span class="fw-medium">8
                                        Mar 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> International Women's Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">21 Mar 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> International Mother Language Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">22 Mar 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> World Water Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">7 Apr 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> World Health Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">16 Apr 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> International Special Librarians Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">22 Apr 2022 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">5:45 AM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> Earth Day</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-primary me-2"></i><span
                                        class="fw-medium">1 Apr 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">Full day event</small></div>
                                  </div>
                                  <h6 class="card-title fs-16"> All Day Event</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> An all-day event is an event that
                                    lasts an entire day or longer</p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-warning me-2"></i><span
                                        class="fw-medium">10 Apr 2024 to 12 Apr 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">Full day event</small></div>
                                  </div>
                                  <h6 class="card-title fs-16"> Visit Online Course</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> Long Term Event means an incident
                                    that last longer than 12 hours.</p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-success me-2"></i><span
                                        class="fw-medium">15 Apr 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">12:30 PM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> Meeting With Designer</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> Tell how to boost website traffic
                                  </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-success me-2"></i><span
                                        class="fw-medium">16 Apr 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">7:00 PM to 12:00 AM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> Birthday Party</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> Family slumber party – Bring out
                                    the blankets and pillows and have a family slumber party! Play silly party games,
                                    share special snacks and wind down the fun with a special movie.</p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-primary me-2"></i><span
                                        class="fw-medium">19 Apr 2024 to 23 Apr 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">Full day event</small></div>
                                  </div>
                                  <h6 class="card-title fs-16"> Repeating Event</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> A recurring or repeating event is
                                    simply any event that you will occur more than once on your calendar. </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-danger me-2"></i><span
                                        class="fw-medium">24 Apr 2024 to 25 Apr 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">Full day event</small></div>
                                  </div>
                                  <h6 class="card-title fs-16"> Weekly Strategy Planning</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> Strategies for Creating Your Weekly
                                    Schedule</p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-dark me-2"></i><span
                                        class="fw-medium">28 Apr 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">Full day event</small></div>
                                  </div>
                                  <h6 class="card-title fs-16"> Click for Google</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> </p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-danger me-2"></i><span
                                        class="fw-medium">7 May 2024 to 8 May 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">8:00 PM to 4:00 PM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> Client Meeting with Alexis</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> A meeting is a gathering of two or
                                    more people that has been convened for the purpose of achieving a common goal through
                                    verbal interaction, such as sharing information or reaching agreement.</p>
                                </div>
                              </div>
                              <div class="card mb-3">
                                <div class="card-body">
                                  <div class="d-flex mb-3">
                                    <div class="flex-grow-1"><i
                                        class="mdi mdi-checkbox-blank-circle text-info me-2"></i><span
                                        class="fw-medium">8 May 2024 </span></div>
                                    <div class="flex-shrink-0"><small
                                        class="badge bg-primary-subtle text-primary ms-auto">8:00 PM to 4:00 PM</small>
                                    </div>
                                  </div>
                                  <h6 class="card-title fs-16"> Velzon Project Discussion with Team</h6>
                                  <p class="text-muted text-truncate-two-lines mb-0"> Tell how to boost website traffic
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="simplebar-placeholder" style="width: 302px; height: 2502px;"></div>
                  </div>
                  <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;">
                    <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div>
                  </div>
                  <div class="simplebar-track simplebar-vertical" style="visibility: visible;">
                    <div class="simplebar-scrollbar"
                      style="height: 63px; display: block; transform: translate3d(0px, 0px, 0px);"></div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-body bg-info-subtle">
                  <div class="d-flex">
                    <div class="flex-shrink-0">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" class="feather feather-calendar text-info icon-dual-info">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="16" y1="2" x2="16" y2="6"></line>
                        <line x1="8" y1="2" x2="8" y2="6"></line>
                        <line x1="3" y1="10" x2="21" y2="10"></line>
                      </svg>
                    </div>
                    <div class="flex-grow-1 ms-3">
                      <h6 class="fs-15">Welcome to your Calendar!</h6>
                      <p class="text-muted mb-0">Event that applications book will appear here. Click on an event to see
                        the details and manage applicants event.</p>
                    </div>
                  </div>
                </div>
              </div>
              <!--end card-->
            </div> <!-- end col-->

            <div class="col-xl-9">
              <div class="card card-h-100">
                <div class="card-body">
                  <div id="calendar" class="fc fc-media-screen fc-direction-ltr fc-theme-standard">
                    <div class="fc-header-toolbar fc-toolbar fc-toolbar-ltr">
                      <div class="fc-toolbar-chunk">
                        <div class="fc-button-group"><button type="button" title="Previous month"
                            aria-pressed="false" class="fc-prev-button fc-button fc-button-primary"><span
                              class="fc-icon fc-icon-chevron-left"></span></button><button type="button"
                            title="Next month" aria-pressed="false"
                            class="fc-next-button fc-button fc-button-primary"><span
                              class="fc-icon fc-icon-chevron-right"></span></button></div><button type="button"
                          title="This month" disabled="" aria-pressed="false"
                          class="fc-today-button fc-button fc-button-primary">today</button>
                      </div>
                      <div class="fc-toolbar-chunk">
                        <h2 class="fc-toolbar-title" id="fc-dom-1">April 2024</h2>
                      </div>
                      <div class="fc-toolbar-chunk">
                        <div class="fc-button-group"><button type="button" title="month view" aria-pressed="true"
                            class="fc-dayGridMonth-button fc-button fc-button-primary fc-button-active">month</button><button
                            type="button" title="week view" aria-pressed="false"
                            class="fc-timeGridWeek-button fc-button fc-button-primary">week</button><button
                            type="button" title="day view" aria-pressed="false"
                            class="fc-timeGridDay-button fc-button fc-button-primary">day</button><button type="button"
                            title="list view" aria-pressed="false"
                            class="fc-listMonth-button fc-button fc-button-primary">list</button></div>
                      </div>
                    </div>
                    <div aria-labelledby="fc-dom-1" class="fc-view-harness fc-view-harness-active"
                      style="height: 673.333px;">
                      <div class="fc-dayGridMonth-view fc-view fc-daygrid">
                        <table role="grid" class="fc-scrollgrid fc-scrollgrid-liquid">
                          <thead role="rowgroup">
                            <tr role="presentation" class="fc-scrollgrid-section fc-scrollgrid-section-header">
                              <th role="presentation">
                                <div class="fc-scroller-harness">
                                  <div class="fc-scroller" style="overflow: hidden;">
                                    <table role="presentation" class="fc-col-header" style="width: 906px;">
                                      <colgroup></colgroup>
                                      <thead role="presentation">
                                        <tr role="row">
                                          <th role="columnheader" class="fc-col-header-cell fc-day fc-day-sun">
                                            <div class="fc-scrollgrid-sync-inner"><a aria-label="Sunday"
                                                class="fc-col-header-cell-cushion">Sun</a></div>
                                          </th>
                                          <th role="columnheader" class="fc-col-header-cell fc-day fc-day-mon">
                                            <div class="fc-scrollgrid-sync-inner"><a aria-label="Monday"
                                                class="fc-col-header-cell-cushion">Mon</a></div>
                                          </th>
                                          <th role="columnheader" class="fc-col-header-cell fc-day fc-day-tue">
                                            <div class="fc-scrollgrid-sync-inner"><a aria-label="Tuesday"
                                                class="fc-col-header-cell-cushion">Tue</a></div>
                                          </th>
                                          <th role="columnheader" class="fc-col-header-cell fc-day fc-day-wed">
                                            <div class="fc-scrollgrid-sync-inner"><a aria-label="Wednesday"
                                                class="fc-col-header-cell-cushion">Wed</a></div>
                                          </th>
                                          <th role="columnheader" class="fc-col-header-cell fc-day fc-day-thu">
                                            <div class="fc-scrollgrid-sync-inner"><a aria-label="Thursday"
                                                class="fc-col-header-cell-cushion">Thu</a></div>
                                          </th>
                                          <th role="columnheader" class="fc-col-header-cell fc-day fc-day-fri">
                                            <div class="fc-scrollgrid-sync-inner"><a aria-label="Friday"
                                                class="fc-col-header-cell-cushion">Fri</a></div>
                                          </th>
                                          <th role="columnheader" class="fc-col-header-cell fc-day fc-day-sat">
                                            <div class="fc-scrollgrid-sync-inner"><a aria-label="Saturday"
                                                class="fc-col-header-cell-cushion">Sat</a></div>
                                          </th>
                                        </tr>
                                      </thead>
                                    </table>
                                  </div>
                                </div>
                              </th>
                            </tr>
                          </thead>
                          <tbody role="rowgroup">
                            <tr role="presentation"
                              class="fc-scrollgrid-section fc-scrollgrid-section-body fc-scrollgrid-section-liquid">
                              <td role="presentation">
                                <div class="fc-scroller-harness fc-scroller-harness-liquid">
                                  <div class="fc-scroller fc-scroller-liquid-absolute" style="overflow: hidden auto;">
                                    <div class="fc-daygrid-body fc-daygrid-body-unbalanced" style="width: 906px;">
                                      <table role="presentation" class="fc-scrollgrid-sync-table"
                                        style="width: 906px; height: 634px;">
                                        <colgroup></colgroup>
                                        <tbody role="presentation">
                                          <tr role="row">
                                            <td aria-labelledby="fc-dom-2" role="gridcell" data-date="2024-03-31"
                                              class="fc-day fc-day-sun fc-day-past fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to March 31, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-2"
                                                    class="fc-daygrid-day-number">31</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-4" role="gridcell" data-date="2024-04-01"
                                              class="fc-day fc-day-mon fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 1, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-4"
                                                    class="fc-daygrid-day-number">1</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness" style="margin-top: 0px;"><a
                                                      tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-past bg-primary-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">All Day Event</div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-6" role="gridcell" data-date="2024-04-02"
                                              class="fc-day fc-day-tue fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 2, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-6"
                                                    class="fc-daygrid-day-number">2</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-8" role="gridcell" data-date="2024-04-03"
                                              class="fc-day fc-day-wed fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 3, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-8"
                                                    class="fc-daygrid-day-number">3</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-10" role="gridcell" data-date="2024-04-04"
                                              class="fc-day fc-day-thu fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 4, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-10"
                                                    class="fc-daygrid-day-number">4</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-12" role="gridcell" data-date="2024-04-05"
                                              class="fc-day fc-day-fri fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 5, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-12"
                                                    class="fc-daygrid-day-number">5</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-14" role="gridcell" data-date="2024-04-06"
                                              class="fc-day fc-day-sat fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 6, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-14"
                                                    class="fc-daygrid-day-number">6</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr role="row">
                                            <td aria-labelledby="fc-dom-16" role="gridcell" data-date="2024-04-07"
                                              class="fc-day fc-day-sun fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 7, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-16"
                                                    class="fc-daygrid-day-number">7</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-18" role="gridcell" data-date="2024-04-08"
                                              class="fc-day fc-day-mon fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 8, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-18"
                                                    class="fc-daygrid-day-number">8</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-20" role="gridcell" data-date="2024-04-09"
                                              class="fc-day fc-day-tue fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 9, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-20"
                                                    class="fc-daygrid-day-number">9</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-22" role="gridcell" data-date="2024-04-10"
                                              class="fc-day fc-day-wed fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 10, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-22"
                                                    class="fc-daygrid-day-number">10</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness fc-daygrid-event-harness-abs"
                                                    style="top: 0px; left: 0px; right: -259px;"><a tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-past bg-warning-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Visit Online Course
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-24" role="gridcell" data-date="2024-04-11"
                                              class="fc-day fc-day-thu fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 11, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-24"
                                                    class="fc-daygrid-day-number">11</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-26" role="gridcell" data-date="2024-04-12"
                                              class="fc-day fc-day-fri fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 12, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-26"
                                                    class="fc-daygrid-day-number">12</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-28" role="gridcell" data-date="2024-04-13"
                                              class="fc-day fc-day-sat fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 13, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-28"
                                                    class="fc-daygrid-day-number">13</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr role="row">
                                            <td aria-labelledby="fc-dom-30" role="gridcell" data-date="2024-04-14"
                                              class="fc-day fc-day-sun fc-day-past fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 14, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-30"
                                                    class="fc-daygrid-day-number">14</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-32" role="gridcell" data-date="2024-04-15"
                                              class="fc-day fc-day-mon fc-day-today fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 15, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-32"
                                                    class="fc-daygrid-day-number">15</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness" style="margin-top: 0px;"><a
                                                      tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-today bg-success-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Meeting With Designer
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-34" role="gridcell" data-date="2024-04-16"
                                              class="fc-day fc-day-tue fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 16, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-34"
                                                    class="fc-daygrid-day-number">16</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness" style="margin-top: 0px;"><a
                                                      tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-future bg-success-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Birthday Party</div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-36" role="gridcell" data-date="2024-04-17"
                                              class="fc-day fc-day-wed fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 17, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-36"
                                                    class="fc-daygrid-day-number">17</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-38" role="gridcell" data-date="2024-04-18"
                                              class="fc-day fc-day-thu fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 18, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-38"
                                                    class="fc-daygrid-day-number">18</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-40" role="gridcell" data-date="2024-04-19"
                                              class="fc-day fc-day-fri fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 19, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-40"
                                                    class="fc-daygrid-day-number">19</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness fc-daygrid-event-harness-abs"
                                                    style="top: 0px; left: 0px; right: -130px;"><a tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-start fc-event-future bg-primary-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Repeating Event</div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-42" role="gridcell" data-date="2024-04-20"
                                              class="fc-day fc-day-sat fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 20, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-42"
                                                    class="fc-daygrid-day-number">20</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr role="row">
                                            <td aria-labelledby="fc-dom-44" role="gridcell" data-date="2024-04-21"
                                              class="fc-day fc-day-sun fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 21, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-44"
                                                    class="fc-daygrid-day-number">21</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness fc-daygrid-event-harness-abs"
                                                    style="top: 0px; left: 0px; right: -259px;"><a tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-end fc-event-future bg-primary-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Repeating Event</div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-46" role="gridcell" data-date="2024-04-22"
                                              class="fc-day fc-day-mon fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 22, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-46"
                                                    class="fc-daygrid-day-number">22</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-48" role="gridcell" data-date="2024-04-23"
                                              class="fc-day fc-day-tue fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 23, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-48"
                                                    class="fc-daygrid-day-number">23</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-50" role="gridcell" data-date="2024-04-24"
                                              class="fc-day fc-day-wed fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 24, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-50"
                                                    class="fc-daygrid-day-number">24</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness fc-daygrid-event-harness-abs"
                                                    style="top: 0px; left: 0px; right: -129.5px;"><a tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-future bg-danger-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Weekly Strategy
                                                              Planning</div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-52" role="gridcell" data-date="2024-04-25"
                                              class="fc-day fc-day-thu fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 25, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-52"
                                                    class="fc-daygrid-day-number">25</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-54" role="gridcell" data-date="2024-04-26"
                                              class="fc-day fc-day-fri fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 26, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-54"
                                                    class="fc-daygrid-day-number">26</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-56" role="gridcell" data-date="2024-04-27"
                                              class="fc-day fc-day-sat fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 27, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-56"
                                                    class="fc-daygrid-day-number">27</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr role="row">
                                            <td aria-labelledby="fc-dom-58" role="gridcell" data-date="2024-04-28"
                                              class="fc-day fc-day-sun fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 28, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-58"
                                                    class="fc-daygrid-day-number">28</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness" style="margin-top: 0px;"><a
                                                      href="http://google.com/"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-future bg-dark-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Click for Google</div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-60" role="gridcell" data-date="2024-04-29"
                                              class="fc-day fc-day-mon fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 29, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-60"
                                                    class="fc-daygrid-day-number">29</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-62" role="gridcell" data-date="2024-04-30"
                                              class="fc-day fc-day-tue fc-day-future fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to April 30, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-62"
                                                    class="fc-daygrid-day-number">30</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-64" role="gridcell" data-date="2024-05-01"
                                              class="fc-day fc-day-wed fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 1, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-64"
                                                    class="fc-daygrid-day-number">1</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-66" role="gridcell" data-date="2024-05-02"
                                              class="fc-day fc-day-thu fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 2, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-66"
                                                    class="fc-daygrid-day-number">2</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-68" role="gridcell" data-date="2024-05-03"
                                              class="fc-day fc-day-fri fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 3, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-68"
                                                    class="fc-daygrid-day-number">3</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-70" role="gridcell" data-date="2024-05-04"
                                              class="fc-day fc-day-sat fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 4, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-70"
                                                    class="fc-daygrid-day-number">4</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                          </tr>
                                          <tr role="row">
                                            <td aria-labelledby="fc-dom-72" role="gridcell" data-date="2024-05-05"
                                              class="fc-day fc-day-sun fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 5, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-72"
                                                    class="fc-daygrid-day-number">5</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-74" role="gridcell" data-date="2024-05-06"
                                              class="fc-day fc-day-mon fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 6, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-74"
                                                    class="fc-daygrid-day-number">6</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-76" role="gridcell" data-date="2024-05-07"
                                              class="fc-day fc-day-tue fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 7, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-76"
                                                    class="fc-daygrid-day-number">7</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness fc-daygrid-event-harness-abs"
                                                    style="top: 0px; left: 0px; right: -129.5px;"><a tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-future bg-danger-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Client Meeting with
                                                              Alexis</div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 38px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-78" role="gridcell" data-date="2024-05-08"
                                              class="fc-day fc-day-wed fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 8, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-78"
                                                    class="fc-daygrid-day-number">8</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-event-harness" style="margin-top: 38px;"><a
                                                      tabindex="0"
                                                      class="fc-event fc-event-draggable fc-event-resizable fc-event-start fc-event-end fc-event-future bg-info-subtle fc-daygrid-event fc-daygrid-block-event fc-h-event">
                                                      <div class="fc-event-main">
                                                        <div class="fc-event-main-frame">
                                                          <div class="fc-event-title-container">
                                                            <div class="fc-event-title fc-sticky">Velzon Project
                                                              Discussion with Team</div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                      <div class="fc-event-resizer fc-event-resizer-end"></div>
                                                    </a></div>
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-80" role="gridcell" data-date="2024-05-09"
                                              class="fc-day fc-day-thu fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 9, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-80"
                                                    class="fc-daygrid-day-number">9</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-82" role="gridcell" data-date="2024-05-10"
                                              class="fc-day fc-day-fri fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 10, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-82"
                                                    class="fc-daygrid-day-number">10</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                            <td aria-labelledby="fc-dom-84" role="gridcell" data-date="2024-05-11"
                                              class="fc-day fc-day-sat fc-day-future fc-day-other fc-daygrid-day">
                                              <div class="fc-daygrid-day-frame fc-scrollgrid-sync-inner">
                                                <div class="fc-daygrid-day-top"><a title="Go to May 11, 2024"
                                                    data-navlink="" tabindex="0" id="fc-dom-84"
                                                    class="fc-daygrid-day-number">11</a></div>
                                                <div class="fc-daygrid-day-events">
                                                  <div class="fc-daygrid-day-bottom" style="margin-top: 0px;"></div>
                                                </div>
                                                <div class="fc-daygrid-day-bg"></div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div><!-- end col -->
          </div>
          <!--end row-->

          <div style="clear:both"></div>

          <!-- Add New Event MODAL -->
          <div class="modal fade" id="event-modal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content border-0">
                <div class="modal-header bg-info-subtle p-3">
                  <h5 class="modal-title" id="modal-title">Add Event</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body p-4">
                  <form class="needs-validation" name="event-form" id="form-event" novalidate="">
                    <div class="text-end">
                      <a href="#" class="btn btn-sm btn-soft-primary" id="edit-event-btn"
                        data-id="new-event" onclick="editEvent(this)" role="button" hidden="true">Edit</a>
                    </div>
                    <div class="event-details">
                      <div class="d-flex mb-2">
                        <div class="flex-grow-1 d-flex align-items-center">
                          <div class="me-3 flex-shrink-0">
                            <i class="ri-calendar-event-line text-muted fs-16"></i>
                          </div>
                          <div class="flex-grow-1">
                            <h6 class="d-none fw-semibold mb-0" id="event-start-date-tag"></h6>
                          </div>
                        </div>
                      </div>
                      <div class="d-flex align-items-center mb-2">
                        <div class="me-3 flex-shrink-0">
                          <i class="ri-time-line text-muted fs-16"></i>
                        </div>
                        <div class="flex-grow-1">
                          <h6 class="d-block fw-semibold mb-0"><span id="event-timepicker1-tag"></span> - <span
                              id="event-timepicker2-tag"></span></h6>
                        </div>
                      </div>
                      <div class="d-flex align-items-center mb-2">
                        <div class="me-3 flex-shrink-0">
                          <i class="ri-map-pin-line text-muted fs-16"></i>
                        </div>
                        <div class="flex-grow-1">
                          <h6 class="d-block fw-semibold mb-0"> <span id="event-location-tag"></span></h6>
                        </div>
                      </div>
                      <div class="d-flex mb-3">
                        <div class="me-3 flex-shrink-0">
                          <i class="ri-discuss-line text-muted fs-16"></i>
                        </div>
                        <div class="flex-grow-1">
                          <p class="d-none text-muted mb-0" id="event-description-tag"></p>
                        </div>
                      </div>
                    </div>
                    <div class="row event-form">
                      <div class="col-12">
                        <div class="mb-3">
                          <label class="form-label">Type</label>
                          <div class="choices" data-type="select-one" tabindex="0" role="listbox"
                            aria-haspopup="true" aria-expanded="false">
                            <div class="choices__inner"><select class="form-select d-block choices__input"
                                name="category" id="event-category" required="" hidden="" tabindex="-1"
                                data-choice="active">
                                <option value="bg-danger-subtle" data-custom-properties="[object Object]">Danger
                                </option>
                              </select>
                              <div class="choices__list choices__list--single">
                                <div class="choices__item choices__item--selectable" data-item="" data-id="1"
                                  data-value="bg-danger-subtle" data-custom-properties="[object Object]"
                                  aria-selected="true">Danger</div>
                              </div>
                            </div>
                            <div class="choices__list choices__list--dropdown" aria-expanded="false">
                              <div class="choices__list" role="listbox">
                                <div id="choices--event-category-item-choice-1"
                                  class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted"
                                  role="option" data-choice="" data-id="1" data-value="bg-danger-subtle"
                                  data-select-text="Press to select" data-choice-selectable="" aria-selected="true">
                                  Danger</div>
                                <div id="choices--event-category-item-choice-2"
                                  class="choices__item choices__item--choice choices__item--selectable" role="option"
                                  data-choice="" data-id="2" data-value="bg-dark-subtle"
                                  data-select-text="Press to select" data-choice-selectable="">Dark</div>
                                <div id="choices--event-category-item-choice-3"
                                  class="choices__item choices__item--choice choices__item--selectable" role="option"
                                  data-choice="" data-id="3" data-value="bg-info-subtle"
                                  data-select-text="Press to select" data-choice-selectable="">Info</div>
                                <div id="choices--event-category-item-choice-4"
                                  class="choices__item choices__item--choice choices__item--selectable" role="option"
                                  data-choice="" data-id="4" data-value="bg-primary-subtle"
                                  data-select-text="Press to select" data-choice-selectable="">Primary</div>
                                <div id="choices--event-category-item-choice-5"
                                  class="choices__item choices__item--choice choices__item--selectable" role="option"
                                  data-choice="" data-id="5" data-value="bg-success-subtle"
                                  data-select-text="Press to select" data-choice-selectable="">Success</div>
                                <div id="choices--event-category-item-choice-6"
                                  class="choices__item choices__item--choice choices__item--selectable" role="option"
                                  data-choice="" data-id="6" data-value="bg-warning-subtle"
                                  data-select-text="Press to select" data-choice-selectable="">Warning</div>
                              </div>
                            </div>
                          </div>
                          <div class="invalid-feedback">Please select a valid event category</div>
                        </div>
                      </div>
                      <!--end col-->
                      <div class="col-12">
                        <div class="mb-3">
                          <label class="form-label">Event Name</label>
                          <input class="form-control d-block" placeholder="Enter event name" type="text"
                            name="title" id="event-title" required="" value="">
                          <div class="invalid-feedback">Please provide a valid event name</div>
                        </div>
                      </div>
                      <!--end col-->
                      <div class="col-12">
                        <div class="mb-3">
                          <label>Event Date</label>
                          <div class="input-group">
                            <input type="text" id="event-start-date"
                              class="form-control flatpickr flatpickr-input" placeholder="Select date"
                              required="" value="" readonly="readonly">
                            <span class="input-group-text"><i class="ri-calendar-event-line"></i></span>
                          </div>
                        </div>
                      </div>
                      <!--end col-->
                      <div class="col-12" id="event-time">
                        <div class="row">
                          <div class="col-6">
                            <div class="mb-3">
                              <label class="form-label">Start Time</label>
                              <div class="input-group">
                                <input id="timepicker1" type="hidden"
                                  class="form-control flatpickr flatpickr-input" placeholder="Select start time"
                                  value="" readonly="readonly"><input
                                  class="form-control flatpickr flatpickr-input flatpickr-mobile" tabindex="1"
                                  type="time" placeholder="Select start time">
                                <span class="input-group-text"><i class="ri-time-line"></i></span>
                              </div>
                            </div>
                          </div>
                          <div class="col-6">
                            <div class="mb-3">
                              <label class="form-label">End Time</label>
                              <div class="input-group">
                                <input id="timepicker2" type="hidden"
                                  class="form-control flatpickr flatpickr-input" placeholder="Select end time"
                                  value="" readonly="readonly"><input
                                  class="form-control flatpickr flatpickr-input flatpickr-mobile" tabindex="1"
                                  type="time" placeholder="Select end time">
                                <span class="input-group-text"><i class="ri-time-line"></i></span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!--end col-->
                      <div class="col-12">
                        <div class="mb-3">
                          <label for="event-location">Location</label>
                          <div>
                            <input type="text" class="form-control d-block" name="event-location"
                              id="event-location" placeholder="Event location">
                          </div>
                        </div>
                      </div>
                      <!--end col-->
                      <input type="hidden" id="eventid" name="eventid" value="">
                      <div class="col-12">
                        <div class="mb-3">
                          <label class="form-label">Description</label>
                          <textarea class="form-control d-block" id="event-description" placeholder="Enter a description" rows="3"
                            spellcheck="false"></textarea>
                        </div>
                      </div>
                      <!--end col-->
                    </div>
                    <!--end row-->
                    <div class="hstack justify-content-end gap-2">
                      <button type="button" class="btn btn-soft-danger" id="btn-delete-event" hidden="true"><i
                          class="ri-close-line align-bottom"></i> Delete</button>
                      <button type="submit" class="btn btn-success" id="btn-save-event">Add Event</button>
                    </div>
                  </form>
                </div>
              </div> <!-- end modal-content-->
            </div> <!-- end modal dialog-->
          </div> <!-- end modal-->
          <!-- end modal-->
        </div>
      </div>
    </div>
  </div>
@endsection