Overriding html and css to modify day cell on a month calendar with jquery fullcalendar

Question

I'm trying to modify jquery full calendar's day cell.

Here is a fiddle

I want to edit the css and html in the day cell of the month to show something like this, where the event covers the entire day cell preventing any new dayclick event from occurring. I want max 1 event per day!

I've tried to use the eventRender callback to set some html and css but I haven't had any luck, here is what I tried.

$('#calendar').fullCalendar({
                //defaultDate: '2016-12-17',
                //defaultView: 'basicWeek',
                //height: 300,
                //eventColor: 'green',
                events: [
                    {
                        title: 'event',
                        start: '2016-12-17T12:00:00',
                        duration: '60 min'
                        //rendering: 'background'
                    }
                ],
                eventRender: function (event, element) {
                    element.html('');
                    var new_description =
                        + '<div style="text-align: center; height=100%; width=100%;">'
                        +  moment(event.start._i).format("HH:mm") + '<br/>'
                        + event.duration + '<br/>'
                        + event.title
                        + '</div>'
                        ;
                    element.append(new_description);
                }
            });

And here is what is looks like. You'll notice there is some white space on the top where the user can click it and a day event will be triggered and the text isn't center aligned

Quick question - should I avoid fullcalendar and learn react js with the https://github.com/airbnb/react-dates plugin??? It seems like I could have complete control over the html and css for each cell!

Answer 1

To override CSS properties of fullcalender, make sure your custom CSS comes after your fullcalendar.css declaration.

Using eventRender callback, find below, a working snippet illustrating the approach:

$(document).ready(function() {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'month',
        eventRender: function (event, element) {
            element.html('');
            element.append(
                moment(event.start._i).format("h:mm a") + '<br/>'
                + event.duration + '<br/>'
                + event.title
            );
            var eventDay = $(".fc-day");

            $.each( eventDay, function( key, value ) {
                if ( value.dataset["date"] == moment(event.start._i).format("YYYY-MM-DD") ) {
                    value.style.backgroundColor = "red";
                }
            });
        },
        events: [
            {
                title: 'Event Name',
                start: '2016-12-19T14:00:00',
                duration: '60 min',
                color: 'transparent'
            }
        ],
        dayClick: function() {
            return null;
        }
    });

});

<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.css' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script>

<style type='text/css'>
    .fc-event-container {
        position: relative;
        z-index: -1;
        text-align: center;
    }
    .fc-event {
        border-radius: 0;
    }
    .fc-day-grid-event {
        margin: 0;
    }
</style>

<div id='calendar'></div>

Please note: version 3.1.0 of fullcalendar was used for the purpose of this illustration; I've realised that you were using a quite older one (version 1.5.3) and don't mind updating that.

Equally added moment.js as necessary to handling dates effectively.

Read more on Moment Parsing (String Format) here.

Answer 2

This might be a getto way of trying to make this work.

The HTML:

<div id="calendarContainer" style="border:solid 2px red;">
  <div id='calendar'></div>
</div>

Tha javascript:

$(document).ready(function() {
  var calendar = $('#calendar').fullCalendar({
    defaultView: 'month',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    eventRender: function(event, element, view) {
      var eventHeight = ($("#calendarContainer").height() / 6) - 20,
        eventWidth = ($("#calendarContainer").width() / 7) - 6;
      var new_description = '<div style="text-align:center;position:absolute;top:-19px;left:-1px;background-color:#3366cc;height:' + eventHeight + 'px;width:' + eventWidth + 'px;border-radius:5px;padding-top:3px;padding-left:4px;"> <div>event <br> time <br> title</div> </div>';
      element.append(new_description);
    },




    events: [{
      title: 'event',
      start: '2016-12-17T12:00:00',
      duration: '60 min'
        //rendering: 'background'
    }]


  });

  // console.log($('#calendar').html());



});

Answer 3

You can achieve the same if calendar cell background color is exactly same as the event on that cell and also you can restrict to add event on calendar if already one event for that calendar cell is there. Below is a sample example to achieve it.

        var h = {};

        if ($('#calendar').width() <= 400) {
            $('#calendar').addClass("mobile");
            h = {
                left: 'title, prev, next',
                center: '',
                right: 'today,month,agendaWeek,agendaDay'
            };
        } else {
            $('#calendar').removeClass("mobile");
            if (App.isRTL()) {
                h = {
                    right: 'title',
                    center: '',
                    left: 'prev,next,month'
                };
            } else {
                h = {
                    left: 'title',
                    center: '',
                    right: 'prev,next,month'
                };
            }
        }

var events = [
                {
                   title: 'event1',
                   start: '2016-12-17T12:00:00',
                   duration: '60 min',
                   backgroundColor: '#BFCAD1'
                },
                {
                   title: 'event2',
                   start: '2016-12-24T12:00:00',
                   duration: '30 min',
                   backgroundColor: '#BFCAD1'
                }
             ]

function handleCalendarDateClicked() {
     var tempEvent = {};                       
     tempEvent.title = "event3";
     tempEvent.start = '2016-12-31T12:00:00';
     tempEvent.duration = '30 min';
     tempEvent.backgroundColor = '#BFCAD1';
     events.push(tempEvent);
     $('#calendar').fullCalendar('removeEvents'); //to avoid event duplicates
     $('#calendar').fullCalendar('addEventSource', events); // to reinitialize calendar with updated events array
} 

$('#calendar').fullCalendar({
                disableDragging: false,
                header: h,
                editable: false,
                events: events,
                eventRender: function (event, element) {
                    element.html('');
                    var new_description =
                        + '<div style="text-align: center; height=100%; width=100%;">'
                        +  moment(event.start._i).format("HH:mm") + '<br/>'
                        + event.duration + '<br/>'
                        + event.title
                        + '</div>'
                        ;
                    element.append(new_description);
                },
                dayRender: function(date, cell) {
                   //based on condition like for the date event is there you can set background color of that cell 
                   var cellDate = date.format('MMM DD, YYYY');
                   if (dayRenderDates && dayRenderDates.indexOf(cellDate) > -1) {
                      cell.css("background-color", "#BFCAD1");
                   }
                },
                dayClick: function(date, jsEvent, view) {
                   //here, you can add event based on some condition like you want if there is already an event attached to the cell then another cannot be added
                   var newDate = new Date(date.format());
                   return ((dayRenderDates.indexOf(newDate) > -1) ? '' : handleCalendarDateClicked(date.format('YYYY-MM-DD')));
                }
            });

• dayRenderDates is an array of dates for which event is there
• handleCalendarDateClicked() is a function called to add an event

Answer 4

You can change your jquery as follows

$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        defaultView: 'month',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        eventRender: function(event, element, view) {
            var new_description =
                '<div style="text-align:center">3PM' + '<br/>' +
                '60min' + '<br/>' +
                'title</div>'
            ;
            element.append(new_description);
        },

        events: [{
            title: 'event',
            start: '2016-12-17T12:00:00',
            duration: '60 min'
                //rendering: 'background'
        }]

    });

    // console.log($('#calendar').html());

    // button click
});