initial commit
This commit is contained in:
@@ -0,0 +1,831 @@
|
||||
"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();
|
||||
});
|
||||
Reference in New Issue
Block a user