jQuery fullcalendar - events

Question

I'm working with jQuery fullcalendar (version 2.7.1).

This is what I want to do:

Now I can set the background to red but the text doesn't appear. This is what I'm doing:

var m = moment('2016-09-19');

$('#calendar').fullCalendar({
    // put your options and callbacks here
    left:   'title',
    center: '',
    right:  'prev,next',
    weekends: false,
    weekNumbers: true,
    defaultView: 'month',
    defaultDate: m,
    events: [
        {
            start: '2016-09-19',
            allDay : true,
            rendering: 'background',
            backgroundColor: '#F00',
            title: 'full',
            textColor: '#000'
        },
        {
            start: '2016-09-20',
            allDay : true,
            rendering: 'background',
            backgroundColor: '#F00',
            title: 'full',
            textColor: '#000'
        }
    ]
});

This is how it looks:

So the text isn't added... . And the color is much lighter than the specified color.

As you can see I also didn't add 'today' to my right navigation but it's added anyway ... .

I also wonder how I can limit the navigation of months. That they for example only can select months september, october, november in 2016.. .

Can anyone help me with this questions?

Answer 1

You can use eventAfterRender callback. In this callback append string FULL to element parameter. You can apply CSS styling to this using event-full class.

The background-color is lighter because there is an opacity of 0.3; change it to 1 using event-full class.

To hide today button you have to set left, center, right properties in header object.

To limit the navigation of months you can use viewRender callback.

JS

var m = moment('2016-09-19');

$('#calendar').fullCalendar({
    // put your options and callbacks here
    header: {
        left: 'title',
        center: '',
        right: 'prev,next'
    },
    weekends: false,
    weekNumbers: true,
    defaultView: 'month',
    defaultDate: m,
    events: [{
        start: '2016-09-19',
        allDay: true,
        rendering: 'background',
        backgroundColor: '#F00',
        title: 'full',
        textColor: '#000',
        className: 'event-full'
    }, {
        start: '2016-09-20',
        allDay: true,
        rendering: 'background',
        backgroundColor: '#F00',
        title: 'full',
        textColor: '#000',
        className: 'event-full'
    }],
    eventAfterRender: function (event, element, view) {
        element.append('FULL');
    },
    viewRender: function (view, element) {
        var start = new Date("2016-09-01");
        var end = new Date("2016-11-30");

        if (end < view.end) {
            $("#calendar .fc-next-button").hide();
            return false;
        } else {
            $("#calendar .fc-next-button").show();
        }

        if (view.start < start) {
            $("#calendar .fc-prev-button").hide();
            return false;
        } else {
            $("#calendar .fc-prev-button").show();
        }
    }
});

CSS

.event-full {
    color: #fff;
    vertical-align: middle !important;
    text-align: center;
    opacity: 1;
}

WORKING DEMO