自定义fullCalendar.js

Question

我想在fullcalendar的agendaMonth视图中添加一个表。我尝试使用eventRender和事件renderAll附加它。但是css是扭曲的。还有其他方法吗？我还需要点击不同的复选框来过滤数据。The view has to be somewhat like this image but has to properly aligned with respect to the header on top.

＆＃13;

＆＃13;

 $(document).ready(function() {  
            $('#calendar').fullCalendar({
      
               defaultView: 'agendaWeek',
               buttonText:{
                 today:    'Today',
                  month:    'Month',
                  week:     'Week',
                  listMonth:'Schedule',
                 
               },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaWeek,month,listMonth'
                },
                editable: false,
      
                events: [
                {
      
            title  : 'Repair#100201550',
            start  : '2016-11-01T11:23:07+00:00',
            end    :'2016-11-01T18:23:07+00:00',
            description :'Complete'+'<br><br>'+'Services Being Impacted'+'<br><br>'+'This Visit'+'<br>'+'1.Standard Wireless'+'<br><br>'+ 'Next Visit'+'<br>'+' 2.Cable',
      
        },
         {
      
            title  : 'Repair#100201550',
            start  : '2016-11-02T11:23:07+00:00',
            end    :'2016-11-02T18:23:07+00:00',
            description :'Complete'+'<br><br>'+'Services Being Impacted'+'<br><br>'+'This Visit'+'<br>'+'1.Standard Wireless'+'<br><br>'+ 'Next Visit'+'<br>'+' 2.Cable',
      
        },
        {
      
            title  : 'Repair#100201550',
            start  : '2016-11-02T19:23:07+00:00',
            end    :'2016-11-02T23:23:07+00:00',
            description :'Complete'+'<br><br>'+'Services Being Impacted'+'<br><br>'+'This Visit'+'<br>'+'1.Standard Wireless'+'<br><br>'+ 'Next Visit'+'<br>'+' 2.Cable',
      
        },
        
        {
            title  : 'Repair#100201547',
            start  : '2016-11-03T09:23:07+00:00',
            end    :'2016-11-03T14:23:07+00:00',
            description :'Complete'+'<br><br>'+'Services Being Impacted'+'<br><br>'+'This Visit'+'<br>'+'1.Standard Wireless'+'<br><br>'+ 'Next Visit'+'<br>'+' 2.Cable'+'<br><br>'+'3.WiFi'+'<br><br>'+'4.Singe CPE HAN',
        },
        {
            title  : 'Repair#623513432',
            start  : '2016-10-11T07:23:07+00:00',
            end    :'2016-10-11T12:45:07+00:00',
            description :'Complete'+'<br><br>'+'Services Being Impacted'+'<br><br>'+'This Visit'+'<br>'+'1.Standard Wireless'+'<br><br>'+ 'Next Visit'+'<br>'+' 2.Cradlepoint CBA750A with POE'+'<br><br>'+'3.WiFi',
        },
      ],
      eventRender: function(event, element, view) {
            if (view.name === "agendaWeek") {
                element.find(".fc-content")
                    .append("<br>"+event.description);
            }
            if (view.name === "month") {
              element.popover({
            title: 'Details',
            placement: 'left',
            container: 'body',
            content:  '<table border="0" style="width:100%">'+'<tr><th>Time</th><th>Case</th><th>Location ID</th><th>Location Address</th></tr><tr><td>AM</td><td>'+event.title+'</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table>',
            html:true
        });
            }
            if (view.name === "listMonth") {
      
            element.find(".fc-list-item-title")
                    .append("<table border='0' style='width:100%'>"+"<tr><td></td><td>AM</td><td>"+event.title+"</td><td></td><td>123456</td><td>Installations</td><td>"+"2016-10-11"+"</td><td>"+"2016-10-11"+"</td><td>Complete</td><td>123456 ABDHDJ</td></tr></tr></table>");
      
        }
          
        },
        // eventClick: function(event) {
        //   if (view.name === "month") {
        //   }
        // }
      eventAfterAllRender: function(event, element, view) {
            $(".fc-listMonth-view").find('.headerTable').remove();
            
      
            $(".fc-listMonth-view").prepend("<div class='headerTable'><table class='table-bordered table-condensed'><thead><tr><td></td><td>TIME OF THE DAY</td><td>FSO ID/CASE ID</td><td>LOCATION ID</td><td>ORDER TYPE</td><td>DATE SCHEDULED</td><td>DATE COMPLETED</td><td>STATUS</td><td>ADDRESS</td></tr></thead></table></div>"); 
      
       
          
        },
               
            });
      
           
        });

＆＃13;

.checkbox{
	margin-left:15px;
	}
.filters>span{
	display:inline-block

}
.filters>span.caret{
margin-left: 92px;
    width: 9px;
    cursor: pointer;
}

.filterSection>span{
	display:inline-block

}
.filterSection>span#select-All{
margin-left: 27px;

}
.filterSection{
	display: none;
}
.fc-event-dot{
	display: none;
}
.headerTable{
	font-size: 12px;
	text-align: center;
	font-weight: bold;
}
.headerTable .table-bordered thead{
	    background-color: #4378B8;
    color: white;
}
.fc-list-item-title a{
	display:none;
}
.fc-list-item-time,.fc-list-item-marker {
	display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.js"></script>
<div id="calendar"></div>

＆＃13;

＆＃13;

＆＃13;