FullCalendar mini-mode

Make a mini FullCalendar using CSS and an "eventMouseover" callback.

by Emmanuel Garcia

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
<div id='calendar'></div>

CSS

#calendar {
  text-align:center;
    min-width: 200px;
    margin: 0 auto;
    font-size: 10px;
}
.fc-toolbar {
    font-size: 1em;
}
.fc-toolbar h2 {
    font-size: 12px;
    white-space: normal !important;
}
/* click +2 more for popup */
.fc-more-cell a {
    display: block;
    width: 85%;
    margin: 1px auto 0 auto;
    border-radius: 3px;
    background: grey;
    color: transparent;
    overflow: hidden;
    height: 4px;
}
.fc-more-popover {
    width: 100px;
}
.fc-view-month .fc-event, .fc-view-agendaWeek .fc-event, .fc-content {
    font-size: 0;
    overflow: hidden;
    height: 2px;
}
.fc-view-agendaWeek .fc-event-vert {
    font-size: 0;
    overflow: hidden;
    width: 2px !important;
}
.fc-agenda-axis {
    width: 20px !important;
    font-size: .7em;
}

.fc-button-content {
    padding: 0;
}
.fc-bgevent {
opacity: .8!important; color:#FFF;
z-index: -2;
}

JavaScript

// FullCalendar Latest
// Script modified from the "theme.html" demo file

$(document).ready(function () {

    $('#calendar').fullCalendar({
    
        header: {
			left: 'prev,next today',
			center: 'prevYear, title, nextYear',
			right: ''
		},
    contentHeight: 260,
    validRange: {
			start: '2019-01-01', //start date here
			end: '2023-12-31' //end date here
		},
        defaultDate: '2019-01-01',

        eventAfterRender: function () {
            // add titles to "+# more links"
            $('.fc-more-cell a').each(function () {
                this.title = this.textContent;
            });
        },

        // add event name to title attribute on mouseover
        eventMouseover: function (event, jsEvent, view) {
            if (view.name !== 'agendaDay') {
                $(jsEvent.target).attr('title', event.title);
            }
        },

        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [

    {
        "title": "EMERALD",
        "startweek": "start7",
        "start": "2019-02-16",
        "endweek": "stop7",
        "end": "2019-02-22T24:00:00.000",
        "allDay": "true",
        "rendering": "background",
        "backgroundColor": "#03A33F"
    },
    {
        "title": "EMERALD",
        "startweek": "start51",
        "start": "2019-12-21",
        "endweek": "stop52",
        "end": "2020-01-03T24:00:00.000",
        "allDay": "true",
        "rendering": "background",
        "backgroundColor": "#03A33F"
    },
    {
        "title": "SAPPHIRE",
        "startweek": "start1",
        "start": "2019-01-05",
        "endweek": "stop6",
        "end": "2019-02-15T24:00:00.000",
        "allDay": "true",
        "rendering": "background",
        "backgroundColor": "#0193DD"
    },
    {
        "title": "SAPPHIRE",
        "startweek": "start8",
        "start": "2019-02-23",
        "endweek": "stop17",
        "end": "2019-05-03T24:00:00.000",
        "allDay": "true",
  ...