@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