832 lines
32 KiB
JavaScript
832 lines
32 KiB
JavaScript
"use strict";
|
|
|
|
// Class definition
|
|
var KTAppCalendar = function () {
|
|
// Shared variables
|
|
// Calendar variables
|
|
var calendar;
|
|
var data = {
|
|
id: '',
|
|
eventName: '',
|
|
eventDescription: '',
|
|
eventLocation: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
allDay: false
|
|
};
|
|
|
|
// Add event variables
|
|
var eventName;
|
|
var eventDescription;
|
|
var eventLocation;
|
|
var startDatepicker;
|
|
var startFlatpickr;
|
|
var endDatepicker;
|
|
var endFlatpickr;
|
|
var startTimepicker;
|
|
var startTimeFlatpickr;
|
|
var endTimepicker
|
|
var endTimeFlatpickr;
|
|
var modal;
|
|
var modalTitle;
|
|
var form;
|
|
var validator;
|
|
var addButton;
|
|
var submitButton;
|
|
var cancelButton;
|
|
var closeButton;
|
|
|
|
// View event variables
|
|
var viewEventName;
|
|
var viewAllDay;
|
|
var viewEventDescription;
|
|
var viewEventLocation;
|
|
var viewStartDate;
|
|
var viewEndDate;
|
|
var viewModal;
|
|
var viewEditButton;
|
|
var viewDeleteButton;
|
|
|
|
|
|
// Private functions
|
|
var initCalendarApp = function () {
|
|
// Define variables
|
|
var calendarEl = document.getElementById('kt_calendar_app');
|
|
var todayDate = moment().startOf('day');
|
|
var YM = todayDate.format('YYYY-MM');
|
|
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
|
|
var TODAY = todayDate.format('YYYY-MM-DD');
|
|
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
|
|
|
|
// Init calendar --- more info: https://fullcalendar.io/docs/initialize-globals
|
|
calendar = new FullCalendar.Calendar(calendarEl, {
|
|
//locale: 'es', // Set local --- more info: https://fullcalendar.io/docs/locale
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
|
},
|
|
initialDate: TODAY,
|
|
navLinks: true, // can click day/week names to navigate views
|
|
selectable: true,
|
|
selectMirror: true,
|
|
|
|
// Select dates action --- more info: https://fullcalendar.io/docs/select-callback
|
|
select: function (arg) {
|
|
formatArgs(arg);
|
|
handleNewEvent();
|
|
},
|
|
|
|
// Click event --- more info: https://fullcalendar.io/docs/eventClick
|
|
eventClick: function (arg) {
|
|
formatArgs({
|
|
id: arg.event.id,
|
|
title: arg.event.title,
|
|
description: arg.event.extendedProps.description,
|
|
location: arg.event.extendedProps.location,
|
|
startStr: arg.event.startStr,
|
|
endStr: arg.event.endStr,
|
|
allDay: arg.event.allDay
|
|
});
|
|
|
|
handleViewEvent();
|
|
},
|
|
|
|
editable: true,
|
|
dayMaxEvents: true, // allow "more" link when too many events
|
|
events: [
|
|
{
|
|
id: uid(),
|
|
title: 'All Day Event',
|
|
start: YM + '-01',
|
|
end: YM + '-02',
|
|
description: 'Toto lorem ipsum dolor sit incid idunt ut',
|
|
className: "fc-event-danger fc-event-solid-warning",
|
|
location: 'Federation Square'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Reporting',
|
|
start: YM + '-14T13:30:00',
|
|
description: 'Lorem ipsum dolor incid idunt ut labore',
|
|
end: YM + '-14T14:30:00',
|
|
className: "fc-event-success",
|
|
location: 'Meeting Room 7.03'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Company Trip',
|
|
start: YM + '-02',
|
|
description: 'Lorem ipsum dolor sit tempor incid',
|
|
end: YM + '-03',
|
|
className: "fc-event-primary",
|
|
location: 'Seoul, Korea'
|
|
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'ICT Expo 2021 - Product Release',
|
|
start: YM + '-03',
|
|
description: 'Lorem ipsum dolor sit tempor inci',
|
|
end: YM + '-05',
|
|
className: "fc-event-light fc-event-solid-primary",
|
|
location: 'Melbourne Exhibition Hall'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Dinner',
|
|
start: YM + '-12',
|
|
description: 'Lorem ipsum dolor sit amet, conse ctetur',
|
|
end: YM + '-13',
|
|
location: 'Squire\'s Loft'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Repeating Event',
|
|
start: YM + '-09T16:00:00',
|
|
end: YM + '-09T17:00:00',
|
|
description: 'Lorem ipsum dolor sit ncididunt ut labore',
|
|
className: "fc-event-danger",
|
|
location: 'General Area'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Repeating Event',
|
|
description: 'Lorem ipsum dolor sit amet, labore',
|
|
start: YM + '-16T16:00:00',
|
|
end: YM + '-16T17:00:00',
|
|
location: 'General Area'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Conference',
|
|
start: YESTERDAY,
|
|
end: TOMORROW,
|
|
description: 'Lorem ipsum dolor eius mod tempor labore',
|
|
className: "fc-event-primary",
|
|
location: 'Conference Hall A'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Meeting',
|
|
start: TODAY + 'T10:30:00',
|
|
end: TODAY + 'T12:30:00',
|
|
description: 'Lorem ipsum dolor eiu idunt ut labore',
|
|
location: 'Meeting Room 11.06'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Lunch',
|
|
start: TODAY + 'T12:00:00',
|
|
end: TODAY + 'T14:00:00',
|
|
className: "fc-event-info",
|
|
description: 'Lorem ipsum dolor sit amet, ut labore',
|
|
location: 'Cafeteria'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Meeting',
|
|
start: TODAY + 'T14:30:00',
|
|
end: TODAY + 'T15:30:00',
|
|
className: "fc-event-warning",
|
|
description: 'Lorem ipsum conse ctetur adipi scing',
|
|
location: 'Meeting Room 11.10'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Happy Hour',
|
|
start: TODAY + 'T17:30:00',
|
|
end: TODAY + 'T21:30:00',
|
|
className: "fc-event-info",
|
|
description: 'Lorem ipsum dolor sit amet, conse ctetur',
|
|
location: 'The English Pub'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Dinner',
|
|
start: TOMORROW + 'T18:00:00',
|
|
end: TOMORROW + 'T21:00:00',
|
|
className: "fc-event-solid-danger fc-event-light",
|
|
description: 'Lorem ipsum dolor sit ctetur adipi scing',
|
|
location: 'New York Steakhouse'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Birthday Party',
|
|
start: TOMORROW + 'T12:00:00',
|
|
end: TOMORROW + 'T14:00:00',
|
|
className: "fc-event-primary",
|
|
description: 'Lorem ipsum dolor sit amet, scing',
|
|
location: 'The English Pub'
|
|
},
|
|
{
|
|
id: uid(),
|
|
title: 'Site visit',
|
|
start: YM + '-28',
|
|
end: YM + '-29',
|
|
className: "fc-event-solid-info fc-event-light",
|
|
description: 'Lorem ipsum dolor sit amet, labore',
|
|
location: '271, Spring Street'
|
|
}
|
|
],
|
|
|
|
// Handle changing calendar views --- more info: https://fullcalendar.io/docs/datesSet
|
|
datesSet: function(){
|
|
// do some stuff
|
|
}
|
|
});
|
|
|
|
calendar.render();
|
|
}
|
|
|
|
// Init validator
|
|
const initValidator = () => {
|
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
|
validator = FormValidation.formValidation(
|
|
form,
|
|
{
|
|
fields: {
|
|
'calendar_event_name': {
|
|
validators: {
|
|
notEmpty: {
|
|
message: 'Event name is required'
|
|
}
|
|
}
|
|
},
|
|
'calendar_event_start_date': {
|
|
validators: {
|
|
notEmpty: {
|
|
message: 'Start date is required'
|
|
}
|
|
}
|
|
},
|
|
'calendar_event_end_date': {
|
|
validators: {
|
|
notEmpty: {
|
|
message: 'End date is required'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
plugins: {
|
|
trigger: new FormValidation.plugins.Trigger(),
|
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
|
rowSelector: '.fv-row',
|
|
eleInvalidClass: '',
|
|
eleValidClass: ''
|
|
})
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
// Initialize datepickers --- more info: https://flatpickr.js.org/
|
|
const initDatepickers = () => {
|
|
startFlatpickr = flatpickr(startDatepicker, {
|
|
enableTime: false,
|
|
dateFormat: "Y-m-d",
|
|
});
|
|
|
|
endFlatpickr = flatpickr(endDatepicker, {
|
|
enableTime: false,
|
|
dateFormat: "Y-m-d",
|
|
});
|
|
|
|
startTimeFlatpickr = flatpickr(startTimepicker, {
|
|
enableTime: true,
|
|
noCalendar: true,
|
|
dateFormat: "H:i",
|
|
});
|
|
|
|
endTimeFlatpickr = flatpickr(endTimepicker, {
|
|
enableTime: true,
|
|
noCalendar: true,
|
|
dateFormat: "H:i",
|
|
});
|
|
}
|
|
|
|
// Handle add button
|
|
const handleAddButton = () => {
|
|
addButton.addEventListener('click', e => {
|
|
// Reset form data
|
|
data = {
|
|
id: '',
|
|
eventName: '',
|
|
eventDescription: '',
|
|
startDate: new Date(),
|
|
endDate: new Date(),
|
|
allDay: false
|
|
};
|
|
handleNewEvent();
|
|
});
|
|
}
|
|
|
|
// Handle add new event
|
|
const handleNewEvent = () => {
|
|
// Update modal title
|
|
modalTitle.innerText = "Add a New Event";
|
|
|
|
modal.show();
|
|
|
|
// Select datepicker wrapper elements
|
|
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
|
|
|
|
// Handle all day toggle
|
|
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
|
|
allDayToggle.addEventListener('click', e => {
|
|
if (e.target.checked) {
|
|
datepickerWrappers.forEach(dw => {
|
|
dw.classList.add('d-none');
|
|
});
|
|
} else {
|
|
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
|
|
datepickerWrappers.forEach(dw => {
|
|
dw.classList.remove('d-none');
|
|
});
|
|
}
|
|
});
|
|
|
|
populateForm(data);
|
|
|
|
// Handle submit form
|
|
submitButton.addEventListener('click', function (e) {
|
|
// Prevent default button action
|
|
e.preventDefault();
|
|
|
|
// Validate form before submit
|
|
if (validator) {
|
|
validator.validate().then(function (status) {
|
|
console.log('validated!');
|
|
|
|
if (status == 'Valid') {
|
|
// Show loading indication
|
|
submitButton.setAttribute('data-kt-indicator', 'on');
|
|
|
|
// Disable submit button whilst loading
|
|
submitButton.disabled = true;
|
|
|
|
// Simulate form submission
|
|
setTimeout(function () {
|
|
// Simulate form submission
|
|
submitButton.removeAttribute('data-kt-indicator');
|
|
|
|
// Show popup confirmation
|
|
Swal.fire({
|
|
text: "New event added to calendar!",
|
|
icon: "success",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary"
|
|
}
|
|
}).then(function (result) {
|
|
if (result.isConfirmed) {
|
|
modal.hide();
|
|
|
|
// Enable submit button after loading
|
|
submitButton.disabled = false;
|
|
|
|
// Detect if is all day event
|
|
let allDayEvent = false;
|
|
if (allDayToggle.checked) { allDayEvent = true; }
|
|
if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
|
|
|
|
// Merge date & time
|
|
var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
|
|
var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
|
|
if (!allDayEvent) {
|
|
const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
|
|
const endDate = startDate;
|
|
const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
|
|
const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
|
|
|
|
startDateTime = startDate + 'T' + startTime;
|
|
endDateTime = endDate + 'T' + endTime;
|
|
}
|
|
|
|
// Add new event to calendar
|
|
calendar.addEvent({
|
|
id: uid(),
|
|
title: eventName.value,
|
|
description: eventDescription.value,
|
|
location: eventLocation.value,
|
|
start: startDateTime,
|
|
end: endDateTime,
|
|
allDay: allDayEvent
|
|
});
|
|
calendar.render();
|
|
|
|
// Reset form for demo purposes only
|
|
form.reset();
|
|
}
|
|
});
|
|
|
|
//form.submit(); // Submit form
|
|
}, 2000);
|
|
} else {
|
|
// Show popup warning
|
|
Swal.fire({
|
|
text: "Sorry, looks like there are some errors detected, please try again.",
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary"
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle edit event
|
|
const handleEditEvent = () => {
|
|
// Update modal title
|
|
modalTitle.innerText = "Edit an Event";
|
|
|
|
modal.show();
|
|
|
|
// Select datepicker wrapper elements
|
|
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
|
|
|
|
// Handle all day toggle
|
|
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
|
|
allDayToggle.addEventListener('click', e => {
|
|
if (e.target.checked) {
|
|
datepickerWrappers.forEach(dw => {
|
|
dw.classList.add('d-none');
|
|
});
|
|
} else {
|
|
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
|
|
datepickerWrappers.forEach(dw => {
|
|
dw.classList.remove('d-none');
|
|
});
|
|
}
|
|
});
|
|
|
|
populateForm(data);
|
|
|
|
// Handle submit form
|
|
submitButton.addEventListener('click', function (e) {
|
|
// Prevent default button action
|
|
e.preventDefault();
|
|
|
|
// Validate form before submit
|
|
if (validator) {
|
|
validator.validate().then(function (status) {
|
|
console.log('validated!');
|
|
|
|
if (status == 'Valid') {
|
|
// Show loading indication
|
|
submitButton.setAttribute('data-kt-indicator', 'on');
|
|
|
|
// Disable submit button whilst loading
|
|
submitButton.disabled = true;
|
|
|
|
// Simulate form submission
|
|
setTimeout(function () {
|
|
// Simulate form submission
|
|
submitButton.removeAttribute('data-kt-indicator');
|
|
|
|
// Show popup confirmation
|
|
Swal.fire({
|
|
text: "New event added to calendar!",
|
|
icon: "success",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary"
|
|
}
|
|
}).then(function (result) {
|
|
if (result.isConfirmed) {
|
|
modal.hide();
|
|
|
|
// Enable submit button after loading
|
|
submitButton.disabled = false;
|
|
|
|
// Remove old event
|
|
calendar.getEventById(data.id).remove();
|
|
|
|
// Detect if is all day event
|
|
let allDayEvent = false;
|
|
if (allDayToggle.checked) { allDayEvent = true; }
|
|
if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
|
|
|
|
// Merge date & time
|
|
var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
|
|
var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
|
|
if (!allDayEvent) {
|
|
const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
|
|
const endDate = startDate;
|
|
const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
|
|
const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
|
|
|
|
startDateTime = startDate + 'T' + startTime;
|
|
endDateTime = endDate + 'T' + endTime;
|
|
}
|
|
|
|
// Add new event to calendar
|
|
calendar.addEvent({
|
|
id: uid(),
|
|
title: eventName.value,
|
|
description: eventDescription.value,
|
|
location: eventLocation.value,
|
|
start: startDateTime,
|
|
end: endDateTime,
|
|
allDay: allDayEvent
|
|
});
|
|
calendar.render();
|
|
|
|
// Reset form for demo purposes only
|
|
form.reset();
|
|
}
|
|
});
|
|
|
|
//form.submit(); // Submit form
|
|
}, 2000);
|
|
} else {
|
|
// Show popup warning
|
|
Swal.fire({
|
|
text: "Sorry, looks like there are some errors detected, please try again.",
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary"
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle view event
|
|
const handleViewEvent = () => {
|
|
viewModal.show();
|
|
|
|
// Detect all day event
|
|
var eventNameMod;
|
|
var startDateMod;
|
|
var endDateMod;
|
|
|
|
// Generate labels
|
|
if (data.allDay) {
|
|
eventNameMod = 'All Day';
|
|
startDateMod = moment(data.startDate).format('Do MMM, YYYY');
|
|
endDateMod = moment(data.endDate).format('Do MMM, YYYY');
|
|
} else {
|
|
eventNameMod = '';
|
|
startDateMod = moment(data.startDate).format('Do MMM, YYYY - h:mm a');
|
|
endDateMod = moment(data.endDate).format('Do MMM, YYYY - h:mm a');
|
|
}
|
|
|
|
// Populate view data
|
|
viewEventName.innerText = data.eventName;
|
|
viewAllDay.innerText = eventNameMod;
|
|
viewEventDescription.innerText = data.eventDescription ? data.eventDescription : '--';
|
|
viewEventLocation.innerText = data.eventLocation ? data.eventLocation : '--';
|
|
viewStartDate.innerText = startDateMod;
|
|
viewEndDate.innerText = endDateMod;
|
|
}
|
|
|
|
// Handle delete event
|
|
const handleDeleteEvent = () => {
|
|
viewDeleteButton.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
|
|
Swal.fire({
|
|
text: "Are you sure you would like to delete this event?",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Yes, delete it!",
|
|
cancelButtonText: "No, return",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
cancelButton: "btn btn-active-light"
|
|
}
|
|
}).then(function (result) {
|
|
if (result.value) {
|
|
calendar.getEventById(data.id).remove();
|
|
|
|
viewModal.hide(); // Hide modal
|
|
} else if (result.dismiss === 'cancel') {
|
|
Swal.fire({
|
|
text: "Your event was not deleted!.",
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Handle edit button
|
|
const handleEditButton = () => {
|
|
viewEditButton.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
|
|
viewModal.hide();
|
|
handleEditEvent();
|
|
});
|
|
}
|
|
|
|
// Handle cancel button
|
|
const handleCancelButton = () => {
|
|
// Edit event modal cancel button
|
|
cancelButton.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
Swal.fire({
|
|
text: "Are you sure you would like to cancel?",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Yes, cancel it!",
|
|
cancelButtonText: "No, return",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
cancelButton: "btn btn-active-light"
|
|
}
|
|
}).then(function (result) {
|
|
if (result.value) {
|
|
form.reset(); // Reset form
|
|
modal.hide(); // Hide modal
|
|
} else if (result.dismiss === 'cancel') {
|
|
Swal.fire({
|
|
text: "Your form has not been cancelled!.",
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Handle close button
|
|
const handleCloseButton = () => {
|
|
// Edit event modal close button
|
|
closeButton.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
Swal.fire({
|
|
text: "Are you sure you would like to cancel?",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Yes, cancel it!",
|
|
cancelButtonText: "No, return",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
cancelButton: "btn btn-active-light"
|
|
}
|
|
}).then(function (result) {
|
|
if (result.value) {
|
|
form.reset(); // Reset form
|
|
modal.hide(); // Hide modal
|
|
} else if (result.dismiss === 'cancel') {
|
|
Swal.fire({
|
|
text: "Your form has not been cancelled!.",
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Handle view button
|
|
const handleViewButton = () => {
|
|
const viewButton = document.querySelector('#kt_calendar_event_view_button');
|
|
viewButton.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
|
|
hidePopovers();
|
|
handleViewEvent();
|
|
});
|
|
}
|
|
|
|
// Helper functions
|
|
|
|
// Reset form validator on modal close
|
|
const resetFormValidator = (element) => {
|
|
// Target modal hidden event --- For more info: https://getbootstrap.com/docs/5.0/components/modal/#events
|
|
element.addEventListener('hidden.bs.modal', e => {
|
|
if (validator) {
|
|
// Reset form validator. For more info: https://formvalidation.io/guide/api/reset-form
|
|
validator.resetForm(true);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Populate form
|
|
const populateForm = () => {
|
|
eventName.value = data.eventName ? data.eventName : '';
|
|
eventDescription.value = data.eventDescription ? data.eventDescription : '';
|
|
eventLocation.value = data.eventLocation ? data.eventLocation : '';
|
|
startFlatpickr.setDate(data.startDate, true, 'Y-m-d');
|
|
|
|
// Handle null end dates
|
|
const endDate = data.endDate ? data.endDate : moment(data.startDate).format();
|
|
endFlatpickr.setDate(endDate, true, 'Y-m-d');
|
|
|
|
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
|
|
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
|
|
if (data.allDay) {
|
|
allDayToggle.checked = true;
|
|
datepickerWrappers.forEach(dw => {
|
|
dw.classList.add('d-none');
|
|
});
|
|
} else {
|
|
startTimeFlatpickr.setDate(data.startDate, true, 'Y-m-d H:i');
|
|
endTimeFlatpickr.setDate(data.endDate, true, 'Y-m-d H:i');
|
|
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
|
|
allDayToggle.checked = false;
|
|
datepickerWrappers.forEach(dw => {
|
|
dw.classList.remove('d-none');
|
|
});
|
|
}
|
|
}
|
|
|
|
// Format FullCalendar reponses
|
|
const formatArgs = (res) => {
|
|
data.id = res.id;
|
|
data.eventName = res.title;
|
|
data.eventDescription = res.description;
|
|
data.eventLocation = res.location;
|
|
data.startDate = res.startStr;
|
|
data.endDate = res.endStr;
|
|
data.allDay = res.allDay;
|
|
}
|
|
|
|
// Generate unique IDs for events
|
|
const uid = () => {
|
|
return Date.now().toString() + Math.floor(Math.random() * 1000).toString();
|
|
}
|
|
|
|
return {
|
|
// Public Functions
|
|
init: function () {
|
|
// Define variables
|
|
// Add event modal
|
|
const element = document.getElementById('kt_modal_add_event');
|
|
form = element.querySelector('#kt_modal_add_event_form');
|
|
eventName = form.querySelector('[name="calendar_event_name"]');
|
|
eventDescription = form.querySelector('[name="calendar_event_description"]');
|
|
eventLocation = form.querySelector('[name="calendar_event_location"]');
|
|
startDatepicker = form.querySelector('#kt_calendar_datepicker_start_date');
|
|
endDatepicker = form.querySelector('#kt_calendar_datepicker_end_date');
|
|
startTimepicker = form.querySelector('#kt_calendar_datepicker_start_time');
|
|
endTimepicker = form.querySelector('#kt_calendar_datepicker_end_time');
|
|
addButton = document.querySelector('[data-kt-calendar="add"]');
|
|
submitButton = form.querySelector('#kt_modal_add_event_submit');
|
|
cancelButton = form.querySelector('#kt_modal_add_event_cancel');
|
|
closeButton = element.querySelector('#kt_modal_add_event_close');
|
|
modalTitle = form.querySelector('[data-kt-calendar="title"]');
|
|
modal = new bootstrap.Modal(element);
|
|
|
|
// View event modal
|
|
const viewElement = document.getElementById('kt_modal_view_event');
|
|
viewModal = new bootstrap.Modal(viewElement);
|
|
viewEventName = viewElement.querySelector('[data-kt-calendar="event_name"]');
|
|
viewAllDay = viewElement.querySelector('[data-kt-calendar="all_day"]');
|
|
viewEventDescription = viewElement.querySelector('[data-kt-calendar="event_description"]');
|
|
viewEventLocation = viewElement.querySelector('[data-kt-calendar="event_location"]');
|
|
viewStartDate = viewElement.querySelector('[data-kt-calendar="event_start_date"]');
|
|
viewEndDate = viewElement.querySelector('[data-kt-calendar="event_end_date"]');
|
|
viewEditButton = viewElement.querySelector('#kt_modal_view_event_edit');
|
|
viewDeleteButton = viewElement.querySelector('#kt_modal_view_event_delete');
|
|
|
|
initCalendarApp();
|
|
initValidator();
|
|
initDatepickers();
|
|
handleEditButton();
|
|
handleAddButton();
|
|
handleDeleteEvent();
|
|
handleCancelButton();
|
|
handleCloseButton();
|
|
resetFormValidator(element);
|
|
}
|
|
};
|
|
}();
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTAppCalendar.init();
|
|
});
|