1
+ @extends (' core/base::layouts.master' )
2
+
3
+ @section (' content' )
4
+ <div class =" container" >
5
+ <h1 >{{ __ (' calendar::calendar.calendar' ) } } </h1 >
6
+ <a href =" {{ route (' admin.calendar.index' ) } }" class =" btn btn-secondary mb-3" >{{ __ (' calendar::calendar.list_view' ) } } </a >
7
+ <div id =" calendar" ></div >
8
+ </div >
9
+
10
+ <!-- Modal -->
11
+ <div class =" modal fade" id =" taskModal" tabindex =" -1" aria-labelledby =" taskModalLabel" aria-hidden =" true" >
12
+ <div class =" modal-dialog" >
13
+ <div class =" modal-content" >
14
+ <div class =" modal-header" >
15
+ <h5 class =" modal-title" id =" taskModalLabel" >Task Details</h5 >
16
+ <button type =" button" class =" btn-close" data-bs-dismiss =" modal" aria-label =" Close" ></button >
17
+ </div >
18
+ <div class =" modal-body" id =" taskModalBody" >
19
+ <!-- Task details will be injected here -->
20
+ </div >
21
+ <div class =" modal-footer" >
22
+ <a href =" #" id =" editTaskLink" class =" btn btn-primary" >Edit Task</a >
23
+ <button type =" button" class =" btn btn-secondary" data-bs-dismiss =" modal" >Close</button >
24
+ </div >
25
+ </div >
26
+ </div >
27
+ </div >
28
+ @endsection
29
+
30
+ @push (' header' )
31
+ <
link href =
" https://cdn.jsdelivr.net/npm/[email protected] /index.global.min.css" rel =
" stylesheet" >
32
+ @endpush
33
+
34
+ @push (' footer' )
35
+ <
script src =
" https://cdn.jsdelivr.net/npm/[email protected] /index.global.min.js" ></
script >
36
+ <script >
37
+ document .addEventListener (' DOMContentLoaded' , function () {
38
+ var calendarEl = document .getElementById (' calendar' );
39
+ var calendar = new FullCalendar.Calendar (calendarEl, {
40
+ initialView: ' dayGridMonth' ,
41
+ events: {
42
+ url: ' {{ route (' admin.calendar.calendar.events' ) } }' ,
43
+ method: ' GET' ,
44
+ },
45
+ headerToolbar: {
46
+ left: ' prev,next today' ,
47
+ center: ' title' ,
48
+ right: ' dayGridMonth,dayGridWeek,dayGridDay'
49
+ },
50
+ eventClick : function (info ) {
51
+ info .jsEvent .preventDefault ();
52
+ // Show modal with task details
53
+ var event = info .event ;
54
+ var modal = new bootstrap.Modal (document .getElementById (' taskModal' ));
55
+ var body = document .getElementById (' taskModalBody' );
56
+ var editLink = document .getElementById (' editTaskLink' );
57
+ body .innerHTML = `
58
+ <p ><strong >Task Name:</strong > ${ event .title } </p >
59
+ <p ><strong >Date:</strong > ${ event .startStr } </p >
60
+ ` ;
61
+ // If the event id is in the format 'id-YYYYMMDD', extract the id
62
+ var taskId = event .id .split (' -' )[0 ];
63
+ editLink .href = ' {{ url (' admin/calendar' ) } } /' + taskId + ' /edit' ;
64
+ modal .show ();
65
+ }
66
+ });
67
+ calendar .render ();
68
+ });
69
+ </script >
70
+ @endpush
0 commit comments