@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