FullCalender：テーブルヘッダーにイベントをバインドする

Question

現在、fullcalendar JQueryプラグインを含むプロジェクトを作成しています。 agendaWeek-またはagendaDayの日のキャプションをクリックして、選択した日のすべてのイベント（追加情報付き）のリストを作成したいとします。私はviewDisplay Optionからテーブルヘッダにクリックイベントをバインド：

viewDisplay: function(view){ 
    $('table.fc-agenda-days thead th').each(function(){ 
     if($(this).html() != " "){ 
      $(this).css('cursor','pointer'); // set cursor 
      $(this).unbind('click'); //unbind previously bound 'click' 
      $(this).click(function(){ 
       // to be continued....  
      }); 
     } 
    }); 
} 

これは正常に動作します...しかし、そこから継続しますか？私が取り出すことができるのは、1日のキャプションだけです（たとえば、「Sun 2/19」）。おそらくもっと簡単な解決法がありますか？

ありがとうございました！

Answer 1

weekViewのcolumnFormatを変更して完全な日付を読み取ることで解決しました。カタロニア語ロケールのための私の場合：

columnFormat: { 
     month: 'ddd', 
     week: 'dddd dd/MM/yyyy', 
     day: 'dddd dd/MM/yyyy' 
    } 

その後viewDisplayに、あなたは完全な日付を解析することができますし、クリックされた日にagendaDayに移動します。

viewDisplay: function(view) { 
     // Add onclick to header columns of weekView to navigate to clicked day on dayView 
     $('table.fc-agenda-days thead th').each(function(){ 
      if($(this).html() != " "){ 
       $(this).css('cursor','pointer'); // set cursor 
       $(this).unbind('click'); //unbind previously bound 'click' 
       $(this).click(function(){ 
        var dateStr = $(this).html().substring($(this).html().indexOf(' ')+1); 
        var day = dateStr.substring(0, 2); 
        var month = dateStr.substring(3, 5) - 1; 
        var year = dateStr.substring(6, 10); 
        $('#calendar').fullCalendar('gotoDate', new Date(year, month, day)); 
        $('#calendar').fullCalendar('changeView', 'agendaDay'); 
       }); 
      } 
     }); 
    } 

Answer 2

は、私は自分自身を作っこの回避策を試してみてください。 これは、agendaWeekからagendaDayへのナビゲーションを日ヘッダーをクリックすることで簡単に行うことができます。これは、fullcalendar initの後にzumaMaker（）を呼び出すだけです。

function zumaMaker() { 

var arrayUIDays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']; 
for (var m = 0; m < arrayUIDays.length; m++) { 
    var dim = ".fc-day-header.fc-widget-header.fc-" + arrayUIDays[m]; 
    var dok = $(dim).html(); 
    $(dim).attr("onclick", "zumaMethod('" + dok + "','" + dim + "');"); 
    $(dim).css("cursor", "pointer"); 
    } 
} 

function zumaMethod(doma, diver) { 

    var date = doma.split(" ")[1].split("/"); 
    var day = date[0]; 
    var month = date[1]; 
    var year = date[2]; 
    var off_date = year + "-" + month + "-" + day + "T" + "00:00:00"; 

    $("#pl_tbl").fullCalendar('changeView', 'agendaDay'); 
    $("#pl_tbl").fullCalendar('gotoDate', off_date); 
    $(diver).css("cursor", "pointer"); 
    $(diver).attr("onclick", "zumaMethodRevert();"); 
} 

function zumaMethodRevert() { 
    $("#pl_tbl").fullCalendar('changeView', 'agendaWeek'); 
    zumaMaker(); 
} 

また、このcssを追加すると、ホバーの日ヘッダーをカスタマイズできます。

.fc-day-header:hover { 
    background-color: orange; 
} 
.fc-day-header { 
    background-color: white; 
}