123 lines
3.7 KiB
PHP
123 lines
3.7 KiB
PHP
@extends('layouts.instructor')
|
|
|
|
@push('title', get_phrase('Manage Schedules'))
|
|
|
|
@push('meta')
|
|
@endpush
|
|
|
|
@push('css')
|
|
<style>
|
|
body {
|
|
margin: 5px;
|
|
padding: 0;
|
|
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#calendar {
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
|
|
|
|
@section('content')
|
|
<div class="ol-card radius-8px">
|
|
<div class="ol-card-body my-3 py-12px px-20px">
|
|
<div class="d-flex align-items-center justify-content-between gap-3 flex-wrap flex-md-nowrap">
|
|
<h4 class="title fs-16px">
|
|
<i class="fi-rr-settings-sliders me-2"></i>
|
|
{{ get_phrase('Manage Schedules') }}
|
|
</h4>
|
|
|
|
<a href="{{ route('instructor.add_schedule') }}" class="btn ol-btn-outline-secondary d-flex align-items-center cg-10px">
|
|
<span class="fi-rr-plus"></span>
|
|
<span>{{ get_phrase('Add schedule') }}</span>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-12">
|
|
<div class="ol-card p-4">
|
|
<div class="ol-card-body">
|
|
<div class="col-md-12 pb-3">
|
|
<div id='calendar'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('js')
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
"use strict";
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var initialLocaleCode = 'en';
|
|
var localeSelectorEl = document.getElementById('locale-selector');
|
|
var calendarEl = document.getElementById('calendar');
|
|
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
// headerToolbar: {
|
|
// left: 'prev,next today',
|
|
// center: 'title',
|
|
// right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
|
// },
|
|
initialDate: '{{ date('Y-m-d') }}',
|
|
navLinks: true, // can click day/week names to navigate views
|
|
selectable: true,
|
|
selectMirror: true,
|
|
select: function(arg) {
|
|
|
|
},
|
|
eventClick: function(arg) {
|
|
|
|
// Format the date to '12-Feb-24'
|
|
let options = { day: '2-digit', month: 'short', year: '2-digit' };
|
|
let eventDate = arg.event.start.toLocaleDateString('en-GB', options).replace(/ /g, '-');
|
|
|
|
// Generate the URL with the event date
|
|
let url = "{{ route('instructor.manage_schedules_by_date', ['date' => ':eventDate']) }}";
|
|
url = url.replace(":eventDate", eventDate);
|
|
|
|
// Navigate to the URL
|
|
window.location.href = url;
|
|
|
|
},
|
|
editable: false,
|
|
dayMaxEvents: true, // allow "more" link when too many events
|
|
events: <?php echo $schedules; ?>
|
|
});
|
|
|
|
calendar.render();
|
|
|
|
// build the locale selector's options
|
|
calendar.getAvailableLocaleCodes().forEach(function(localeCode) {
|
|
var optionEl = document.createElement('option');
|
|
optionEl.value = localeCode;
|
|
optionEl.selected = localeCode == initialLocaleCode;
|
|
optionEl.innerText = localeCode;
|
|
localeSelectorEl.appendChild(optionEl);
|
|
});
|
|
|
|
// when the selected option changes, dynamically change the calendar option
|
|
localeSelectorEl.addEventListener('change', function() {
|
|
if (this.value) {
|
|
calendar.setOption('locale', this.value);
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
@endpush
|