1. <script>
2. import axios from "axios";
3. import Vue from "vue";
4. import FullCalendar from '@fullcalendar/vue'
5. import plLocale from "@fullcalendar/core/locales/pl";
6. import bootstrapPlugin from "@fullcalendar/bootstrap";
7. import interactionPlugin from "@fullcalendar/interaction";
8. import dayGridPlugin from "@fullcalendar/daygrid";
9. import timeGridPlugin from "@fullcalendar/timegrid";
10. import Reservation from "./Reservation.vue";
11.  
12. // Sets header for all POST requests to enable CSRF protection.
13. axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
14. axios.defaults.xsrfCookieName = "csrftoken";
15.  
16. const event_status = {
17.     "pending":  "0",
18.     "accepted": "1",
19.     "rejected": "2"
20. };
21.  
22. const event_type = {
23.     "exam":  "0",
24.     "test":  "1",
25.     "event": "2",
26.     "class": "3",
27.     "other": "4",
28.     "special_reservation": "5"
29. };
30.  
31. const event_color = {
32.     "new_event": "#ffc0cb",
33.     "invisible": "#d3bb5a",
34.     "user_is_author": "#8ed35a",
35.     "pending": "#ff0",
36.     "accepted": "#0f0",
37.     "rejected": "#f00",
38.     // Type colors are used to mark events
39.     "type_test":  "#539CDB",
40.     "type_exam":  "#0588FA",
41.     "type_event": "#0423B0",
42.     "type_special_reservation": "#223487",
43.     "type_class": "#121F59"
44. };
45.  
46. async function fetchEvents(fetchInfo) {
47.     let url = new URL("classrooms/terms/", window.location.origin);
48.     url.searchParams.set("start", fetchInfo.start.toISOString());
49.     url.searchParams.set("end", fetchInfo.end.toISOString());
50.  
51.     let room_id = $('#room_selector').val();
52.     if (room_id == "all")
53.         url.searchParams.delete('rooms');
54.     else
55.         url.searchParams.set("rooms", [room_id]);
56.  
57.     let title_author_input = $('#title_author_input').val();
58.     if (title_author_input)
59.         url.searchParams.set("title_author", title_author_input);
60.  
61.     var types = [];
62.     if ($('#exam_checkbox').is(':checked'))                 types.push(event_type.exam);
63.     if ($('#test_checkbox').is(':checked'))                 types.push(event_type.test);
64.     if ($('#event_checkbox').is(':checked'))                types.push(event_type.event);
65.     if ($('#classes_checkbox').is(':checked'))              types.push(event_type.class);
66.     if ($('#other_checkbox').is(':checked'))                types.push(event_type.other);
67.     if ($('#special_reservation_checkbox').is(':checked'))  types.push(event_type.special_reservation);
68.  
69.     if (types.length > 0)
70.         url.searchParams.set("types", types);
71.     else
72.         return [];
73.  
74.     var fetchedEvents = $.getJSON(url, function (data) {
75.         for (var i = 0; i < data.length; i++) {
76.             // Set colors for fetched events
77.             switch (data[i]['type']) {
78.                 case event_type.exam:  data[i]['color'] = event_color.type_exam;  break;
79.                 case event_type.test:  data[i]['color'] = event_color.type_test;  break;
80.                 case event_type.event: data[i]['color'] = event_color.type_event; break;
81.                 case event_type.class: data[i]['color'] = event_color.type_class; break;
82.                 case event_type.other: data[i]['color'] = event_color.type_other; break;
83.                 case event_type.special_reservation: data[i]['color'] = event_color.type_special_reservation; break;
84.             }
85.  
86.             if(data[i]['visible'] == false)
87.                 data[i]['color'] = event_color.invisible;
88.  
89.             switch (data[i]['status']) {
90.                 case event_status.pending: data[i]['borderColor'] = event_color.pending; break;
91.                 case event_status.accepted: data[i]['borderColor'] = event_color.accepted; break;
92.                 case event_status.rejected: data[i]['borderColor'] = event_color.rejected; break;
93.             }
94.         }
95.     });
96.  
97.     return fetchedEvents;
98. }
99.  
100. export default {
101.   components: {
102.     FullCalendar, // make the <FullCalendar> tag available
103.     Reservation
104.   },
105.   data() {
106.     return {
107.     modalShow: true,
108.       calendarOptions: {
109.         plugins: [ interactionPlugin, timeGridPlugin, dayGridPlugin, bootstrapPlugin ],
110.  
111.         // Default settings for FullCalendar
112.         themeSystem: "bootstrap",
113.         eventDisplay: 'block',
114.         initialView: "timeGridWeek",
115.         locale: plLocale,
116.         timeZone: "UTC",
117.         height: "auto",
118.  
119.         // Allow clicking in day and week names, determine time range displayed
120.         navLinks: true,
121.         allDaySlot: false,
122.         slotMinTime: "08:00:00",
123.         slotMaxTime: "22:00:00",
124.         nowIndicator: true,
125.  
126.         // Define which buttons should be displayed for navigation and calendar display types
127.         headerToolbar: {
128.             start: "prev,next today",
129.             center: "title",
130.             end: "timeGridDay,timeGridWeek,dayGridMonth",
131.         },
132.  
133.         // buttonText is a text displayed in "prev" and "next" keys, these are arrows empty inside
134.         buttonText: {
135.             prev: "\u25C1",
136.             next: "\u25B7",
137.         },
138.  
139.         // Display date in format day - full month name - year
140.         titleFormat: {
141.             day: "numeric",
142.             month: "long",
143.             year: "numeric"
144.         },
145.  
146.         // events are fetched from database using function fetchEvents (defined above)
147.         events: fetchEvents,
148.  
149.         // Allow for selecting hours in the calendar to create events, print the block
150.         // showing that event. 'select' and 'eventClick' are references to Vue app
151.         // 'reservation' functions for creating and editing/viewing events.
152.         selectable: true,
153.         selectMirror: true,
154.  
155.         select: this.showCreateModal,
156.       }
157.     }
158.   },
159.    methods: {
160.     showModal(){
161.         console.log("showModal");
162.     },
163.  
164.  
165.     showCreateModal(){
166.         this.$refs.childComponent.writeSth();
167.     },
168.  
169.     showEditModal(){
170.         //this.$broadcast('showEditModal');
171.         //console.log("showEditModal");
172.     },
173.   },
174. }
175. </script>
176. <template>
177.    <div>
178.    <Reservation ref="childComponent"/>
179.   <FullCalendar :options="calendarOptions" />
180.   </div>
181. </template>