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

Answer 2

I'm using a CSS-driven solution since it seems easier in this case to just let the library do what it is intended to do and work around it. The "Today" button has a specific class so I'd display: none that. The Event objects can accept a className prop. Using that, I positioned a :before element to create the "FULL" text. Lastly, your color variation is due to an opacity of 0.3 on those cells. Setting that to 1 shows the full red background-color that is being applied. \\

.fc-today-button {
    display: none;
}
.event-full {
    position: relative;
    opacity: 1;
    &:before {
        content: "FULL";
        position: absolute;
        color: #fff;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
    }
}

and the JS:

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',
                        className: 'event-full'
        },
        {
            start: '2016-09-20',
            allDay : true,
            rendering: 'background',
            backgroundColor: '#F00',
            title: 'full',
            textColor: '#000',
                        className: 'event-full'
        }
    ]
});

http://codepen.io/amishstripclub/pen/zqQqxx

Answer 3

I would use the disabled attribute instead of showing and hidding buttons:

https://jsfiddle.net/uz0mx059/

  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").attr('disabled',true);
      return false;
    } else {
      $("#calendar .fc-next-button").attr('disabled',false);
    }

    if (view.start < start) {
      $("#calendar .fc-prev-button").attr('disabled',true);
      return false;
    } else {
      $("#calendar .fc-prev-button").attr('disabled',false);
    }
  }

Plus a bit of css:

button:disabled {
    color: grey;
}