FullCalendar dayClickに関するさまざまな情報を表示

Question

私は、月のビューと日のビューに関するさまざまな情報を示すカレンダーを持っています。ユーザーに1日をクリックさせてから、その日に各イベントの詳細を表示できるようにしたいと考えています。これは私が現在持っているものです。

$('#calendar').fullCalendar({ 
      // put your options and callbacks here 
      height: 750, 
      header: { 
       left: 'prev,next today ', 
       center: 'title', 
       right: 'month' 
      }, 
      dayClick: function(date, jsEvent, view) { 

      }, 
      displayEventTime: false, 
      events: function(start, end, timezone, callback) { 
       $.ajax({ 
        type: 'POST', 
        url: 'WebServices/CalendarAtAGlanceWebService.asmx/GetCalendarSessions', 
        data: JSON.stringify({ date: $('#calendar').fullCalendar('getDate') }), 
        async: true, 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (doc) { 
         var events = []; 
         $(doc.d).each(function() { 
          events.push({ 
           title: $(this).attr('EventName'), 
           start: $(this).attr('StartDate'), // will be parsed 
           description: $(this).attr("EventDescription") 
          }); 
         }); 
         callback(events); 
        } 
       }); 
      }, 
      eventRender: function (event, element) { 
       element.find('.fc-title').append("<br/>" + event.description); 
      } 
     }); 

Full Calendarこれは、画像は、月ビューのように見えるものです。

Answer 1

は、あなたのdayClick関数は、次の行います

dayClick: function(date, jsEvent, view) 
{ 
    $('#calendar').fullCalendar('gotoDate', date); 
    $('#calendar').fullCalendar('changeView', agendaDay); 
} 

ユーザーは月ビューで日をクリックしたときにこれがクリックされた日付の日のビューに表示を変更します。次に、あなただけの場合にのみ、日ビューで説明を表示するためにあなたのeventRender ロジックを変更する必要があります。

eventRender: function (event, element) 
{ 
    if($('#calendar').fullCalendar('getView').name == "agendaDay") 
    { 
     element.find('.fc-title').append("<br/>" + event.description); 
    } 
} 

は、この説明は一日ビューでのイベントのために表示されるようになります。つまり、タイトルは月表示のみで表示され、1日をクリックすると1日のイベントの詳細が表示されます。