如何在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 DEMO 在这里

$(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) {
				//Use view.intervalStart and view.intervalEnd to find date range of holidays
				//Make ajax call to find holidays in range.
				var fourthOfJuly = moment('2014-07-04','YYYY-MM-DD');
				var holidays = [fourthOfJuly];
				var holidayMoment;
				for(var i = 0; i < holidays.length; i++) {				
					holidayMoment = holidays[i];
					if (view.name == 'month') {
						$("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
					} else if (view.name =='agendaWeek') {
						var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
						if (classNames != null) {
							var classNamesArray = classNames.split(" ");
							for(var i = 0; i < classNamesArray.length; i++) {
								if(classNamesArray[i].indexOf('fc-col') > -1) {
									$("td." + classNamesArray[i]).addClass('holiday');
									break;
								}
							}
						}
					} else if (view.name == 'agendaDay') {
						if(holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
							$("td.fc-col0").addClass('holiday');
						};
					}
				}
			}
    });
});