Server IP : 150.95.80.236 / Your IP : 18.224.58.33 Web Server : Apache System : Linux host-150-95-80-236 3.10.0-1160.105.1.el7.x86_64 #1 SMP Thu Dec 7 15:39:45 UTC 2023 x86_64 User : social-telecare ( 10000) PHP Version : 7.4.33 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/pcu.in.th/uat.pcu.in.th/demo15/src/js/custom/apps/calendar/ |
Upload File : |
"use strict"; // Class definition var KTAppCalendar = function () { // Shared variables // Calendar variables var calendar; var data = { id: '', eventName: '', eventDescription: '', eventLocation: '', startDate: '', endDate: '', allDay: false }; var popover; var popoverState = 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, { 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) { hidePopovers(); formatArgs(arg); handleNewEvent(); }, // Click event --- more info: https://fullcalendar.io/docs/eventClick eventClick: function (arg) { hidePopovers(); 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(); }, // MouseEnter event --- more info: https://fullcalendar.io/docs/eventMouseEnter eventMouseEnter: 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 }); // Show popover preview initPopovers(arg.el); }, 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' } ], // Reset popovers when changing calendar views --- more info: https://fullcalendar.io/docs/datesSet datesSet: function(){ hidePopovers(); } }); calendar.render(); } // Initialize popovers --- more info: https://getbootstrap.com/docs/4.0/components/popovers/ const initPopovers = (element) => { hidePopovers(); // Generate popover content const startDate = data.allDay ? moment(data.startDate).format('Do MMM, YYYY') : moment(data.startDate).format('Do MMM, YYYY - h:mm a'); const endDate = data.allDay ? moment(data.endDate).format('Do MMM, YYYY') : moment(data.endDate).format('Do MMM, YYYY - h:mm a'); const popoverHtml = '<div class="fw-bolder mb-2">' + data.eventName + '</div><div class="fs-7"><span class="fw-bold">Start:</span> ' + startDate + '</div><div class="fs-7 mb-4"><span class="fw-bold">End:</span> ' + endDate + '</div><div id="kt_calendar_event_view_button" type="button" class="btn btn-sm btn-light-primary">View More</div>'; // Popover options var options = { container: 'body', trigger: 'manual', boundary: 'window', placement: 'auto', dismiss: true, html: true, title: 'Event Summary', content: popoverHtml, } // Initialize popover popover = KTApp.initBootstrapPopover(element, options); // Show popover popover.show(); // Update popover state popoverState = true; // Open view event modal handleViewButton(); } // Hide active popovers const hidePopovers = () => { if (popoverState) { popover.dispose(); popoverState = false; } } // 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 => { hidePopovers(); // 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(); });