0

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 ?

Aniket Kulkarni
  • 12,825
  • 9
  • 67
  • 90
Craig Rushforth
  • 233
  • 4
  • 13

1 Answers1

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.

A Paul
  • 8,113
  • 3
  • 31
  • 61
  • Thanks for the (swift) reply. I couldn't get it working at first, and I'm not sure I am doing it correctly, but this is what I have done. I edited the existing event render, (which shows the qtip) as follows [code]if( $( window ).width() < 760 ) { $('.fc-event-title').replaceWith(" "); };[/code] If I hide the title, i get zero hight event in the calendar, so I replaced it with a non-breaking space instead I haven't used the eventAfterAllRender function, it seems to work fine without it – Craig Rushforth Feb 04 '14 at 12:27