CODEWITHSUNDEEP
phpjavascriptjqueryfullcalendar
Andrew
Andrew

Reputation: 233

FullCalendar - displaying different info

The question is:

how to display (what to change inside code) to display different info in week view and in day view f.ex.:

week view - time, title

day view - time, title, description ect.

and pro-forma: month view - time, title

Upvotes: 2

Views: 2036

Answers (3)

Alexxus
Alexxus

Reputation: 992

The solution of ppumkin might work, but it's very hacky, so I thought, I'll post a better one:

$("#calendar").fullCalendar({
    events: [
      {
        start: "2010-01-05",
        end: "2010-01-07",
        title: "event info",
        advancedTitle: "advanced event info"
      }
    ],
    eventRender: function(event, element, view){
      if(view.name == "agendaDay")
      {
        event.title = event.advancedTitle;
      }
    }
});

In the event objects you can specify a non standard field, for example 'advancedTitle', which contains the advanced event information. Then in the eventRender callback function you can easily switch the title to the 'advancedTitle' for the desired view.

Hope, that helps someone :)

Upvotes: 3

FajitaNachos
FajitaNachos

Reputation: 1020

I posted this on another question earlier

Check out this link

http://arshaw.com/fullcalendar/docs/text/titleFormat/

You can specify which view you want to edit through this

http://arshaw.com/fullcalendar/docs/views/View_Option_Hash/

So you would probably have something along the lines of

titleFormat: {

day: 'dddd, d MMM, yyyy'   //whatever date format you want here
month: 'MMMM yyyy',                            
week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}"
}

Upvotes: 0

Piotr Kula
Piotr Kula

Reputation: 9811

In the global JS declare,

var currentView;

In the constructor of fullCalendar there is viewDisplay trigger, use this code.

          viewDisplay: function(view) {
                                //This is very ugly way to change events on switch... but it works!
                                //Every time you you use 'gotoDate' this will trigger, also pressing next, previous

                                if (view.name != currentView) {
                                    if ( view.name == 'basicWeek' )   
                                      { 
                                          $('#myDateSelector').hide();
                                          $('#calendar').fullCalendar( 'removeEventSource', 'json_day.php' ); 
                                          $('#calendar').fullCalendar( 'addEventSource', 'json_week.php' );  
                                          console.log("week");
                                      }
                                     if (view.name == 'basicDay' ) 
                                      { 
                                          $('#myDateSelector').show();
                                          $('#calendar').fullCalendar( 'removeEventSource', 'json_week.php' );
                                          $('#calendar').fullCalendar( 'addEventSource', 'json_day.php' );   
                                          console.log("day");
                                      }
                                      //You can use it some where else to know what view is active quickly
                                      currentView = view.name;
                                  }
                    },

The code is very hacky, but it is much better than digging in the source code for the calendar. You must remember to add and remove any feeds, usually you will notice that your feeds start to duplicate.. this means there is a remove missing somewhere.

Upvotes: 2

Related Questions