How to make fullcalendar responsive? - php

Question

Is there any method , we can use to enable a fully responsive mode in full-calendar ?.
I have searched the docs, but couldn't find any link as of now.
https://fullcalendar.io/docs/

Answer 1

This is not a complete foolproof solution, but for minor adjustments I've used the javscript/jQuery approach.
After the page is completely loaded I simply identify the fullcalendar element and add the bootstrap responsive classes (or any other which use in your project).
// add the responsive classes after page initialization
window.onload = function () {
$('.fc-toolbar.fc-header-toolbar').addClass('row col-lg-12');
};
// add the responsive classes when navigating with calendar buttons
$(document).on('click', '.fc-button', function(e) {
$('.fc-toolbar.fc-header-toolbar').addClass('row col-lg-12');
});

Answer 2

As of time of writing, the examples on fullcalendar.io do not appear to be responsive in any useful fashion (even the one based on bootstrap). I suspect that we will have to write our own code/css to get the responsive behaviour we need.
There is a window resize event which might be helpful, see here :
How can I get Adam Shaw's FullCalendar to display responsive in a rails 4 app
Other than that, I think we're on our own for the time being.

Answer 3

I've faced the same problem with full calendar. Then end up creating a bootstrap 4 responsive calendar with the help of others.
I took Joseph Trumbull's Codepen project and modified a little. I needed it only for viewing, not for dynamic events. Joseph's approach is probably most responsive and free calendar I've come across so far.
Modify as needed.
var debugMode = true;
var showUEConsoleLog = true;
var apiDebugEndPoint = 'http://localhost:54384/api/lm-classes';
var apiLiveEndPoint = 'http://cranesapi.venturiscc.com:65000/api/lm-classes';
var apiEndPoint = debugMode ? apiDebugEndPoint : apiLiveEndPoint;
$(document).ready(function() {
$('#calendar').calendar();
});
(function($) {
var Calendar = function(elem, options) {
this.elem = elem;
this.options = $.extend({}, Calendar.DEFAULTS, options);
this.init();
};
Calendar.DEFAULTS = {
datetime: undefined,
dayFormat: 'DDD',
weekFormat: 'DDD',
monthFormat: 'MM/DD/YYYY',
view: undefined
};
Calendar.prototype.init = function() {
if (!this.options.datetime || this.options.datetime === 'now') {
this.options.datetime = moment();
}
if (!this.options.view) {
this.options.view = 'month';
}
this.initScaffold().initStyle().render();
};
Calendar.prototype.initScaffold = function() {
var $elem = $(this.elem),
$view = $elem.find('.calendar-view'),
$currentDate = $elem.find('.calendar-current-date');
if (!$view.length) {
this.view = document.createElement('div');
this.elem.appendChild(this.view);
} else {
this.view = $view[0];
}
if ($currentDate.length > 0) {
var dayFormat = $currentDate.data('day-format'),
weekFormat = $currentDate.data('week-format'),
monthFormat = $currentDate.data('month-format');
this.currentDate = $currentDate[0];
if (dayFormat) {
this.options.dayFormat = dayFormat;
}
if (weekFormat) {
this.options.weekFormat = weekFormat;
}
if (monthFormat) {
this.options.monthFormat = monthFormat;
}
}
return this;
};
Calendar.prototype.initStyle = function() {
return this;
};
Calendar.prototype.render = function() {
switch (this.options.view) {
case 'day':
this.renderDayView();
break;
case 'week':
this.renderWeekView();
break;
case 'month':
this.renderMonthView();
break;
default:
this.renderMonth();
}
};
Calendar.prototype.renderDayView = function() {
//$(this.elem).append('Day View');
};
Calendar.prototype.renderWeekView = function() {
//$(this.elem).append('Week View');
};
Calendar.prototype.renderMonthView = function() {
var datetime = this.options.datetime.clone(),
month = datetime.month();
datetime.startOf('month').startOf('week');
var $view = $(this.view);
var rows = document.createElement('div');
rows.className = 'calendar-view row border border-right-0 border-bottom-0';
$view.html('');
var week = 0,
i;
var endOfMonthMarker = false;
while (week < 6) {
for (i = 0; i < 7; i++) {
var dateHolder = document.createElement('div');
var dateHolderScafold = document.createElement('h5');
dateHolderScafold.className = 'row align-items-center';
var dateHolder_Date = document.createElement('span');
dateHolder_Date.className = 'date col-1';
dateHolder_Date.appendChild(document.createTextNode(datetime.format('D')));
dateHolderScafold.appendChild(dateHolder_Date);
var dateHolder_Day = document.createElement('small');
dateHolder_Day.className = 'col text-center text-muted';
dateHolder_Day.appendChild(document.createTextNode(datetime.format('dddd')));
dateHolderScafold.appendChild(dateHolder_Day);
var dateHolder_Span = document.createElement('span');
dateHolder_Span.className = 'col-1';
dateHolderScafold.appendChild(dateHolder_Span);
dateHolder.appendChild(dateHolderScafold);
var eventHolder = document.createElement('div');
eventHolder.className = 'events-holder d-flex align-content-end flex-wrap';
dateHolder.appendChild(eventHolder);
if (month !== datetime.month()) {
dateHolder.className = 'calendar-prior-months-date day col-lg p-2 border border-left-0 border-top-0 text-truncate d-none d-lg-inline-block bg-light text-muted';
} else {
var dateClass = datetime.date() + '-' + (datetime.month() + 1) + '-' + datetime.year();
var weekEnd = i === 0 || i === 6 ? ' weekend ' : '';
dateHolder.className = 'day col-lg p-2 border border-left-0 border-top-0 text-truncate grid ' + weekEnd + dateClass + ' ' + (isToday(datetime) ? 'moment-today' : '');
}
rows.appendChild(dateHolder);
datetime.add(1, 'day');
if (month !== datetime.month() && week >= 4 && i === 6) {
endOfMonthMarker = true;
}
}
var weekEndDiv = document.createElement('div');
weekEndDiv.className = 'w-100';
rows.appendChild(weekEndDiv);
week++;
if (endOfMonthMarker) break;
}
$view[0].appendChild(rows);
if (this.currentDate) {
$(this.currentDate).html(
this.options.datetime.format(this.options.monthFormat)
);
}
var monthValue = datetime.month();
var yearValue = datetime.year();
if (datetime.month() === 0) {
monthValue = 12;
yearValue--;
}
this.fetchMonthlyEvents(monthValue, yearValue);
};
Calendar.prototype.fetchMonthlyEvents = function(month, year) {
var $this = this;
$this.renderDailyEvents(data);
};
Calendar.prototype.renderDailyEvents = function(data) {
_.each(data.EventsList, function(v, k, obj) {
var dateSelector = '.' + v.StartDate + '> .events-holder';
var dateTemplate = v.StartDate === v.EndDate ? 'Date: ' + v.StartDate : v.StartDate + ' - ' + v.EndDate;
var tooltipTemplate = '<div>' +
'<div>' + v.CourseName + '</div>' +
'<hr>' +
'<div>' + v.CityTownSuburb + ', ' + v.StateProvince + '</div>' +
'<div>Availibility: ' + v.Availibility + '</div>' +
'<div>' + dateTemplate + '</div>' +
'<div>Time: ' + v.StartTime + ' - ' + v.EndTime + '</div>' +
'</div>';
var eventTemplate = '<a class="event p-1 pl-2 pr-2 mb-1 text-truncate small bg-' + v.ColourCode + ' text-white" data-toggle="tooltip" data-placement="top" data-html="true" title="' + tooltipTemplate + '">' +
'<span class="course-name text-truncate small text-white">' + v.CourseName + '</span>' +
'</a>';
$(dateSelector).parent().addClass('show-only-list');
$(dateSelector).append(eventTemplate);
});
// Activate Tooltips
$('#calendar .event').tooltip();
};
Calendar.prototype.next = function() {
switch (this.options.view) {
case 'day':
this.options.datetime.add(1, 'day');
this.render();
break;
case 'week':
this.options.datetime.endOf('week').add(1, 'day');
this.render();
break;
case 'month':
this.options.datetime.endOf('month').add(1, 'day');
this.render();
break;
default:
break;
}
};
Calendar.prototype.prev = function() {
switch (this.options.view) {
case 'day':
break;
case 'week':
break;
case 'month':
this.options.datetime.startOf('month').subtract(1, 'day');
this.render();
break;
default:
break;
}
};
Calendar.prototype.today = function() {
this.options.datetime = moment();
this.render();
};
Calendar.prototype.grid = function() {
$('#calendar > header').children('div:last').addClass('d-lg-flex');
$('#calendar .calendar-view > div').removeClass('list').addClass('grid');
$('#calendar .day small').addClass('d-sm-none');
$('#calendar .day > p').addClass('d-sm-none');
$('#calendar .calendar-view .events-holder').addClass('d-flex');
$('#calendar .calendar-view .events-holder > a').removeClass('d-block rounded');
$('.calendar-prior-months-date').addClass('d-lg-inline-block');
};
Calendar.prototype.list = function() {
$('#calendar > header').children('div:last').removeClass('d-lg-flex');
$('#calendar .calendar-view > div').removeClass('grid').addClass('list');
$('#calendar .day small').removeClass('d-sm-none');
$('#calendar .day > p').removeClass('d-sm-none');
$('#calendar .calendar-view .events-holder').removeClass('d-flex');
$('#calendar .calendar-view .events-holder > a').addClass('d-block rounded');
$('.calendar-prior-months-date').removeClass('d-lg-inline-block');
};
var isToday = function(DateToCheck) {
return DateToCheck.date() === moment().date() && DateToCheck.month() === moment().month() && DateToCheck.year() === moment().year();
};
function Plugin(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('bs.calendar'),
options = typeof option === 'object' && option;
if (!data && option !== 'weekend') {
data = new Calendar(this, options);
$this.data('bs.calendar', data);
}
switch (option) {
case 'today':
data.today();
break;
case 'prev':
data.prev();
break;
case 'next':
data.next();
break;
case 'grid':
data.grid();
break;
case 'list':
data.list();
break;
default:
break;
}
});
}
var noConflict = $.fn.calendar;
$.fn.calendar = Plugin;
$.fn.calendar.Constructor = Calendar;
$.fn.calendar.noConflict = function() {
$.fn.calendar = noConflict;
return this;
};
// Calendar Events
$('[data-toggle="calendar"]').click(function() {
var $this = $(this),
$elem = $this.parents('.calendar'),
action = $this.data('action');
if (action) {
$elem.calendar(action);
}
});
})(jQuery);
var data = {
"EventsList": [{
"EventId": "EVT-37431-C3EQQF",
"CourseId": 2,
"CourseName": "Counterbalanced/Vertical Mast Forklift Operator Training",
"StartDate": "23-10-2019",
"StartTime": "7:59",
"EndDate": "23-10-2019",
"EndTime": "4:00",
"CityTownId": 4,
"CityTownSuburb": "KITIMAT",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 5,
"ColourCode": 0
}, {
"EventId": "EVT-37389-ADNY11",
"CourseId": 4,
"CourseName": "In-House Instructor Training",
"StartDate": "23-10-2019",
"StartTime": "8:30",
"EndDate": "23-10-2019",
"EndTime": "4:30",
"CityTownId": 2,
"CityTownSuburb": "CASSIDY (NANAIMO)",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 10,
"ColourCode": 1
}, {
"EventId": "EVT-37615-K64XTI",
"CourseId": 1,
"CourseName": "Aerial Work Platform (Non OSSA) Operator Training",
"StartDate": "24-10-2019",
"StartTime": "7:59",
"EndDate": "24-10-2019",
"EndTime": "4:00",
"CityTownId": 11,
"CityTownSuburb": "EDMONTON",
"StateProvinceId": 3,
"StateProvince": "AB",
"Availibility": 5,
"ColourCode": 5
}, {
"EventId": "EVT-37497-FI7OMG",
"CourseId": 3,
"CourseName": "Fall Protection Training (FPG - Interprovincial)",
"StartDate": "24-10-2019",
"StartTime": "7:59",
"EndDate": "24-10-2019",
"EndTime": "4:00",
"CityTownId": 8,
"CityTownSuburb": "CALGARY",
"StateProvinceId": 3,
"StateProvince": "AB",
"Availibility": 13,
"ColourCode": 6
}, {
"EventId": "EVT-37358-0Q5OUT",
"CourseId": 1,
"CourseName": "Aerial Work Platform (Non OSSA) Operator Training",
"StartDate": "25-10-2019",
"StartTime": "7:59",
"EndDate": "25-10-2019",
"EndTime": "4:00",
"CityTownId": 1,
"CityTownSuburb": "COQUITLAM",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 5,
"ColourCode": 5
}, {
"EventId": "EVT-37395-4NSE1T",
"CourseId": 2,
"CourseName": "Counterbalanced/Vertical Mast Forklift Operator Training",
"StartDate": "25-10-2019",
"StartTime": "8:30",
"EndDate": "25-10-2019",
"EndTime": "4:30",
"CityTownId": 2,
"CityTownSuburb": "CASSIDY (NANAIMO)",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 9,
"ColourCode": 0
}, {
"EventId": "EVT-37332-SZPAPC",
"CourseId": 2,
"CourseName": "Counterbalanced/Vertical Mast Forklift Operator Training",
"StartDate": "26-10-2019",
"StartTime": "7:59",
"EndDate": "26-10-2019",
"EndTime": "4:00",
"CityTownId": 1,
"CityTownSuburb": "COQUITLAM",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 3,
"ColourCode": 0
}, {
"EventId": "EVT-37558-6NGE05",
"CourseId": 2,
"CourseName": "Counterbalanced/Vertical Mast Forklift Operator Training",
"StartDate": "28-10-2019",
"StartTime": "7:59",
"EndDate": "28-10-2019",
"EndTime": "4:00",
"CityTownId": 9,
"CityTownSuburb": "KELOWNA",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 7,
"ColourCode": 0
}, {
"EventId": "EVT-37385-P7VDVX",
"CourseId": 1,
"CourseName": "Aerial Work Platform (Non OSSA) Operator Training",
"StartDate": "29-10-2019",
"StartTime": "8:30",
"EndDate": "29-10-2019",
"EndTime": "4:30",
"CityTownId": 2,
"CityTownSuburb": "CASSIDY (NANAIMO)",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 2,
"ColourCode": 5
}, {
"EventId": "EVT-37415-XZGJ81",
"CourseId": 1,
"CourseName": "Aerial Work Platform (Non OSSA) Operator Training",
"StartDate": "29-10-2019",
"StartTime": "7:59",
"EndDate": "29-10-2019",
"EndTime": "4:00",
"CityTownId": 3,
"CityTownSuburb": "PRINCE GEORGE",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 8,
"ColourCode": 5
}, {
"EventId": "EVT-38873-986VRF",
"CourseId": 1,
"CourseName": "Aerial Work Platform (Non OSSA) Operator Training",
"StartDate": "30-10-2019",
"StartTime": "8:30",
"EndDate": "30-10-2019",
"EndTime": "4:30",
"CityTownId": 2,
"CityTownSuburb": "CASSIDY (NANAIMO)",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 10,
"ColourCode": 5
}, {
"EventId": "EVT-38325-0BA77E",
"CourseId": 2,
"CourseName": "Counterbalanced/Vertical Mast Forklift Operator Training",
"StartDate": "30-10-2019",
"StartTime": "7:59",
"EndDate": "30-10-2019",
"EndTime": "4:00",
"CityTownId": 15,
"CityTownSuburb": "CAMBRIDGE",
"StateProvinceId": 5,
"StateProvince": "ON",
"Availibility": 7,
"ColourCode": 0
}, {
"EventId": "EVT-37504-DQ0V2G",
"CourseId": 4,
"CourseName": "In-House Instructor Training",
"StartDate": "30-10-2019",
"StartTime": "7:59",
"EndDate": "30-10-2019",
"EndTime": "4:00",
"CityTownId": 8,
"CityTownSuburb": "CALGARY",
"StateProvinceId": 3,
"StateProvince": "AB",
"Availibility": 2,
"ColourCode": 1
}, {
"EventId": "EVT-37571-JHFJJI",
"CourseId": 6,
"CourseName": "Telehandler/Variable Reach Rough Terrain Forklift Operator Training",
"StartDate": "30-10-2019",
"StartTime": "7:59",
"EndDate": "30-10-2019",
"EndTime": "4:00",
"CityTownId": 9,
"CityTownSuburb": "KELOWNA",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 5,
"ColourCode": 7
}, {
"EventId": "EVT-38752-EPZED9",
"CourseId": 7,
"CourseName": "Skid Steer Loader Operator Training",
"StartDate": "30-10-2019",
"StartTime": "7:59",
"EndDate": "30-10-2019",
"EndTime": "4:00",
"CityTownId": 1,
"CityTownSuburb": "COQUITLAM",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 7,
"ColourCode": 9
}, {
"EventId": "EVT-38094-3911Y9",
"CourseId": 13,
"CourseName": "Practical Rigging Training (AB)",
"StartDate": "30-10-2019",
"StartTime": "7:59",
"EndDate": "30-10-2019",
"EndTime": "4:00",
"CityTownId": 8,
"CityTownSuburb": "CALGARY",
"StateProvinceId": 3,
"StateProvince": "AB",
"Availibility": 10,
"ColourCode": 12
}, {
"EventId": "EVT-38327-3N7EL6",
"CourseId": 16,
"CourseName": "Blended Online - Counterbalanced/Vertical Mast Forklift Operator Training",
"StartDate": "30-10-2019",
"StartTime": "12:29",
"EndDate": "30-10-2019",
"EndTime": "4:00",
"CityTownId": 15,
"CityTownSuburb": "CAMBRIDGE",
"StateProvinceId": 5,
"StateProvince": "ON",
"Availibility": 10,
"ColourCode": 13
}, {
"EventId": "EVT-38326-R5M0MA",
"CourseId": 18,
"CourseName": "Blended Online - Stand-Up Reach Truck Operator Training",
"StartDate": "30-10-2019",
"StartTime": "12:29",
"EndDate": "30-10-2019",
"EndTime": "4:00",
"CityTownId": 15,
"CityTownSuburb": "CAMBRIDGE",
"StateProvinceId": 5,
"StateProvince": "ON",
"Availibility": 10,
"ColourCode": 14
}, {
"EventId": "EVT-38126-05LC7C",
"CourseId": 22,
"CourseName": "ALS - Elevated Work Platform (OSSA)",
"StartDate": "30-10-2019",
"StartTime": "7:59",
"EndDate": "30-10-2019",
"EndTime": "4:00",
"CityTownId": 13,
"CityTownSuburb": "FORT MCMURRAY",
"StateProvinceId": 3,
"StateProvince": "AB",
"Availibility": 1,
"ColourCode": 4
}, {
"EventId": "EVT-38372-Y4UUBQ",
"CourseId": 1,
"CourseName": "Aerial Work Platform (Non OSSA) Operator Training",
"StartDate": "31-10-2019",
"StartTime": "7:59",
"EndDate": "31-10-2019",
"EndTime": "4:00",
"CityTownId": 9,
"CityTownSuburb": "KELOWNA",
"StateProvinceId": 1,
"StateProvince": "BC",
"Availibility": 7,
"ColourCode": 5
}, {
"EventId": "EVT-37634-KJR31N",
"CourseId": 2,
"CourseName": "Counterbalanced/Vertical Mast Forklift Operator Training",
"StartDate": "31-10-2019",
"StartTime": "7:59",
"EndDate": "31-10-2019",
"EndTime": "4:00",
"CityTownId": 11,
"CityTownSuburb": "EDMONTON",
"StateProvinceId": 3,
"StateProvince": "AB",
"Availibility": 1,
"ColourCode": 0
}, {
"EventId": "EVT-38114-3VQSY2",
"CourseId": 20,
"CourseName": "ALS - Counterbalanced/Vertical Mast and Telehandler/Rough Terrain Forklift Operator Training",
"StartDate": "31-10-2019",
"StartTime": "7:59",
"EndDate": "31-10-2019",
"EndTime": "4:00",
"CityTownId": 13,
"CityTownSuburb": "FORT MCMURRAY",
"StateProvinceId": 3,
"StateProvince": "AB",
"Availibility": 1,
"ColourCode": 8
}],
"LastUpdated": "23-10-2019"
}
#calendar .calendar-view .moment-today {
border: 2px solid #00ff90 !important;
}
#calendar .calendar-view>.list {
flex-basis: auto;
height: auto;
display: none;
}
#calendar .calendar-view>.list h5 {
background-color: #eee;
padding: 3px 5px 5px;
margin: -8px -8px 8px -8px;
}
#calendar .calendar-view>.list.show-only-list {
display: block;
}
#calendar .calendar-view .bg-0 {
background-color: #343a40;
}
#calendar .calendar-view .bg-1 {
background-color: #007bff;
}
#calendar .calendar-view .bg-2 {
background-color: #6610f2;
}
#calendar .calendar-view .bg-3 {
background-color: #6f42c1;
}
#calendar .calendar-view .bg-4 {
background-color: #e83e8c;
}
#calendar .calendar-view .bg-5 {
background-color: #dc3545;
}
#calendar .calendar-view .bg-6 {
background-color: #fd7e14;
}
#calendar .calendar-view .bg-7 {
background-color: #ffc107;
}
#calendar .calendar-view .bg-8 {
background-color: #28a745;
}
#calendar .calendar-view .bg-9 {
background-color: #20c997;
}
#calendar .calendar-view .bg-10 {
background-color: #17a2b8;
}
#calendar .calendar-view .bg-11 {
background-color: #f8f9fa;
}
#calendar .calendar-view .bg-12 {
background-color: #6c757d;
}
#calendar .calendar-view .bg-13 {
background-color: #343a40;
}
#calendar .calendar-view .bg-14 {
background-color: #007bff;
}
#calendar .calendar-view .bg-15 {
background-color: #6c757d;
}
#calendar .calendar-view .bg-16 {
background-color: #28a745;
}
#calendar .calendar-view .bg-17 {
background-color: #17a2b8;
}
#calendar .calendar-view .bg-18 {
background-color: #ffc107;
}
#calendar .calendar-view .bg-19 {
background-color: #dc3545;
}
#media (max-width: 991px) {
.display-4 {
font-size: 1.5rem;
}
.day h5 {
background-color: #eee;
padding: 3px 5px 5px;
margin: -8px -8px 8px -8px;
}
.date {
padding-left: 4px;
}
.calendar-view>div {
display: none;
}
.calendar-view>div.show-only-list {
display: block;
}
.calendar-view>div.show-only-list .events-holder>a {
display: block;
border-radius: .25rem;
width: 100%;
}
}
#media (min-width: 992px) {
#calendar .calendar-view .day.grid {
min-height: 9vw;
}
#calendar .calendar-view .day.grid h5 small {
display: none;
}
#calendar .calendar-view .day.grid .events-holder a {
width: 25px;
height: 25px;
border-radius: 15px;
margin-right: 2px;
}
#calendar .calendar-view .day.grid .events-holder .course-name {
display: none;
}
#calendar .calendar-view .day.calendar-prior-months-date h5 small {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="./calendar-styles.min.css" rel="stylesheet" />
<title>Responsive Calender</title>
</head>
<body>
<div class="container">
<div class="container-fluid calendar" id="calendar">
<header>
<div class="row">
<div class="col-sm-9 d-flex justify-content-between align-items-center my-2">
<!-- Calendar "prev" button -->
<button data-toggle="calendar" data-action="prev" class="btn btn-default">
<i class="fa fa-chevron-left"></i>
</button>
<h4 class="calendar-current-date display-4 text-center" data-day-format="MM/DD/YYYY" data-week-format="MM/DD/YYYY" data-month-format="MMMM, YYYY"></h4>
<!-- Calendar "next" button -->
<button data-toggle="calendar" data-action="next" class="btn btn-default">
<i class="fa fa-chevron-right"></i>
</button>
</div>
<div class="col-sm-3 d-flex justify-content-between align-items-center my-2">
<button data-toggle="calendar" data-action="grid" class="btn btn-default d-none d-lg-block">
<i class="fa fa-calendar"></i>
</button>
<button data-toggle="calendar" data-action="list" class="btn btn-default d-none d-lg-block">
<i class="fa fa-list"></i>
</button>
<!-- Calendar "today" button -->
<button data-toggle="calendar" data-action="today" class="btn btn-default">
Today
</button>
</div>
</div>
<div class="row d-none d-lg-flex p-1 bg-dark text-white">
<h5 class="col-sm p-1 text-center">Sunday</h5>
<h5 class="col-sm p-1 text-center">Monday</h5>
<h5 class="col-sm p-1 text-center">Tuesday</h5>
<h5 class="col-sm p-1 text-center">Wednesday</h5>
<h5 class="col-sm p-1 text-center">Thursday</h5>
<h5 class="col-sm p-1 text-center">Friday</h5>
<h5 class="col-sm p-1 text-center">Saturday</h5>
</div>
</header>
</div>
<br />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</body>
</html>

Answer 4

If you are asking about, Does full-calendar handle window resize?. If so then yes full-calendar comes with such capabilities. You can set handleWindowResize property to true, but it is true by default and you should not have to ask about it.
If you are asking about, Does full-calendar allow user interaction other than just rendering events?. Then, yes full-calendar allows you to add, delete, update events. It also comes with lot of options and methods to tweak around with your calendar. Since there are lots of such features you will have to go through the docs to find what you need.
Lastly full-calendar has a lot of callback methods/hooks that you can use to allow/prevent certain action, modify the behavior of such actions and lot more.
I hope you find what you are looking for. Good luck.

Answer 5

As said before fullcalendar is responsive by nature. So if you speak about to be responsive like month after weeks after day. You can juste put a js event on windows resize the view manually ?
If its not it. Tell us more