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

回答1:

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.

回答2:

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 :)

回答3:

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]{ '&#8212;'[ MMM] d yyyy}"
}

来源：https://stackoverflow.com/questions/9410576/fullcalendar-displaying-different-info

标签

php

javascript

jquery

fullcalendar