Question

我想知道在单击下一个和上一个按钮时如何重新加载日历。现在，我已经用正确的数据加载日历一天，但是当我点击上一个和下一个时它不会刷新。

编辑：

var Calendar = function () {
return {
    //main function to initiate the module
    init: function () {
        Calendar.initCalendar();
    },

    initCalendar: function () {

        if (!jQuery().fullCalendar) {
            return;
        }

        var eventID = 0;
        var eventsArr = new Array();            
        var date = new Date();
        var d = date.getDate();
        var dayOfWeek = date.getDay() + 1;
        var m = date.getMonth();
        var y = date.getFullYear();
        var currentDate = y + "-" + m + "-" + d;
        var h = {};

        if (App.isRTL()) {
             if ($('#calendar').parents(".portlet").width() <= 720) {
                $('#calendar').addClass("mobile");
                h = {
                    right: 'title, prev, next',
                    center: '',
                    right: 'agendaDay, agendaWeek, month, today'
                };
            } else {
                $('#calendar').removeClass("mobile");
                h = {
                    right: 'title',
                    center: '',
                    left: 'agendaDay, agendaWeek, month, today, prev,next'
                };
            }                
        } else {
             if ($('#calendar').parents(".portlet").width() <= 720) {
                $('#calendar').addClass("mobile");
                h = {
                    left: 'title, prev, next',
                    center: '',
                    right: 'today,month,agendaWeek,agendaDay'
                };
            } else {
                $('#calendar').removeClass("mobile");
                h = {
                    left: 'title',
                    center: '',
                    right: 'prev, next'
                };
            }
        }

        $('#calendar').fullCalendar('destroy'); // destroy the calendar

        $('#calendar').fullCalendar({ //re-initialize the calendar
            defaultView: 'agendaDay',
            header: h,
            slotMinutes: 5,
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function (date, allDay) { // this function is called when something is dropped

                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);

                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                copiedEventObject.className = $(this).attr("data-class");

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
            },
            events: {
                url: 'api.php',
                cache: true,
                type: 'POST',
                data: {
                    day: dayOfWeek,
                    callback: "get_classes"
                },
                error: function () {
                    alert('there was an error while fetching events!');
                },
            },
            eventClick: function(event, element) {
                $('#overlay').show();
                $('#popup').load('addmember.php', {
                    eventID : event.id,
                    currentDate : currentDate
                });
                $('#popup').show();
                disable_scroll();
            }
        });
    }  
};

这就是我的创建日历代码。

Answer 1

所以你想要的只是在特定的时间范围内显示事件，比方说一个月，我的意思是你当前可视化的月份。如果你在获取事件的情况下，你将不得不将你想要的时间范围传递给服务器端，之后返回事件的数量，通过我们可以说JSON或XML，无论你想要什么样的客户端将填充那个时间范围。

例如：

 var yourinfinitesource = {
            infinitesourceone: {               
                url: api.php,
                type: 'POST',  
                data:{  
                    'year':y                            
                },
                cache: false,              
                color: '#6C92A8',
                textColor: 'white'                             
            }   
    };

 var calendar = $('#calendar').fullCalendar({
 ...
 eventSources: [yourinfinitesource.infinitesourceone],
 ...
 });

注意标题转到服务器端：

enter image description here

Fullcalendar总是通过开始：[unix时间戳]和结束：[unix时间戳]，这是你可以在日历中可视化的第一天和最后一天。

因此，如果您只想加载该时间范围的事件，可以在服务器端使用它。或者你可以在标题中的年份看到的是当我传递数据：{'year'：y}这样时，你可以使用相同的方法来传递不同的时间范围来加载。

尝试并使用像这样的eventSources ...对我来说，每次点击prev，下一个按钮时它们都会刷新......

你试过这个：

calendar.fullCalendar( 'refresh' );

如果您需要任何进一步的解释，请告诉我。祝你好运

接下来，上一步行动

1 个答案: