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());



});