StocksNew/Modules/Admin/resources/views/calendars/index.blade.php

190 lines
7.4 KiB
PHP
Raw Normal View History

2024-08-27 12:03:06 +00:00
@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 ctdck 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 mb-3 pe-2" data-simplebar style="height: 400px">
<div id="upcoming-event-list">
@foreach ($events as $event)
<div class="card mb-3">
<div class="card-body">
<div class="d-flex">
<div class="flex-grow-1">
<h6 class="lh-base mb-1"><a href="#" class="text-reset">{{ $event->title }}</a></h6>
<p class="text-muted fs-12 mb-0"><i
class="mdi mdi-checkbox-blank-circle text-info me-2"></i>{{ $event->start_date->format('d M Y | H:i') }}
</p>
</div>
<div class="align-content-end text-danger flex-grow-0">
<p class="text-muted fs-12 mb-0"><i
class="mdi mdi-checkbox-blank-circle text-danger me-2"></i>{{ $event->end_date->format('d M Y | H:i') }}
</p>
</div>
</div>
{{-- <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">{{ $event->start_date->format('d M Y') }} </span></div>
<div class="flex-shrink-0"><small
class="badge bg-primary-subtle text-primary ms-auto">{{ $event->end_date->format('d M Y') }}</small>
</div>
</div>
<h6 class="card-title fs-16"> {{ $event->title }}</h6>
<p class="text-muted text-truncate-two-lines mb-0"> </p> --}}
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
<!-- end col-->
<div class="col-xl-9">
<div class="card card-h-100">
<div class="card-body">
<div id="calendar"></div>
</div>
</div>
</div><!-- end col -->
</div>
<!--end row-->
</div>
</div> <!-- end row-->
</div>
</div>
<div id="viewModal" class="modal fade" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true"
style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="viewModalLabel">Detail</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection
@push('js')
{{-- <script src="{{ asset('assets/js/plugins.js') }}"></script> --}}
{{-- <script src="{{ asset('assets/libs/fullcalendar/index.global.min.js') }}"></script> --}}
{{-- <script src="{{ asset('assets/js/pages/calendar.init.js') }}"></script> --}}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialDate: '2024-05-09',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: false,
selectable: false,
dayMaxEvents: true,
events: '/calendarByAjax',
selectMirror: true,
select: function(arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
eventClick: function(arg) {
console.log(arg.event.title, arg);
// if (confirm('Are you sure you want to delete this event?')) {
// arg.event.remove()
// }
html = `<tr>`;
html += `<td class="text-bold">Title: </td>`;
html += `<td>${arg.event.title}</td>`;
html += `</tr>`;
html += `<tr>`;
html += `<td class="text-bold">Type: </td>`;
html += `<td>${arg.event.extendedProps.type}</td>`;
html += `</tr>`;
html += `<tr>`;
html += `<td class="text-bold">Location: </td>`;
html += `<td>${arg.event.extendedProps.location}</td>`;
html += `</tr>`;
html += `<tr>`;
html += `<td class="text-bold">Description: </td>`;
html += `<td>${arg.event.extendedProps.desc}</td>`;
html += `</tr>`;
modal = $('#viewModal')
modal.find('.modal-body').html(html)
$('#viewModal').modal('show')
},
});
calendar.render();
});
</script>
@endpush