如何在jQuery日历上显示

Question

我正在使用jQuery日历。我想在日历上显示当地节日的列表。我正在使用下面的脚本。日历工作正常。只有我需要显示假期。

<script> 
$(document).ready(function() { 
    var calendar = $('#notice_calendar'); 
    $('#notice_calendar').fullCalendar({ 
      header: { 
       left: 'title', 
       right: 'today prev,next' 
      }, //defaultView: 'basicWeek', 
      editable: false, 
      firstDay: 1, 
      height: 530, 
      droppable: false, 
      events: [ <?php 
       $notices = $this->db->get('noticeboard')->result_array(); 
       foreach($notices as $row): 
       ?> { 
        title: "<?php echo $row['notice_title'];?>", 
        start: new Date(<?php echo date('Y',$row['create_timestamp']);?>, <?php echo date('m',$row['create_timestamp'])-1;?>, <?php echo date('d',$row['create_timestamp']);?>), 
        end: new Date(<?php echo date('Y',$row['create_timestamp']);?>, <?php echo date('m',$row['create_timestamp'])-1;?>, <?php echo date('d',$row['create_timestamp']);?>) 
       }, 
       <?php endforeach ?> 
      ] 
     }); 
}); 
</script> 

Answer 1

您可以通过使用添加自定义假日。

的jsfiddle演示Here

$(document).ready(function() { 
 

 
    $('#calendar').fullCalendar({ 
 
     theme: true, 
 
     header: { 
 
      left: 'prev,next today', 
 
      center: 'title', 
 
      right: 'month,agendaWeek,agendaDay' 
 
     }, 
 
     defaultDate: '2014-07-04', 
 
     editable: true, 
 
     events: [{ 
 
      title: 'All Day Event', 
 
      start: '2014-07-01' 
 
     }, { 
 
      title: 'Long Event', 
 
      start: '2014-07-07', 
 
      end: '2014-07-10' 
 
     }, { 
 
      id: 999, 
 
      title: 'Repeating Event', 
 
      start: '2014-07-09T16:00:00' 
 
     }, { 
 
      id: 999, 
 
      title: 'Repeating Event', 
 
      start: '2014-07-16T16:00:00' 
 
     }, { 
 
      title: 'Meeting', 
 
      start: '2014-07-12T10:30:00', 
 
      end: '2014-07-12T12:30:00' 
 
     }, { 
 
      title: 'Lunch', 
 
      start: '2014-07-12T12:00:00' 
 
     }, { 
 
      title: 'Birthday Party', 
 
      start: '2014-07-13T07:00:00' 
 
     }, { 
 
      title: 'Click for Google', 
 
      url: 'http://google.com/', 
 
      start: '2014-07-28' 
 
     }], 
 
     eventAfterAllRender: function (view) { 
 
\t \t \t \t //Use view.intervalStart and view.intervalEnd to find date range of holidays 
 
\t \t \t \t //Make ajax call to find holidays in range. 
 
\t \t \t \t var fourthOfJuly = moment('2014-07-04','YYYY-MM-DD'); 
 
\t \t \t \t var holidays = [fourthOfJuly]; 
 
\t \t \t \t var holidayMoment; 
 
\t \t \t \t for(var i = 0; i < holidays.length; i++) { \t \t \t \t 
 
\t \t \t \t \t holidayMoment = holidays[i]; 
 
\t \t \t \t \t if (view.name == 'month') { 
 
\t \t \t \t \t \t $("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday'); 
 
\t \t \t \t \t } else if (view.name =='agendaWeek') { 
 
\t \t \t \t \t \t var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class"); 
 
\t \t \t \t \t \t if (classNames != null) { 
 
\t \t \t \t \t \t \t var classNamesArray = classNames.split(" "); 
 
\t \t \t \t \t \t \t for(var i = 0; i < classNamesArray.length; i++) { 
 
\t \t \t \t \t \t \t \t if(classNamesArray[i].indexOf('fc-col') > -1) { 
 
\t \t \t \t \t \t \t \t \t $("td." + classNamesArray[i]).addClass('holiday'); 
 
\t \t \t \t \t \t \t \t \t break; 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } else if (view.name == 'agendaDay') { 
 
\t \t \t \t \t \t if(holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) { 
 
\t \t \t \t \t \t \t $("td.fc-col0").addClass('holiday'); 
 
\t \t \t \t \t \t }; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
    }); 
 

 
});