diff options
Diffstat (limited to 'library/fullcalendar/examples')
21 files changed, 201 insertions, 1506 deletions
diff --git a/library/fullcalendar/examples/background-events.html b/library/fullcalendar/examples/background-events.html index 307966dcc..fd36fde4c 100644 --- a/library/fullcalendar/examples/background-events.html +++ b/library/fullcalendar/examples/background-events.html @@ -2,80 +2,72 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ], - header: { + headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' }, - defaultDate: '2020-05-12', + 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-05-03T13:00:00', + start: '2020-09-03T13:00:00', constraint: 'businessHours' }, { title: 'Meeting', - start: '2020-05-13T11:00:00', + start: '2020-09-13T11:00:00', constraint: 'availableForMeeting', // defined below color: '#257e4a' }, { title: 'Conference', - start: '2020-05-18', - end: '2020-05-20' + start: '2020-09-18', + end: '2020-09-20' }, { title: 'Party', - start: '2020-05-29T20:00:00' + start: '2020-09-29T20:00:00' }, // areas where "Meeting" must be dropped { groupId: 'availableForMeeting', - start: '2020-05-11T10:00:00', - end: '2020-05-11T16:00:00', - rendering: 'background' + start: '2020-09-11T10:00:00', + end: '2020-09-11T16:00:00', + display: 'background' }, { groupId: 'availableForMeeting', - start: '2020-05-13T10:00:00', - end: '2020-05-13T16:00:00', - rendering: 'background' + start: '2020-09-13T10:00:00', + end: '2020-09-13T16:00:00', + display: 'background' }, // red areas where no events can be dropped { - start: '2020-05-24', - end: '2020-05-28', + start: '2020-09-24', + end: '2020-09-28', overlap: false, - rendering: 'background', + display: 'background', color: '#ff9f89' }, { - start: '2020-05-06', - end: '2020-05-08', + start: '2020-09-06', + end: '2020-09-08', overlap: false, - rendering: 'background', + display: 'background', color: '#ff9f89' } ] @@ -95,7 +87,7 @@ } #calendar { - max-width: 900px; + max-width: 1100px; margin: 0 auto; } diff --git a/library/fullcalendar/examples/daygrid-views.html b/library/fullcalendar/examples/daygrid-views.html index 0521d5d1a..9c20c5f0f 100644 --- a/library/fullcalendar/examples/daygrid-views.html +++ b/library/fullcalendar/examples/daygrid-views.html @@ -2,81 +2,76 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid' ], - header: { + headerToolbar: { left: 'prevYear,prev,next,nextYear today', center: 'title', right: 'dayGridMonth,dayGridWeek,dayGridDay' }, - defaultDate: '2020-05-12', + initialDate: '2020-09-12', navLinks: true, // can click day/week names to navigate views editable: true, - eventLimit: true, // allow "more" link when too many events + dayMaxEvents: true, // allow "more" link when too many events events: [ { title: 'All Day Event', - start: '2020-05-01' + start: '2020-09-01' }, { title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' + start: '2020-09-07', + end: '2020-09-10' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-09T16:00:00' + start: '2020-09-09T16:00:00' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-16T16:00:00' + start: '2020-09-16T16:00:00' }, { title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' + start: '2020-09-11', + end: '2020-09-13' }, { title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' + start: '2020-09-12T10:30:00', + end: '2020-09-12T12:30:00' }, { title: 'Lunch', - start: '2020-05-12T12:00:00' + start: '2020-09-12T12:00:00' }, { title: 'Meeting', - start: '2020-05-12T14:30:00' + start: '2020-09-12T14:30:00' }, { title: 'Happy Hour', - start: '2020-05-12T17:30:00' + start: '2020-09-12T17:30:00' }, { title: 'Dinner', - start: '2020-05-12T20:00:00' + start: '2020-09-12T20:00:00' }, { title: 'Birthday Party', - start: '2020-05-13T07:00:00' + start: '2020-09-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', - start: '2020-05-28' + start: '2020-09-28' } ] }); @@ -95,7 +90,7 @@ } #calendar { - max-width: 900px; + max-width: 1100px; margin: 0 auto; } diff --git a/library/fullcalendar/examples/external-dragging-2cals.html b/library/fullcalendar/examples/external-dragging-2cals.html index 52023b7be..a0744b24c 100644 --- a/library/fullcalendar/examples/external-dragging-2cals.html +++ b/library/fullcalendar/examples/external-dragging-2cals.html @@ -2,11 +2,7 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { @@ -14,19 +10,18 @@ var destCalendarEl = document.getElementById('destination-calendar'); var srcCalendar = new FullCalendar.Calendar(srcCalendarEl, { - plugins: [ 'interaction', 'dayGrid' ], editable: true, - defaultDate: '2020-05-12', + initialDate: '2020-09-12', events: [ { title: 'event1', - start: '2020-05-11T10:00:00', - end: '2020-05-11T16:00:00' + start: '2020-09-11T10:00:00', + end: '2020-09-11T16:00:00' }, { title: 'event2', - start: '2020-05-13T10:00:00', - end: '2020-05-13T16:00:00' + start: '2020-09-13T10:00:00', + end: '2020-09-13T16:00:00' } ], eventLeave: function(info) { @@ -35,8 +30,7 @@ }); var destCalendar = new FullCalendar.Calendar(destCalendarEl, { - plugins: [ 'interaction', 'dayGrid' ], - defaultDate: '2020-05-12', + initialDate: '2020-09-12', editable: true, droppable: true, // will let it receive events! eventReceive: function(info) { diff --git a/library/fullcalendar/examples/external-dragging-builtin.html b/library/fullcalendar/examples/external-dragging-builtin.html index f9471b0ef..78fcd89f9 100644 --- a/library/fullcalendar/examples/external-dragging-builtin.html +++ b/library/fullcalendar/examples/external-dragging-builtin.html @@ -2,26 +2,16 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { - var Calendar = FullCalendar.Calendar; - var Draggable = FullCalendarInteraction.Draggable /* initialize the external events -----------------------------------------------------------------*/ var containerEl = document.getElementById('external-events-list'); - new Draggable(containerEl, { + new FullCalendar.Draggable(containerEl, { itemSelector: '.fc-event', eventData: function(eventEl) { return { @@ -36,7 +26,7 @@ // containerEl.querySelectorAll('.fc-event') // ); // eventEls.forEach(function(eventEl) { - // new Draggable(eventEl, { + // new FullCalendar.Draggable(eventEl, { // eventData: { // title: eventEl.innerText.trim(), // } @@ -47,9 +37,8 @@ -----------------------------------------------------------------*/ var calendarEl = document.getElementById('calendar'); - var calendar = new Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ], - header: { + var calendar = new FullCalendar.Calendar(calendarEl, { + headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' @@ -77,13 +66,10 @@ font-family: Arial, Helvetica Neue, Helvetica, sans-serif; } - #wrap { - width: 1100px; - margin: 0 auto; - } - #external-events { - float: left; + position: fixed; + left: 20px; + top: 20px; width: 150px; padding: 0 10px; border: 1px solid #ccc; @@ -98,8 +84,8 @@ } #external-events .fc-event { - margin: 10px 0; - cursor: pointer; + margin: 3px 0; + cursor: move; } #external-events p { @@ -113,9 +99,13 @@ vertical-align: middle; } + #calendar-wrap { + margin-left: 200px; + } + #calendar { - float: right; - width: 900px; + max-width: 1100px; + margin: 0 auto; } </style> @@ -127,11 +117,21 @@ <h4>Draggable Events</h4> <div id='external-events-list'> - <div class='fc-event'>My Event 1</div> - <div class='fc-event'>My Event 2</div> - <div class='fc-event'>My Event 3</div> - <div class='fc-event'>My Event 4</div> - <div class='fc-event'>My Event 5</div> + <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'> + <div class='fc-event-main'>My Event 1</div> + </div> + <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'> + <div class='fc-event-main'>My Event 2</div> + </div> + <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'> + <div class='fc-event-main'>My Event 3</div> + </div> + <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'> + <div class='fc-event-main'>My Event 4</div> + </div> + <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'> + <div class='fc-event-main'>My Event 5</div> + </div> </div> <p> @@ -140,9 +140,9 @@ </p> </div> - <div id='calendar'></div> - - <div style='clear:both'></div> + <div id='calendar-wrap'> + <div id='calendar'></div> + </div> </div> </body> diff --git a/library/fullcalendar/examples/full-height.html b/library/fullcalendar/examples/full-height.html index be8195472..89b8f7a60 100644 --- a/library/fullcalendar/examples/full-height.html +++ b/library/fullcalendar/examples/full-height.html @@ -2,87 +2,83 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ], - height: 'parent', - header: { + height: '100%', + expandRows: true, + slotMinTime: '08:00', + slotMaxTime: '20:00', + headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, - defaultView: 'dayGridMonth', - defaultDate: '2020-05-12', + initialView: 'dayGridMonth', + initialDate: '2020-09-12', navLinks: true, // can click day/week names to navigate views editable: true, - eventLimit: true, // allow "more" link when too many events + selectable: true, + nowIndicator: true, + dayMaxEvents: true, // allow "more" link when too many events events: [ { title: 'All Day Event', - start: '2020-05-01', + start: '2020-09-01', }, { title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' + start: '2020-09-07', + end: '2020-09-10' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-09T16:00:00' + start: '2020-09-09T16:00:00' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-16T16:00:00' + start: '2020-09-16T16:00:00' }, { title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' + start: '2020-09-11', + end: '2020-09-13' }, { title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' + start: '2020-09-12T10:30:00', + end: '2020-09-12T12:30:00' }, { title: 'Lunch', - start: '2020-05-12T12:00:00' + start: '2020-09-12T12:00:00' }, { title: 'Meeting', - start: '2020-05-12T14:30:00' + start: '2020-09-12T14:30:00' }, { title: 'Happy Hour', - start: '2020-05-12T17:30:00' + start: '2020-09-12T17:30:00' }, { title: 'Dinner', - start: '2020-05-12T20:00:00' + start: '2020-09-12T20:00:00' }, { title: 'Birthday Party', - start: '2020-05-13T07:00:00' + start: '2020-09-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', - start: '2020-05-28' + start: '2020-09-28' } ] }); diff --git a/library/fullcalendar/examples/google-calendar.html b/library/fullcalendar/examples/google-calendar.html deleted file mode 100644 index 96194ac62..000000000 --- a/library/fullcalendar/examples/google-calendar.html +++ /dev/null @@ -1,86 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/list/main.js'></script> -<script src='../packages/google-calendar/main.js'></script> -<script> - - document.addEventListener('DOMContentLoaded', function() { - var calendarEl = document.getElementById('calendar'); - - var calendar = new FullCalendar.Calendar(calendarEl, { - - plugins: [ 'interaction', 'dayGrid', 'list', 'googleCalendar' ], - - header: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,listYear' - }, - - displayEventTime: false, // don't show the time column in list view - - // THIS KEY WON'T WORK IN PRODUCTION!!! - // To make your own Google API key, follow the directions here: - // http://fullcalendar.io/docs/google_calendar/ - googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE', - - // US Holidays - events: 'en.usa#holiday@group.v.calendar.google.com', - - eventClick: function(arg) { - // opens events in a popup window - window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600'); - - arg.jsEvent.preventDefault() // don't navigate in main tab - }, - - loading: function(bool) { - document.getElementById('loading').style.display = - bool ? 'block' : 'none'; - } - - }); - - calendar.render(); - }); - -</script> -<style> - - body { - margin: 40px 10px; - padding: 0; - font-family: Arial, Helvetica Neue, Helvetica, sans-serif; - font-size: 14px; - } - - #loading { - display: none; - position: absolute; - top: 10px; - right: 10px; - } - - #calendar { - max-width: 900px; - margin: 0 auto; - } - -</style> -</head> -<body> - - <div id='loading'>loading...</div> - - <div id='calendar'></div> - -</body> -</html> diff --git a/library/fullcalendar/examples/js/theme-chooser.js b/library/fullcalendar/examples/js/theme-chooser.js deleted file mode 100644 index 92a7c4753..000000000 --- a/library/fullcalendar/examples/js/theme-chooser.js +++ /dev/null @@ -1,141 +0,0 @@ - -function initThemeChooser(settings) { - var isInitialized = false; - var currentThemeSystem; // don't set this directly. use setThemeSystem - var currentStylesheetEl; - var loadingEl = document.getElementById('loading'); - var systemSelectEl = document.querySelector('#theme-system-selector select'); - var themeSelectWrapEls = Array.prototype.slice.call( // convert to real array - document.querySelectorAll('.selector[data-theme-system]') - ); - - systemSelectEl.addEventListener('change', function() { - setThemeSystem(this.value); - }); - - setThemeSystem(systemSelectEl.value); - - themeSelectWrapEls.forEach(function(themeSelectWrapEl) { - var themeSelectEl = themeSelectWrapEl.querySelector('select'); - - themeSelectWrapEl.addEventListener('change', function() { - setTheme( - currentThemeSystem, - themeSelectEl.options[themeSelectEl.selectedIndex].value - ); - }); - }); - - - function setThemeSystem(themeSystem) { - var selectedTheme; - - currentThemeSystem = themeSystem; - - themeSelectWrapEls.forEach(function(themeSelectWrapEl) { - var themeSelectEl = themeSelectWrapEl.querySelector('select'); - - if (themeSelectWrapEl.getAttribute('data-theme-system') === themeSystem) { - selectedTheme = themeSelectEl.options[themeSelectEl.selectedIndex].value; - themeSelectWrapEl.style.display = 'inline-block'; - } else { - themeSelectWrapEl.style.display = 'none'; - } - }); - - setTheme(themeSystem, selectedTheme); - } - - - function setTheme(themeSystem, themeName) { - var stylesheetUrl = generateStylesheetUrl(themeSystem, themeName); - var stylesheetEl; - - function done() { - if (!isInitialized) { - isInitialized = true; - settings.init(themeSystem); - } - else { - settings.change(themeSystem); - } - - showCredits(themeSystem, themeName); - } - - if (stylesheetUrl) { - stylesheetEl = document.createElement('link'); - stylesheetEl.setAttribute('rel', 'stylesheet'); - stylesheetEl.setAttribute('href', stylesheetUrl); - document.querySelector('head').appendChild(stylesheetEl); - - loadingEl.style.display = 'inline'; - - whenStylesheetLoaded(stylesheetEl, function() { - if (currentStylesheetEl) { - currentStylesheetEl.parentNode.removeChild(currentStylesheetEl); - } - currentStylesheetEl = stylesheetEl; - loadingEl.style.display = 'none'; - done(); - }); - } else { - if (currentStylesheetEl) { - currentStylesheetEl.parentNode.removeChild(currentStylesheetEl); - currentStylesheetEl = null - } - done(); - } - } - - - function generateStylesheetUrl(themeSystem, themeName) { - if (themeSystem === 'bootstrap') { - if (themeName) { - return 'https://bootswatch.com/4/' + themeName + '/bootstrap.min.css'; - } - else { // the default bootstrap theme - return 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'; - } - } - } - - - function showCredits(themeSystem, themeName) { - var creditId; - - if (themeSystem.match('bootstrap')) { - if (themeName) { - creditId = 'bootstrap-custom'; - } - else { - creditId = 'bootstrap-standard'; - } - } - - Array.prototype.slice.call( // convert to real array - document.querySelectorAll('.credits') - ).forEach(function(creditEl) { - if (creditEl.getAttribute('data-credit-id') === creditId) { - creditEl.style.display = 'block'; - } else { - creditEl.style.display = 'none'; - } - }) - } - - - function whenStylesheetLoaded(linkNode, callback) { - var isReady = false; - - function ready() { - if (!isReady) { // avoid double-call - isReady = true; - callback(); - } - } - - linkNode.onload = ready; // does not work cross-browser - setTimeout(ready, 2000); // max wait. also handles browsers that don't support onload - } -} diff --git a/library/fullcalendar/examples/json.html b/library/fullcalendar/examples/json.html deleted file mode 100644 index d7c9a5328..000000000 --- a/library/fullcalendar/examples/json.html +++ /dev/null @@ -1,93 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> -<script> - - document.addEventListener('DOMContentLoaded', function() { - var calendarEl = document.getElementById('calendar'); - - var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ], - header: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' - }, - defaultDate: '2020-05-12', - editable: true, - navLinks: true, // can click day/week names to navigate views - eventLimit: true, // allow "more" link when too many events - events: { - url: 'php/get-events.php', - failure: function() { - document.getElementById('script-warning').style.display = 'block' - } - }, - loading: function(bool) { - document.getElementById('loading').style.display = - bool ? 'block' : 'none'; - } - }); - - calendar.render(); - }); - -</script> -<style> - - body { - margin: 0; - padding: 0; - font-family: Arial, Helvetica Neue, Helvetica, sans-serif; - font-size: 14px; - } - - #script-warning { - display: none; - background: #eee; - border-bottom: 1px solid #ddd; - padding: 0 10px; - line-height: 40px; - text-align: center; - font-weight: bold; - font-size: 12px; - color: red; - } - - #loading { - display: none; - position: absolute; - top: 10px; - right: 10px; - } - - #calendar { - max-width: 900px; - margin: 40px auto; - padding: 0 10px; - } - -</style> -</head> -<body> - - <div id='script-warning'> - <code>php/get-events.php</code> must be running. - </div> - - <div id='loading'>loading...</div> - - <div id='calendar'></div> - -</body> -</html> diff --git a/library/fullcalendar/examples/json/events.json b/library/fullcalendar/examples/json/events.json deleted file mode 100644 index 2352f2d87..000000000 --- a/library/fullcalendar/examples/json/events.json +++ /dev/null @@ -1,56 +0,0 @@ -[ - { - "title": "All Day Event", - "start": "2020-05-01" - }, - { - "title": "Long Event", - "start": "2020-05-07", - "end": "2020-05-10" - }, - { - "id": "999", - "title": "Repeating Event", - "start": "2020-05-09T16:00:00-05:00" - }, - { - "id": "999", - "title": "Repeating Event", - "start": "2020-05-16T16:00:00-05:00" - }, - { - "title": "Conference", - "start": "2020-05-11", - "end": "2020-05-13" - }, - { - "title": "Meeting", - "start": "2020-05-12T10:30:00-05:00", - "end": "2020-05-12T12:30:00-05:00" - }, - { - "title": "Lunch", - "start": "2020-05-12T12:00:00-05:00" - }, - { - "title": "Meeting", - "start": "2020-05-12T14:30:00-05:00" - }, - { - "title": "Happy Hour", - "start": "2020-05-12T17:30:00-05:00" - }, - { - "title": "Dinner", - "start": "2020-05-12T20:00:00" - }, - { - "title": "Birthday Party", - "start": "2020-05-13T07:00:00-05:00" - }, - { - "title": "Click for Google", - "url": "http://google.com/", - "start": "2020-05-28" - } -] diff --git a/library/fullcalendar/examples/list-views.html b/library/fullcalendar/examples/list-views.html index e97c1c231..43094334d 100644 --- a/library/fullcalendar/examples/list-views.html +++ b/library/fullcalendar/examples/list-views.html @@ -2,22 +2,18 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/list/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'list' ], - header: { + headerToolbar: { left: 'prev,next today', center: 'title', - right: 'listDay,listWeek,dayGridMonth' + right: 'listDay,listWeek' }, // customize the button names, @@ -27,65 +23,65 @@ listWeek: { buttonText: 'list week' } }, - defaultView: 'listWeek', - defaultDate: '2020-05-12', + initialView: 'listWeek', + initialDate: '2020-09-12', navLinks: true, // can click day/week names to navigate views editable: true, - eventLimit: true, // allow "more" link when too many events + dayMaxEvents: true, // allow "more" link when too many events events: [ { title: 'All Day Event', - start: '2020-05-01' + start: '2020-09-01' }, { title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' + start: '2020-09-07', + end: '2020-09-10' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-09T16:00:00' + start: '2020-09-09T16:00:00' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-16T16:00:00' + start: '2020-09-16T16:00:00' }, { title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' + start: '2020-09-11', + end: '2020-09-13' }, { title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' + start: '2020-09-12T10:30:00', + end: '2020-09-12T12:30:00' }, { title: 'Lunch', - start: '2020-05-12T12:00:00' + start: '2020-09-12T12:00:00' }, { title: 'Meeting', - start: '2020-05-12T14:30:00' + start: '2020-09-12T14:30:00' }, { title: 'Happy Hour', - start: '2020-05-12T17:30:00' + start: '2020-09-12T17:30:00' }, { title: 'Dinner', - start: '2020-05-12T20:00:00' + start: '2020-09-12T20:00:00' }, { title: 'Birthday Party', - start: '2020-05-13T07:00:00' + start: '2020-09-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', - start: '2020-05-28' + start: '2020-09-28' } ] }); @@ -104,7 +100,7 @@ } #calendar { - max-width: 900px; + max-width: 1100px; margin: 0 auto; } diff --git a/library/fullcalendar/examples/locales.html b/library/fullcalendar/examples/locales.html deleted file mode 100644 index c6d76798f..000000000 --- a/library/fullcalendar/examples/locales.html +++ /dev/null @@ -1,152 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/core/locales-all.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> -<script> - - document.addEventListener('DOMContentLoaded', function() { - var initialLocaleCode = 'en'; - var localeSelectorEl = document.getElementById('locale-selector'); - var calendarEl = document.getElementById('calendar'); - - var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ], - header: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' - }, - defaultDate: '2020-05-12', - locale: initialLocaleCode, - buttonIcons: false, // show the prev/next text - weekNumbers: true, - navLinks: true, // can click day/week names to navigate views - editable: true, - eventLimit: true, // allow "more" link when too many events - events: [ - { - title: 'All Day Event', - start: '2020-05-01' - }, - { - title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' - }, - { - groupId: 999, - title: 'Repeating Event', - start: '2020-05-09T16:00:00' - }, - { - groupId: 999, - title: 'Repeating Event', - start: '2020-05-16T16:00:00' - }, - { - title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' - }, - { - title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' - }, - { - title: 'Lunch', - start: '2020-05-12T12:00:00' - }, - { - title: 'Meeting', - start: '2020-05-12T14:30:00' - }, - { - title: 'Happy Hour', - start: '2020-05-12T17:30:00' - }, - { - title: 'Dinner', - start: '2020-05-12T20:00:00' - }, - { - title: 'Birthday Party', - start: '2020-05-13T07:00:00' - }, - { - title: 'Click for Google', - url: 'http://google.com/', - start: '2020-05-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 - localeSelectorEl.addEventListener('change', function() { - if (this.value) { - calendar.setOption('locale', this.value); - } - }); - - }); - -</script> -<style> - - body { - margin: 0; - padding: 0; - font-family: Arial, Helvetica Neue, Helvetica, sans-serif; - font-size: 14px; - } - - #top { - background: #eee; - border-bottom: 1px solid #ddd; - padding: 0 10px; - line-height: 40px; - font-size: 12px; - } - - #calendar { - max-width: 900px; - margin: 40px auto; - padding: 0 10px; - } - -</style> -</head> -<body> - - <div id='top'> - - Locales: - <select id='locale-selector'></select> - - </div> - - <div id='calendar'></div> - -</body> -</html> diff --git a/library/fullcalendar/examples/month-view.html b/library/fullcalendar/examples/month-view.html index 9df8682b3..a285ff949 100644 --- a/library/fullcalendar/examples/month-view.html +++ b/library/fullcalendar/examples/month-view.html @@ -2,75 +2,72 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid' ], - defaultDate: '2020-05-12', + initialDate: '2020-09-12', editable: true, - eventLimit: true, // allow "more" link when too many events + selectable: true, + businessHours: true, + dayMaxEvents: true, // allow "more" link when too many events events: [ { title: 'All Day Event', - start: '2020-05-01' + start: '2020-09-01' }, { title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' + start: '2020-09-07', + end: '2020-09-10' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-09T16:00:00' + start: '2020-09-09T16:00:00' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-16T16:00:00' + start: '2020-09-16T16:00:00' }, { title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' + start: '2020-09-11', + end: '2020-09-13' }, { title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' + start: '2020-09-12T10:30:00', + end: '2020-09-12T12:30:00' }, { title: 'Lunch', - start: '2020-05-12T12:00:00' + start: '2020-09-12T12:00:00' }, { title: 'Meeting', - start: '2020-05-12T14:30:00' + start: '2020-09-12T14:30:00' }, { title: 'Happy Hour', - start: '2020-05-12T17:30:00' + start: '2020-09-12T17:30:00' }, { title: 'Dinner', - start: '2020-05-12T20:00:00' + start: '2020-09-12T20:00:00' }, { title: 'Birthday Party', - start: '2020-05-13T07:00:00' + start: '2020-09-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', - start: '2020-05-28' + start: '2020-09-28' } ] }); @@ -89,7 +86,7 @@ } #calendar { - max-width: 900px; + max-width: 1100px; margin: 0 auto; } diff --git a/library/fullcalendar/examples/php/get-events.php b/library/fullcalendar/examples/php/get-events.php deleted file mode 100644 index e4d765433..000000000 --- a/library/fullcalendar/examples/php/get-events.php +++ /dev/null @@ -1,50 +0,0 @@ -<?php - -//-------------------------------------------------------------------------------------------------- -// This script reads event data from a JSON file and outputs those events which are within the range -// supplied by the "start" and "end" GET parameters. -// -// An optional "timeZone" GET parameter will force all ISO8601 date stings to a given timeZone. -// -// Requires PHP 5.2.0 or higher. -//-------------------------------------------------------------------------------------------------- - -// Require our Event class and datetime utilities -require dirname(__FILE__) . '/utils.php'; - -// Short-circuit if the client did not give us a date range. -if (!isset($_GET['start']) || !isset($_GET['end'])) { - die("Please provide a date range."); -} - -// Parse the start/end parameters. -// These are assumed to be ISO8601 strings with no time nor timeZone, like "2013-12-29". -// Since no timeZone will be present, they will parsed as UTC. -$range_start = parseDateTime($_GET['start']); -$range_end = parseDateTime($_GET['end']); - -// Parse the timeZone parameter if it is present. -$time_zone = null; -if (isset($_GET['timeZone'])) { - $time_zone = new DateTimeZone($_GET['timeZone']); -} - -// Read and parse our events JSON file into an array of event data arrays. -$json = file_get_contents(dirname(__FILE__) . '/../json/events.json'); -$input_arrays = json_decode($json, true); - -// Accumulate an output array of event data arrays. -$output_arrays = array(); -foreach ($input_arrays as $array) { - - // Convert the input array into a useful Event object - $event = new Event($array, $time_zone); - - // If the event is in-bounds, add it to the output - if ($event->isWithinDayRange($range_start, $range_end)) { - $output_arrays[] = $event->toArray(); - } -} - -// Send JSON to the client. -echo json_encode($output_arrays); diff --git a/library/fullcalendar/examples/php/get-time-zones.php b/library/fullcalendar/examples/php/get-time-zones.php deleted file mode 100644 index 241e1bd18..000000000 --- a/library/fullcalendar/examples/php/get-time-zones.php +++ /dev/null @@ -1,9 +0,0 @@ -<?php - -//-------------------------------------------------------------------------------------------------- -// This script outputs a JSON array of all timezones (like "America/Chicago") that PHP supports. -// -// Requires PHP 5.2.0 or higher. -//-------------------------------------------------------------------------------------------------- - -echo json_encode(DateTimeZone::listIdentifiers());
\ No newline at end of file diff --git a/library/fullcalendar/examples/php/utils.php b/library/fullcalendar/examples/php/utils.php deleted file mode 100644 index aa67cda75..000000000 --- a/library/fullcalendar/examples/php/utils.php +++ /dev/null @@ -1,130 +0,0 @@ -<?php - -//-------------------------------------------------------------------------------------------------- -// Utilities for our event-fetching scripts. -// -// Requires PHP 5.2.0 or higher. -//-------------------------------------------------------------------------------------------------- - -// PHP will fatal error if we attempt to use the DateTime class without this being set. -date_default_timezone_set('UTC'); - - -class Event { - - // Tests whether the given ISO8601 string has a time-of-day or not - const ALL_DAY_REGEX = '/^\d{4}-\d\d-\d\d$/'; // matches strings like "2013-12-29" - - public $title; - public $allDay; // a boolean - public $start; // a DateTime - public $end; // a DateTime, or null - public $properties = array(); // an array of other misc properties - - - // Constructs an Event object from the given array of key=>values. - // You can optionally force the timeZone of the parsed dates. - public function __construct($array, $timeZone=null) { - - $this->title = $array['title']; - - if (isset($array['allDay'])) { - // allDay has been explicitly specified - $this->allDay = (bool)$array['allDay']; - } - else { - // Guess allDay based off of ISO8601 date strings - $this->allDay = preg_match(self::ALL_DAY_REGEX, $array['start']) && - (!isset($array['end']) || preg_match(self::ALL_DAY_REGEX, $array['end'])); - } - - if ($this->allDay) { - // If dates are allDay, we want to parse them in UTC to avoid DST issues. - $timeZone = null; - } - - // Parse dates - $this->start = parseDateTime($array['start'], $timeZone); - $this->end = isset($array['end']) ? parseDateTime($array['end'], $timeZone) : null; - - // Record misc properties - foreach ($array as $name => $value) { - if (!in_array($name, array('title', 'allDay', 'start', 'end'))) { - $this->properties[$name] = $value; - } - } - } - - - // Returns whether the date range of our event intersects with the given all-day range. - // $rangeStart and $rangeEnd are assumed to be dates in UTC with 00:00:00 time. - public function isWithinDayRange($rangeStart, $rangeEnd) { - - // Normalize our event's dates for comparison with the all-day range. - $eventStart = stripTime($this->start); - - if (isset($this->end)) { - $eventEnd = stripTime($this->end); // normalize - } - else { - $eventEnd = $eventStart; // consider this a zero-duration event - } - - // Check if the two whole-day ranges intersect. - return $eventStart < $rangeEnd && $eventEnd >= $rangeStart; - } - - - // Converts this Event object back to a plain data array, to be used for generating JSON - public function toArray() { - - // Start with the misc properties (don't worry, PHP won't affect the original array) - $array = $this->properties; - - $array['title'] = $this->title; - - // Figure out the date format. This essentially encodes allDay into the date string. - if ($this->allDay) { - $format = 'Y-m-d'; // output like "2013-12-29" - } - else { - $format = 'c'; // full ISO8601 output, like "2013-12-29T09:00:00+08:00" - } - - // Serialize dates into strings - $array['start'] = $this->start->format($format); - if (isset($this->end)) { - $array['end'] = $this->end->format($format); - } - - return $array; - } - -} - - -// Date Utilities -//---------------------------------------------------------------------------------------------- - - -// Parses a string into a DateTime object, optionally forced into the given timeZone. -function parseDateTime($string, $timeZone=null) { - $date = new DateTime( - $string, - $timeZone ? $timeZone : new DateTimeZone('UTC') - // Used only when the string is ambiguous. - // Ignored if string has a timeZone offset in it. - ); - if ($timeZone) { - // If our timeZone was ignored above, force it. - $date->setTimezone($timeZone); - } - return $date; -} - - -// Takes the year/month/date values of the given DateTime and converts them to a new DateTime, -// but in UTC. -function stripTime($datetime) { - return new DateTime($datetime->format('Y-m-d')); -} diff --git a/library/fullcalendar/examples/rrule.html b/library/fullcalendar/examples/rrule.html deleted file mode 100644 index 937c6d25b..000000000 --- a/library/fullcalendar/examples/rrule.html +++ /dev/null @@ -1,73 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../vendor/rrule.js'></script> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> -<script src='../packages/rrule/main.js'></script> -<script> - - document.addEventListener('DOMContentLoaded', function() { - var calendarEl = document.getElementById('calendar'); - - var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'rrule' ], - header: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' - }, - defaultDate: '2020-05-12', - editable: true, - events: [ - { - title: 'rrule event', - rrule: { - dtstart: '2020-05-09T13:00:00', - // until: '2020-05-01', - freq: 'weekly' - }, - duration: '02:00' - } - ], - eventClick: function(arg) { - if (confirm('delete event?')) { - arg.event.remove() - } - } - }); - - calendar.render(); - }); - -</script> -<style> - - body { - margin: 40px 10px; - padding: 0; - font-family: Arial, Helvetica Neue, Helvetica, sans-serif; - font-size: 14px; - } - - #calendar { - max-width: 900px; - margin: 0 auto; - } - -</style> -</head> -<body> - - <div id='calendar'></div> - -</body> -</html> diff --git a/library/fullcalendar/examples/selectable.html b/library/fullcalendar/examples/selectable.html index 13aa88ee8..09d384498 100644 --- a/library/fullcalendar/examples/selectable.html +++ b/library/fullcalendar/examples/selectable.html @@ -2,26 +2,19 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], - header: { + headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, - defaultDate: '2020-05-12', + initialDate: '2020-09-12', navLinks: true, // can click day/week names to navigate views selectable: true, selectMirror: true, @@ -37,62 +30,67 @@ } calendar.unselect() }, + eventClick: function(arg) { + if (confirm('Are you sure you want to delete this event?')) { + arg.event.remove() + } + }, editable: true, - eventLimit: true, // allow "more" link when too many events + dayMaxEvents: true, // allow "more" link when too many events events: [ { title: 'All Day Event', - start: '2020-05-01' + start: '2020-09-01' }, { title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' + start: '2020-09-07', + end: '2020-09-10' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-09T16:00:00' + start: '2020-09-09T16:00:00' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-16T16:00:00' + start: '2020-09-16T16:00:00' }, { title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' + start: '2020-09-11', + end: '2020-09-13' }, { title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' + start: '2020-09-12T10:30:00', + end: '2020-09-12T12:30:00' }, { title: 'Lunch', - start: '2020-05-12T12:00:00' + start: '2020-09-12T12:00:00' }, { title: 'Meeting', - start: '2020-05-12T14:30:00' + start: '2020-09-12T14:30:00' }, { title: 'Happy Hour', - start: '2020-05-12T17:30:00' + start: '2020-09-12T17:30:00' }, { title: 'Dinner', - start: '2020-05-12T20:00:00' + start: '2020-09-12T20:00:00' }, { title: 'Birthday Party', - start: '2020-05-13T07:00:00' + start: '2020-09-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', - start: '2020-05-28' + start: '2020-09-28' } ] }); @@ -111,7 +109,7 @@ } #calendar { - max-width: 900px; + max-width: 1100px; margin: 0 auto; } diff --git a/library/fullcalendar/examples/theming.html b/library/fullcalendar/examples/theming.html deleted file mode 100644 index 6b4a89e76..000000000 --- a/library/fullcalendar/examples/theming.html +++ /dev/null @@ -1,215 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset='utf-8' /> -<link href='https://use.fontawesome.com/releases/v5.0.6/css/all.css' rel='stylesheet'> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/bootstrap/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/bootstrap/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> -<script src='js/theme-chooser.js'></script> -<script> - - document.addEventListener('DOMContentLoaded', function() { - var calendarEl = document.getElementById('calendar'); - var calendar; - - initThemeChooser({ - - init: function(themeSystem) { - calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ], - themeSystem: themeSystem, - header: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' - }, - defaultDate: '2020-05-12', - weekNumbers: true, - navLinks: true, // can click day/week names to navigate views - editable: true, - eventLimit: true, // allow "more" link when too many events - events: [ - { - title: 'All Day Event', - start: '2020-05-01' - }, - { - title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' - }, - { - groupId: 999, - title: 'Repeating Event', - start: '2020-05-09T16:00:00' - }, - { - groupId: 999, - title: 'Repeating Event', - start: '2020-05-16T16:00:00' - }, - { - title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' - }, - { - title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' - }, - { - title: 'Lunch', - start: '2020-05-12T12:00:00' - }, - { - title: 'Meeting', - start: '2020-05-12T14:30:00' - }, - { - title: 'Happy Hour', - start: '2020-05-12T17:30:00' - }, - { - title: 'Dinner', - start: '2020-05-12T20:00:00' - }, - { - title: 'Birthday Party', - start: '2020-05-13T07:00:00' - }, - { - title: 'Click for Google', - url: 'http://google.com/', - start: '2020-05-28' - } - ] - }); - calendar.render(); - }, - - change: function(themeSystem) { - calendar.setOption('themeSystem', themeSystem); - } - - }); - - }); - -</script> -<style> - - body { - margin: 0; - padding: 0; - font-size: 14px; - } - - #top, - #calendar.fc-unthemed { - font-family: Arial, Helvetica Neue, Helvetica, sans-serif; - } - - #top { - background: #eee; - border-bottom: 1px solid #ddd; - padding: 0 10px; - line-height: 40px; - font-size: 12px; - color: #000; - } - - #top .selector { - display: inline-block; - margin-right: 10px; - } - - #top select { - font: inherit; /* mock what Boostrap does, don't compete */ - } - - .left { float: left } - .right { float: right } - .clear { clear: both } - - #calendar { - max-width: 900px; - margin: 40px auto; - padding: 0 10px; - } - -</style> -</head> -<body> - - <div id='top'> - - <div class='left'> - - <div id='theme-system-selector' class='selector'> - Theme System: - - <select> - <option value='bootstrap' selected>Bootstrap 4</option> - <option value='standard'>unthemed</option> - </select> - </div> - - <div data-theme-system="bootstrap" class='selector' style='display:none'> - Theme Name: - - <select> - <option value='' selected>Default</option> - <option value='cerulean'>Cerulean</option> - <option value='cosmo'>Cosmo</option> - <option value='cyborg'>Cyborg</option> - <option value='darkly'>Darkly</option> - <option value='flatly'>Flatly</option> - <option value='journal'>Journal</option> - <option value='litera'>Litera</option> - <option value='lumen'>Lumen</option> - <option value='lux'>Lux</option> - <option value='materia'>Materia</option> - <option value='minty'>Minty</option> - <option value='pulse'>Pulse</option> - <option value='sandstone'>Sandstone</option> - <option value='simplex'>Simplex</option> - <option value='sketchy'>Sketchy</option> - <option value='slate'>Slate</option> - <option value='solar'>Solar</option> - <option value='spacelab'>Spacelab</option> - <option value='superhero'>Superhero</option> - <option value='united'>United</option> - <option value='yeti'>Yeti</option> - </select> - </div> - - <span id='loading' style='display:none'>loading theme...</span> - - </div> - - <div class='right'> - <span class='credits' data-credit-id='bootstrap-standard' style='display:none'> - <a href='https://getbootstrap.com/docs/3.3/' target='_blank'>Theme by Bootstrap</a> - </span> - <span class='credits' data-credit-id='bootstrap-custom' style='display:none'> - <a href='https://bootswatch.com/' target='_blank'>Theme by Bootswatch</a> - </span> - </div> - - <div class='clear'></div> - </div> - - <div id='calendar'></div> - -</body> -</html> diff --git a/library/fullcalendar/examples/time-zones.html b/library/fullcalendar/examples/time-zones.html deleted file mode 100644 index f4174a714..000000000 --- a/library/fullcalendar/examples/time-zones.html +++ /dev/null @@ -1,145 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> -<script> - - document.addEventListener('DOMContentLoaded', function() { - var initialTimeZone = 'local'; - var timeZoneSelectorEl = document.getElementById('time-zone-selector'); - var loadingEl = document.getElementById('loading'); - var calendarEl = document.getElementById('calendar'); - - var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ], - timeZone: initialTimeZone, - header: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' - }, - defaultDate: '2020-05-12', - navLinks: true, // can click day/week names to navigate views - editable: true, - selectable: true, - eventLimit: true, // allow "more" link when too many events - events: { - url: 'php/get-events.php', - failure: function() { - document.getElementById('script-warning').style.display = 'inline'; // show - } - }, - loading: function(bool) { - if (bool) { - loadingEl.style.display = 'inline'; // show - } else { - loadingEl.style.display = 'none'; // hide - } - }, - - eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' }, - - dateClick: function(arg) { - console.log('dateClick', calendar.formatIso(arg.date)); - }, - select: function(arg) { - console.log('select', calendar.formatIso(arg.start), calendar.formatIso(arg.end)); - } - }); - - calendar.render(); - - // load the list of available timezones, build the <select> options - // it's HIGHLY recommended to use a different library for network requests, not this internal util func - FullCalendar.requestJson('GET', 'php/get-time-zones.php', {}, function(timeZones) { - - timeZones.forEach(function(timeZone) { - var optionEl; - - if (timeZone !== 'UTC') { // UTC is already in the list - optionEl = document.createElement('option'); - optionEl.value = timeZone; - optionEl.innerText = timeZone; - timeZoneSelectorEl.appendChild(optionEl); - } - }); - }, function() { - // TODO: handle error - }); - - // when the timezone selector changes, dynamically change the calendar option - timeZoneSelectorEl.addEventListener('change', function() { - calendar.setOption('timeZone', this.value); - }); - }); - -</script> -<style> - - body { - margin: 0; - padding: 0; - font-family: Arial, Helvetica Neue, Helvetica, sans-serif; - font-size: 14px; - } - - #top { - background: #eee; - border-bottom: 1px solid #ddd; - padding: 0 10px; - line-height: 40px; - font-size: 12px; - } - .left { float: left } - .right { float: right } - .clear { clear: both } - - #script-warning, #loading { display: none } - #script-warning { font-weight: bold; color: red } - - #calendar { - max-width: 900px; - margin: 40px auto; - padding: 0 10px; - } - - .tzo { - color: #000; - } - -</style> -</head> -<body> - - <div id='top'> - - <div class='left'> - Timezone: - <select id='time-zone-selector'> - <option value='local' selected>local</option> - <option value='UTC'>UTC</option> - </select> - </div> - - <div class='right'> - <span id='loading'>loading...</span> - <span id='script-warning'><code>php/get-events.php</code> must be running.</span> - </div> - - <div class='clear'></div> - - </div> - - <div id='calendar'></div> - -</body> -</html> diff --git a/library/fullcalendar/examples/timegrid-views.html b/library/fullcalendar/examples/timegrid-views.html index dcef41065..c197b1ae5 100644 --- a/library/fullcalendar/examples/timegrid-views.html +++ b/library/fullcalendar/examples/timegrid-views.html @@ -2,85 +2,80 @@ <html> <head> <meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> +<script src='../dist/index.global.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' ], - header: { + initialDate: '2020-09-12', + initialView: 'timeGridWeek', + nowIndicator: true, + headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, - defaultDate: '2020-05-12', navLinks: true, // can click day/week names to navigate views editable: true, - eventLimit: true, // allow "more" link when too many events + selectable: true, + selectMirror: true, + dayMaxEvents: true, // allow "more" link when too many events events: [ { title: 'All Day Event', - start: '2020-05-01', + start: '2020-09-01', }, { title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' + start: '2020-09-07', + end: '2020-09-10' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-09T16:00:00' + start: '2020-09-09T16:00:00' }, { groupId: 999, title: 'Repeating Event', - start: '2020-05-16T16:00:00' + start: '2020-09-16T16:00:00' }, { title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' + start: '2020-09-11', + end: '2020-09-13' }, { title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' + start: '2020-09-12T10:30:00', + end: '2020-09-12T12:30:00' }, { title: 'Lunch', - start: '2020-05-12T12:00:00' + start: '2020-09-12T12:00:00' }, { title: 'Meeting', - start: '2020-05-12T14:30:00' + start: '2020-09-12T14:30:00' }, { title: 'Happy Hour', - start: '2020-05-12T17:30:00' + start: '2020-09-12T17:30:00' }, { title: 'Dinner', - start: '2020-05-12T20:00:00' + start: '2020-09-12T20:00:00' }, { title: 'Birthday Party', - start: '2020-05-13T07:00:00' + start: '2020-09-13T07:00:00' }, { title: 'Click for Google', url: 'http://google.com/', - start: '2020-05-28' + start: '2020-09-28' } ] }); @@ -99,7 +94,7 @@ } #calendar { - max-width: 900px; + max-width: 1100px; margin: 0 auto; } diff --git a/library/fullcalendar/examples/week-numbers.html b/library/fullcalendar/examples/week-numbers.html deleted file mode 100644 index 954454b04..000000000 --- a/library/fullcalendar/examples/week-numbers.html +++ /dev/null @@ -1,118 +0,0 @@ -<!DOCTYPE html> -<html> -<head> -<meta charset='utf-8' /> -<link href='../packages/core/main.css' rel='stylesheet' /> -<link href='../packages/daygrid/main.css' rel='stylesheet' /> -<link href='../packages/timegrid/main.css' rel='stylesheet' /> -<link href='../packages/list/main.css' rel='stylesheet' /> -<script src='../packages/core/main.js'></script> -<script src='../packages/interaction/main.js'></script> -<script src='../packages/daygrid/main.js'></script> -<script src='../packages/timegrid/main.js'></script> -<script src='../packages/list/main.js'></script> -<script> - - document.addEventListener('DOMContentLoaded', function() { - var calendarEl = document.getElementById('calendar'); - - var calendar = new FullCalendar.Calendar(calendarEl, { - plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ], - header: { - left: 'prev,next today', - center: 'title', - right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' - }, - defaultDate: '2020-05-12', - navLinks: true, // can click day/week names to navigate views - - weekNumbers: true, - weekNumbersWithinDays: true, - weekNumberCalculation: 'ISO', - - editable: true, - eventLimit: true, // allow "more" link when too many events - events: [ - { - title: 'All Day Event', - start: '2020-05-01' - }, - { - title: 'Long Event', - start: '2020-05-07', - end: '2020-05-10' - }, - { - groupId: 999, - title: 'Repeating Event', - start: '2020-05-09T16:00:00' - }, - { - groupId: 999, - title: 'Repeating Event', - start: '2020-05-16T16:00:00' - }, - { - title: 'Conference', - start: '2020-05-11', - end: '2020-05-13' - }, - { - title: 'Meeting', - start: '2020-05-12T10:30:00', - end: '2020-05-12T12:30:00' - }, - { - title: 'Lunch', - start: '2020-05-12T12:00:00' - }, - { - title: 'Meeting', - start: '2020-05-12T14:30:00' - }, - { - title: 'Happy Hour', - start: '2020-05-12T17:30:00' - }, - { - title: 'Dinner', - start: '2020-05-12T20:00:00' - }, - { - title: 'Birthday Party', - start: '2020-05-13T07:00:00' - }, - { - title: 'Click for Google', - url: 'http://google.com/', - start: '2020-05-28' - } - ] - }); - - calendar.render(); - }); - -</script> -<style> - - body { - margin: 40px 10px; - padding: 0; - font-family: Arial, Helvetica Neue, Helvetica, sans-serif; - font-size: 14px; - } - - #calendar { - max-width: 900px; - margin: 0 auto; - } - -</style> -</head> -<body> - - <div id='calendar'></div> - -</body> -</html> |