Question

我有一个完整的日历，其中包含从json文件生成的事件。我想要做的是显示用户点击下一个月或使用完整日历插件的上一个按钮的一个月内的事件列表。我试图实现，但当我点击下一个和上一个按钮时，它不会显示事件。例如，在八月份，当我点击日历底部的箭头时，我有四个事件将显示在div中。如果我点击下一步，它不应显示任何事件，因为我在下个月没有任何事件。但是当我去2015年1月份时，它应该显示一个事件，因为我已经在1月份绑定了一个事件。但它显示上个月的事件以及当前的月份事件。如何解决这个问题。

HTML

<div id='calendar'></div>
<i class="fa fa-shield fa-2x"></i>
<div id="upcoming">
    <div class="lines">
        <div id="hidden"></div>

js：

$(window).load(function() {
    $('#upcoming').hide();
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "kupArj.json",
        cache: false,
        success: function(data) {

            eventData = data;
            eventDataFn(eventData);
            eventupdateFn(eventData);
            $('#calendar').on('click', '.fc-button-next',function(){
                $('#upcoming').hide();
            formater(data);

    });

        }
    });
$('.fa-2x').click(function(){
     $('#upcoming').toggle("slow");    
});

    function  formater(eventData)
    {
    var s = $('h2').html();
    console.log(s)
    var format1 = new moment(s);
    var start1 = format1.format('YYYY/MM/DD');
    var splitStart1 = start1.split('/');
    var month = splitStart1[1];
    var years = splitStart1[2];
    for (var i = 0; i < eventData.length; i++) {
    var s1 = eventData[i].start;
    var dd = new moment(s1);
    var start = dd.format('YYYY/MM/DD');
    var splitStart = start.split('/');
    console.log(month,splitStart[1]);
    if (month == splitStart[1]) {
      $('#upcoming').append(eventData[i].title+'<br>'+eventData[i].msg+'<br>'+'<div class="lines">')
    } else {
        console.log(eventData);
    }
    }
} 

    /* initialize the external events
        -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function() {



        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);
    });


    /* initialize the calendar
        -----------------------------------------------------------------*/
    function eventDataFn(eventData) {

        $('#calendar').fullCalendar({

            header: {
                left: 'prev,next',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            eventRender: function(event, element) {
                element.popover({
                    title: event.title,
                    placement: 'auto',
                    html: true,
                    trigger: 'hover',
                    animation:'true',
                    content: event.msg
                });
                $('body').on('click', function(e) {
                    if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                        element.popover('hide');
                });
            },
            events: eventData
        });

    }
    });
    function eventupdateFn(eventData) {
        var date = new Date();
        for (i = 0; i < eventData.length; i++) {
            var s = eventData[i].start;
            var dd = new moment(s);
            var start = dd.format('YYYY/MM/DD');
            var mon = date.getMonth() + 1 ;
            var year = dd.year();
            var splitStart = start.split('/');
            var day = date.getDate();
            if (mon == splitStart[1]) {
                $('#upcoming').append(eventData[i].title+'<br>'+eventData[i].msg+'<br>'+'<div class="lines">')    
            }
            else
            {
                console.log("fail");
            }
        }
    }

如何使用jquery在完整日历中单击prev和next时更新事件？

0 个答案: