making it work but it's sort of a mess

2022-01-10 22:51:06 -08:00
parent 91a01f7b7c
commit 81a7358452
1583 changed files with 26 additions and 4 deletions
@@ -0,0 +1,191 @@
+"use strict";
+
+// Class definition
+var KTGeneralFullCalendarTimezoneDemos = function () {
+    // Private functions
+
+    var exampleTimezone = function () {
+        // Define variables
+        var initialTimeZone = 'local';
+        var timeZoneSelectorEl = document.getElementById('kt_docs_fullcalendar_timezone_selector');
+        var calendarEl = document.getElementById('kt_docs_fullcalendar_timezone');
+        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');
+        var eventsArray = [
+            {
+                title: 'All Day Event',
+                start: YM + '-01',
+                description: 'Toto lorem ipsum dolor sit incid idunt ut',
+                className: "fc-event-danger fc-event-solid-warning"
+            },
+            {
+                title: 'Reporting',
+                start: YM + '-14T13:30:00',
+                description: 'Lorem ipsum dolor incid idunt ut labore',
+                end: YM + '-14',
+                className: "fc-event-success"
+            },
+            {
+                title: 'Company Trip',
+                start: YM + '-02',
+                description: 'Lorem ipsum dolor sit tempor incid',
+                end: YM + '-03',
+                className: "fc-event-primary"
+            },
+            {
+                title: 'ICT Expo 2017 - Product Release',
+                start: YM + '-03',
+                description: 'Lorem ipsum dolor sit tempor inci',
+                end: YM + '-05',
+                className: "fc-event-light fc-event-solid-primary"
+            },
+            {
+                title: 'Dinner',
+                start: YM + '-12',
+                description: 'Lorem ipsum dolor sit amet, conse ctetur',
+                end: YM + '-10'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: YM + '-09T16:00:00',
+                description: 'Lorem ipsum dolor sit ncididunt ut labore',
+                className: "fc-event-danger"
+            },
+            {
+                id: 1000,
+                title: 'Repeating Event',
+                description: 'Lorem ipsum dolor sit amet, labore',
+                start: YM + '-16T16:00:00'
+            },
+            {
+                title: 'Conference',
+                start: YESTERDAY,
+                end: TOMORROW,
+                description: 'Lorem ipsum dolor eius mod tempor labore',
+                className: "fc-event-primary"
+            },
+            {
+                title: 'Meeting',
+                start: TODAY + 'T10:30:00',
+                end: TODAY + 'T12:30:00',
+                description: 'Lorem ipsum dolor eiu idunt ut labore'
+            },
+            {
+                title: 'Lunch',
+                start: TODAY + 'T12:00:00',
+                className: "fc-event-info",
+                description: 'Lorem ipsum dolor sit amet, ut labore'
+            },
+            {
+                title: 'Meeting',
+                start: TODAY + 'T14:30:00',
+                className: "fc-event-warning",
+                description: 'Lorem ipsum conse ctetur adipi scing'
+            },
+            {
+                title: 'Happy Hour',
+                start: TODAY + 'T17:30:00',
+                className: "fc-event-info",
+                description: 'Lorem ipsum dolor sit amet, conse ctetur'
+            },
+            {
+                title: 'Dinner',
+                start: TOMORROW + 'T05:00:00',
+                className: "fc-event-solid-danger fc-event-light",
+                description: 'Lorem ipsum dolor sit ctetur adipi scing'
+            },
+            {
+                title: 'Birthday Party',
+                start: TOMORROW + 'T07:00:00',
+                className: "fc-event-primary",
+                description: 'Lorem ipsum dolor sit amet, scing'
+            },
+            {
+                title: 'Click for Google',
+                url: 'http://google.com/',
+                start: YM + '-28',
+                className: "fc-event-solid-info fc-event-light",
+                description: 'Lorem ipsum dolor sit amet, labore'
+            }
+        ];
+
+        // Initialize the external events -- for more info please visit the official site: https://fullcalendar.io/demos
+        var calendar = new FullCalendar.Calendar(calendarEl, {
+            timeZone: initialTimeZone,
+            headerToolbar: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+            },
+            initialDate: TODAY,
+            navLinks: true, // can click day/week names to navigate views
+            editable: true,
+            selectable: true,
+            dayMaxEvents: true, // allow "more" link when too many events
+
+            eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' },
+            events: eventsArray,
+        });
+
+        calendar.render();
+
+        // when the timezone selector changes, dynamically change the calendar option -- more info on Select2 on Change event: https://select2.org/programmatic-control/events
+        $(timeZoneSelectorEl).on('change', function () {
+            calendar.setOption('timeZone', 'UTC');
+
+            // Remove all events
+            const removeEvents = calendar.getEvents();
+            removeEvents.forEach(event => {
+                event.remove();
+            });
+
+            // Add events with new timezone offset
+            const newEvents = eventsArray;
+            newEvents.forEach(event => {
+                var start;
+                var end;
+
+                if(this.value < 0){
+                    start = moment(event.start).subtract(this.value.replace(/\D/g,''), 'seconds').format(getFormat(event.start));
+                    end = event.end ? moment(event.end).subtract(this.value.replace(/\D/g,''), 'seconds').format(getFormat(event.end)) : start;
+                } else {
+                    start = moment(event.start).add(this.value, 'seconds').format(getFormat(event.start));
+                    end = event.end ? moment(event.end).add(this.value, 'seconds').format(getFormat(event.end)) : start;
+                }               
+
+                calendar.addEvent({
+                    title: event.title,
+                    start: start,
+                    end: end
+                });
+            });
+
+            calendar.render();
+        });
+
+        // Dynamic date format generator
+        const getFormat = (d) => {
+            if(d.includes('T')){
+                return 'YYYY-MM-DDTHH:mm:ss';
+            } else {
+                return 'YYYY-MM-DD';
+            }
+        }
+    }
+
+    return {
+        // Public Functions
+        init: function () {
+            exampleTimezone();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTGeneralFullCalendarTimezoneDemos.init();
+});