lavkach3

1
/*========Calender Js=========*/
2
/*==========================*/
3

4
document.addEventListener("DOMContentLoaded", function () {
5
  /*=================*/
6
  //  Calender Date variable
7
  /*=================*/
8
  var newDate = new Date();
9
  function getDynamicMonth() {
10
    getMonthValue = newDate.getMonth();
11
    _getUpdatedMonthValue = getMonthValue + 1;
12
    if (_getUpdatedMonthValue < 10) {
13
      return `0${_getUpdatedMonthValue}`;
14
    } else {
15
      return `${_getUpdatedMonthValue}`;
16
    }
17
  }
18
  /*=================*/
19
  // Calender Modal Elements
20
  /*=================*/
21
  var getModalTitleEl = document.querySelector("#event-title");
22
  var getModalStartDateEl = document.querySelector("#event-start-date");
23
  var getModalEndDateEl = document.querySelector("#event-end-date");
24
  var getModalAddBtnEl = document.querySelector(".btn-add-event");
25
  var getModalUpdateBtnEl = document.querySelector(".btn-update-event");
26
  var calendarsEvents = {
27
    Danger: "danger",
28
    Success: "success",
29
    Primary: "primary",
30
    Warning: "warning",
31
  };
32
  /*=====================*/
33
  // Calendar Elements and options
34
  /*=====================*/
35
  var calendarEl = document.querySelector("#calendar");
36
  var checkWidowWidth = function () {
37
    if (window.innerWidth <= 1199) {
38
      return true;
39
    } else {
40
      return false;
41
    }
42
  };
43
  var calendarHeaderToolbar = {
44
    left: "prev next addEventButton",
45
    center: "title",
46
    right: "dayGridMonth,timeGridWeek,timeGridDay",
47
  };
48
  var calendarEventsList = [
49
    {
50
      id: 1,
51
      title: "Event Conf.",
52
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-01`,
53
      extendedProps: { calendar: "Danger" },
54
    },
55
    {
56
      id: 2,
57
      title: "Seminar #4",
58
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-07`,
59
      end: `${newDate.getFullYear()}-${getDynamicMonth()}-10`,
60
      extendedProps: { calendar: "Success" },
61
    },
62
    {
63
      groupId: "999",
64
      id: 3,
65
      title: "Meeting #5",
66
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-09T16:00:00`,
67
      extendedProps: { calendar: "Primary" },
68
    },
69
    {
70
      groupId: "999",
71
      id: 4,
72
      title: "Submission #1",
73
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-16T16:00:00`,
74
      extendedProps: { calendar: "Warning" },
75
    },
76
    {
77
      id: 5,
78
      title: "Seminar #6",
79
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-11`,
80
      end: `${newDate.getFullYear()}-${getDynamicMonth()}-13`,
81
      extendedProps: { calendar: "Danger" },
82
    },
83
    {
84
      id: 6,
85
      title: "Meeting 3",
86
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T10:30:00`,
87
      end: `${newDate.getFullYear()}-${getDynamicMonth()}-12T12:30:00`,
88
      extendedProps: { calendar: "Success" },
89
    },
90
    {
91
      id: 7,
92
      title: "Meetup #",
93
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T12:00:00`,
94
      extendedProps: { calendar: "Primary" },
95
    },
96
    {
97
      id: 8,
98
      title: "Submission",
99
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-12T14:30:00`,
100
      extendedProps: { calendar: "Warning" },
101
    },
102
    {
103
      id: 9,
104
      title: "Attend event",
105
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-13T07:00:00`,
106
      extendedProps: { calendar: "Success" },
107
    },
108
    {
109
      id: 10,
110
      title: "Project submission #2",
111
      start: `${newDate.getFullYear()}-${getDynamicMonth()}-28`,
112
      extendedProps: { calendar: "Primary" },
113
    },
114
  ];
115
  /*=====================*/
116
  // Calendar Select fn.
117
  /*=====================*/
118
  var calendarSelect = function (info) {
119
    getModalAddBtnEl.style.display = "block";
120
    getModalUpdateBtnEl.style.display = "none";
121
    myModal.show();
122
    getModalStartDateEl.value = info.startStr;
123
    getModalEndDateEl.value = info.endStr;
124
  };
125
  /*=====================*/
126
  // Calendar AddEvent fn.
127
  /*=====================*/
128
  var calendarAddEvent = function () {
129
    var currentDate = new Date();
130
    var dd = String(currentDate.getDate()).padStart(2, "0");
131
    var mm = String(currentDate.getMonth() + 1).padStart(2, "0"); //January is 0!
132
    var yyyy = currentDate.getFullYear();
133
    var combineDate = `${yyyy}-${mm}-${dd}T00:00:00`;
134
    getModalAddBtnEl.style.display = "block";
135
    getModalUpdateBtnEl.style.display = "none";
136
    myModal.show();
137
    getModalStartDateEl.value = combineDate;
138
  };
139

140
  /*=====================*/
141
  // Calender Event Function
142
  /*=====================*/
143
  var calendarEventClick = function (info) {
144
    var eventObj = info.event;
145

146
    if (eventObj.url) {
147
      window.open(eventObj.url);
148

149
      info.jsEvent.preventDefault();
150
    } else {
151
      var getModalEventId = eventObj._def.publicId;
152
      var getModalEventLevel = eventObj._def.extendedProps["calendar"];
153
      var getModalCheckedRadioBtnEl = document.querySelector(
154
        `input[value="${getModalEventLevel}"]`
155
      );
156

157
      getModalTitleEl.value = eventObj.title;
158
      getModalStartDateEl.value = eventObj.startStr.slice(0, 10);
159
      getModalEndDateEl.value = eventObj.endStr.slice(0, 10);
160
      getModalCheckedRadioBtnEl.checked = true;
161
      getModalUpdateBtnEl.setAttribute(
162
        "data-fc-event-public-id",
163
        getModalEventId
164
      );
165
      getModalAddBtnEl.style.display = "none";
166
      getModalUpdateBtnEl.style.display = "block";
167
      myModal.show();
168
    }
169
  };
170

171
  /*=====================*/
172
  // Active Calender
173
  /*=====================*/
174
  var calendar = new FullCalendar.Calendar(calendarEl, {
175
    selectable: true,
176
    height: checkWidowWidth() ? 900 : 1052,
177
    initialView: checkWidowWidth() ? "listWeek" : "dayGridMonth",
178
    initialDate: `${newDate.getFullYear()}-${getDynamicMonth()}-07`,
179
    headerToolbar: calendarHeaderToolbar,
180
    events: calendarEventsList,
181
    select: calendarSelect,
182
    unselect: function () {
183
      console.log("unselected");
184
    },
185
    customButtons: {
186
      addEventButton: {
187
        text: "Add Event",
188
        click: calendarAddEvent,
189
      },
190
    },
191
    eventClassNames: function ({ event: calendarEvent }) {
192
      const getColorValue =
193
        calendarsEvents[calendarEvent._def.extendedProps.calendar];
194
      return ["event-fc-color fc-bg-" + getColorValue];
195
    },
196

197
    eventClick: calendarEventClick,
198
    windowResize: function (arg) {
199
      if (checkWidowWidth()) {
200
        calendar.changeView("listWeek");
201
        calendar.setOption("height", 900);
202
      } else {
203
        calendar.changeView("dayGridMonth");
204
        calendar.setOption("height", 1052);
205
      }
206
    },
207
  });
208

209
  /*=====================*/
210
  // Update Calender Event
211
  /*=====================*/
212
  getModalUpdateBtnEl.addEventListener("click", function () {
213
    var getPublicID = this.dataset.fcEventPublicId;
214
    var getTitleUpdatedValue = getModalTitleEl.value;
215
    var setModalStartDateValue = getModalStartDateEl.value;
216
    var setModalEndDateValue = getModalEndDateEl.value;
217
    var getEvent = calendar.getEventById(getPublicID);
218
    var getModalUpdatedCheckedRadioBtnEl = document.querySelector(
219
      'input[name="event-level"]:checked'
220
    );
221

222
    var getModalUpdatedCheckedRadioBtnValue =
223
      getModalUpdatedCheckedRadioBtnEl !== null
224
        ? getModalUpdatedCheckedRadioBtnEl.value
225
        : "";
226

227
    getEvent.setProp("title", getTitleUpdatedValue);
228
    getEvent.setDates(setModalStartDateValue, setModalEndDateValue);
229
    getEvent.setExtendedProp("calendar", getModalUpdatedCheckedRadioBtnValue);
230
    myModal.hide();
231
  });
232
  /*=====================*/
233
  // Add Calender Event
234
  /*=====================*/
235
  getModalAddBtnEl.addEventListener("click", function () {
236
    var getModalCheckedRadioBtnEl = document.querySelector(
237
      'input[name="event-level"]:checked'
238
    );
239

240
    var getTitleValue = getModalTitleEl.value;
241
    var setModalStartDateValue = getModalStartDateEl.value;
242
    var setModalEndDateValue = getModalEndDateEl.value;
243
    var getModalCheckedRadioBtnValue =
244
      getModalCheckedRadioBtnEl !== null ? getModalCheckedRadioBtnEl.value : "";
245

246
    calendar.addEvent({
247
      id: 12,
248
      title: getTitleValue,
249
      start: setModalStartDateValue,
250
      end: setModalEndDateValue,
251
      allDay: true,
252
      extendedProps: { calendar: getModalCheckedRadioBtnValue },
253
    });
254
    myModal.hide();
255
  });
256
  /*=====================*/
257
  // Calendar Init
258
  /*=====================*/
259
  calendar.render();
260
  var myModal = new bootstrap.Modal(document.getElementById("eventModal"));
261
  var modalToggle = document.querySelector(".fc-addEventButton-button ");
262
  document
263
    .getElementById("eventModal")
264
    .addEventListener("hidden.bs.modal", function (event) {
265
      getModalTitleEl.value = "";
266
      getModalStartDateEl.value = "";
267
      getModalEndDateEl.value = "";
268
      var getModalIfCheckedRadioBtnEl = document.querySelector(
269
        'input[name="event-level"]:checked'
270
      );
271
      if (getModalIfCheckedRadioBtnEl !== null) {
272
        getModalIfCheckedRadioBtnEl.checked = false;
273
      }
274
    });
275
});
276