adding files of assets
This commit is contained in:
Arjun Patel
@@ -0,0 +1,93 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGeneralFullCalendarEventsDemos = function() {
|
||||
// Private functions
|
||||
|
||||
var exampleBackgroundEvents = function() {
|
||||
// Define colors
|
||||
var green = KTUtil.getCssVariableValue('--bs-active-success');
|
||||
var red = KTUtil.getCssVariableValue('--bs-active-danger');
|
||||
|
||||
// Initialize Fullcalendar -- for more info please visit the official site: https://fullcalendar.io/demos
|
||||
var calendarEl = document.getElementById('kt_docs_fullcalendar_background_events');
|
||||
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
||||
},
|
||||
initialDate: '2020-09-12',
|
||||
navLinks: true, // can click day/week names to navigate views
|
||||
businessHours: true, // display business hours
|
||||
editable: true,
|
||||
selectable: true,
|
||||
events: [{
|
||||
title: 'Business Lunch',
|
||||
start: '2020-09-03T13:00:00',
|
||||
constraint: 'businessHours'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2020-09-13T11:00:00',
|
||||
constraint: 'availableForMeeting', // defined below
|
||||
color: green
|
||||
},
|
||||
{
|
||||
title: 'Conference',
|
||||
start: '2020-09-18',
|
||||
end: '2020-09-20'
|
||||
},
|
||||
{
|
||||
title: 'Party',
|
||||
start: '2020-09-29T20:00:00'
|
||||
},
|
||||
|
||||
// areas where "Meeting" must be dropped
|
||||
{
|
||||
groupId: 'availableForMeeting',
|
||||
start: '2020-09-11',
|
||||
end: '2020-09-11',
|
||||
display: 'background',
|
||||
},
|
||||
{
|
||||
groupId: 'availableForMeeting',
|
||||
start: '2020-09-13',
|
||||
end: '2020-09-13',
|
||||
display: 'background',
|
||||
},
|
||||
|
||||
// red areas where no events can be dropped
|
||||
{
|
||||
start: '2020-09-24',
|
||||
end: '2020-09-28',
|
||||
overlap: false,
|
||||
display: 'background',
|
||||
color: red
|
||||
},
|
||||
{
|
||||
start: '2020-09-06',
|
||||
end: '2020-09-08',
|
||||
overlap: false,
|
||||
display: 'background',
|
||||
color: red
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function() {
|
||||
exampleBackgroundEvents();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function() {
|
||||
KTGeneralFullCalendarEventsDemos.init();
|
||||
});
|
||||
@@ -0,0 +1,171 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGeneralFullCalendarBasicDemos = function () {
|
||||
// Private functions
|
||||
|
||||
var exampleBasic = function () {
|
||||
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 calendarEl = document.getElementById('kt_docs_fullcalendar_basic');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
||||
},
|
||||
|
||||
height: 800,
|
||||
contentHeight: 780,
|
||||
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
|
||||
|
||||
nowIndicator: true,
|
||||
now: TODAY + 'T09:25:00', // just for demo
|
||||
|
||||
views: {
|
||||
dayGridMonth: { buttonText: 'month' },
|
||||
timeGridWeek: { buttonText: 'week' },
|
||||
timeGridDay: { buttonText: 'day' }
|
||||
},
|
||||
|
||||
initialView: 'dayGridMonth',
|
||||
initialDate: TODAY,
|
||||
|
||||
editable: true,
|
||||
dayMaxEvents: true, // allow "more" link when too many events
|
||||
navLinks: true,
|
||||
events: [
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
|
||||
eventContent: function (info) {
|
||||
var element = $(info.el);
|
||||
|
||||
if (info.event.extendedProps && info.event.extendedProps.description) {
|
||||
if (element.hasClass('fc-day-grid-event')) {
|
||||
element.data('content', info.event.extendedProps.description);
|
||||
element.data('placement', 'top');
|
||||
KTApp.initPopover(element);
|
||||
} else if (element.hasClass('fc-time-grid-event')) {
|
||||
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
} else if (element.find('.fc-list-item-title').lenght !== 0) {
|
||||
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleBasic();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGeneralFullCalendarBasicDemos.init();
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGeneralFullCalendarDragDemos = function () {
|
||||
// Private functions
|
||||
|
||||
var exampleDrag = function () {
|
||||
// Initialize the external events -- for more info please visit the official site: https://fullcalendar.io/demos
|
||||
var containerEl = document.getElementById('kt_docs_fullcalendar_events_list');
|
||||
new FullCalendar.Draggable(containerEl, {
|
||||
itemSelector: '.fc-event',
|
||||
eventData: function(eventEl) {
|
||||
return {
|
||||
title: eventEl.innerText.trim()
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// initialize the calendar -- for more info please visit the official site: https://fullcalendar.io/demos
|
||||
var calendarEl = document.getElementById('kt_docs_fullcalendar_drag');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
|
||||
},
|
||||
editable: true,
|
||||
droppable: true, // this allows things to be dropped onto the calendar
|
||||
drop: function(arg) {
|
||||
// is the "remove after drop" checkbox checked?
|
||||
if (document.getElementById('drop-remove').checked) {
|
||||
// if so, remove the element from the "Draggable Events" list
|
||||
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleDrag();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGeneralFullCalendarDragDemos.init();
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGeneralFullCalendarLocalesDemos = function () {
|
||||
// Private functions
|
||||
|
||||
var examplelocales = function () {
|
||||
// Define variables
|
||||
var initialLocaleCode = 'en';
|
||||
var localeSelectorEl = document.getElementById('kt_docs_fullcalendar_locale_selector');
|
||||
var calendarEl = document.getElementById('kt_docs_fullcalendar_locales');
|
||||
|
||||
// initialize the calendar -- for more info please visit the official site: https://fullcalendar.io/demos
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
||||
},
|
||||
initialDate: '2020-09-12',
|
||||
locale: initialLocaleCode,
|
||||
buttonIcons: false, // show the prev/next text
|
||||
weekNumbers: true,
|
||||
navLinks: true, // can click day/week names to navigate views
|
||||
editable: true,
|
||||
dayMaxEvents: true, // allow "more" link when too many events
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: '2020-09-01'
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: '2020-09-07',
|
||||
end: '2020-09-10'
|
||||
},
|
||||
{
|
||||
groupId: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2020-09-09T16:00:00'
|
||||
},
|
||||
{
|
||||
groupId: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2020-09-16T16:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Conference',
|
||||
start: '2020-09-11',
|
||||
end: '2020-09-13'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2020-09-12T10:30:00',
|
||||
end: '2020-09-12T12:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: '2020-09-12T12:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2020-09-12T14:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Happy Hour',
|
||||
start: '2020-09-12T17:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Dinner',
|
||||
start: '2020-09-12T20:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: '2020-09-13T07:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
url: 'http://google.com/',
|
||||
start: '2020-09-28'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
|
||||
// build the locale selector's options
|
||||
calendar.getAvailableLocaleCodes().forEach(function (localeCode) {
|
||||
var optionEl = document.createElement('option');
|
||||
optionEl.value = localeCode;
|
||||
optionEl.selected = localeCode == initialLocaleCode;
|
||||
optionEl.innerText = localeCode;
|
||||
localeSelectorEl.appendChild(optionEl);
|
||||
});
|
||||
|
||||
// when the selected option changes, dynamically change the calendar option -- more info on Select2 on Change event: https://select2.org/programmatic-control/events
|
||||
$(localeSelectorEl).on('change', function () {
|
||||
if (this.value) {
|
||||
calendar.setOption('locale', this.value);
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
examplelocales();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGeneralFullCalendarLocalesDemos.init();
|
||||
});
|
||||
@@ -0,0 +1,164 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTGeneralFullCalendarSelectDemos = function () {
|
||||
// Private functions
|
||||
|
||||
var exampleSelect = function () {
|
||||
// Define variables
|
||||
var calendarEl = document.getElementById('kt_docs_fullcalendar_selectable');
|
||||
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
initialDate: '2020-09-12',
|
||||
navLinks: true, // can click day/week names to navigate views
|
||||
selectable: true,
|
||||
selectMirror: true,
|
||||
|
||||
// Create new event
|
||||
select: function (arg) {
|
||||
Swal.fire({
|
||||
html: '<div class="mb-7">Create new event?</div><div class="fw-bolder mb-5">Event Name:</div><input type="text" class="form-control" name="event_name" />',
|
||||
icon: "info",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, create it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
var title = document.querySelector('input[name="event_name"]').value;
|
||||
if (title) {
|
||||
calendar.addEvent({
|
||||
title: title,
|
||||
start: arg.start,
|
||||
end: arg.end,
|
||||
allDay: arg.allDay
|
||||
})
|
||||
}
|
||||
calendar.unselect()
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Event creation was declined!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Delete event
|
||||
eventClick: function (arg) {
|
||||
Swal.fire({
|
||||
text: 'Are you sure you want 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) {
|
||||
arg.event.remove()
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Event was not deleted!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
editable: true,
|
||||
dayMaxEvents: true, // allow "more" link when too many events
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: '2020-09-01'
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: '2020-09-07',
|
||||
end: '2020-09-10'
|
||||
},
|
||||
{
|
||||
groupId: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2020-09-09T16:00:00'
|
||||
},
|
||||
{
|
||||
groupId: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2020-09-16T16:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Conference',
|
||||
start: '2020-09-11',
|
||||
end: '2020-09-13'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2020-09-12T10:30:00',
|
||||
end: '2020-09-12T12:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: '2020-09-12T12:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2020-09-12T14:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Happy Hour',
|
||||
start: '2020-09-12T17:30:00'
|
||||
},
|
||||
{
|
||||
title: 'Dinner',
|
||||
start: '2020-09-12T20:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: '2020-09-13T07:00:00'
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
url: 'http://google.com/',
|
||||
start: '2020-09-28'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function () {
|
||||
exampleSelect();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTGeneralFullCalendarSelectDemos.init();
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
Reference in New Issue
Block a user