full calendar truncate title

Question

I am using fullcalendar 1.6.0, with qtip2, building an array in php and using this as the events list

 $('#calendar').fullCalendar({
    // put your options and callbacks here
    events: [
    <?php echo $eventlist; ?>
    ],

It is working fine, but I would now like to use the calendar in a 'mobile friendly' layout.

What I want to do is, at resolutions below a certain breakpoint, remove some or all of the event information from displaying within the calendar itself, (so a colored block appears on the calendar, but little or nothing else) but still appear in the qtip.

Can I use eventrender to do this ?

Answer 1

Yes. I think you can do this. Below is the sample code. You have to use two events eventRender and eventAfterAllRender. or you can also hide the elements inside eventAfterAllRender.

eventRender: function (event, element, view) {
    if( window.screen.width < 300 ) {
       $('.fc-event-title').hide();
       $('.fc-event-time').hide();
    }
},
eventAfterAllRender: function( view ) {
      $('.fc-event-inner').each(function(){
          $(this).qtip(
          {
              content: $(this).children('.fc-event-time').html() + '' + $(this).children('.fc-event-title').html()
          });
      }
}

NOTE: This code is not tested. Change it according to your needs. Something like above will work for you.