Question

我可以使用从数据库中提取的事件加载初始AgendaDay视图。但是，当我点击“下一步”按钮加载第二天时，另一个日历放在第一个日历下面（请注意我知道问题是每个ajax请求我基本上是将另一个日历视图附加到div），但是事件未添加到新日历中。

我读到了完整的日历方法“refetchEvents”，我很乐意实现它，因为它可以解决我的两个问题，但我只是在如何正确实现它时遇到一些麻烦。我的代码在下面 - 试图为你们创造一个小提琴，但我的小提琴技巧很糟糕。

HTML

<div class = "uk-width-1-3">
    <div class = "uk-panel uk-panel-box uk-panel-box-secondary">
        <div class = "day-calendar"></div>
    </div>
</div>

JS

 $(function(){

    // set global variable for date
     var date = new Date();

     // initial calendar


    // Listeners on Page


function setNextButton(){
    $(".fc-button-next").on('click',function(){
            moveForwardDay();
    });
}

function setPrevButton(){
    $(".fc-button-prev").on('click',function(){
        moveBackDay();
    });
}

function setTodayButton(){
    $(".fc-button-today").on('click',function(){
        resetDate();
    });
}
// Ajax request to fill calendar info

function fillEvents(niceDate){
    $.post('/some/data',{dateToInquiry:niceDate} ,function(data){
            var dailyTimes = $.map(data.times, function(session){ //deal with error of not being able to display calendar 
                // when no appointments are available.
                console.log(session)
                return {
                                    id : session.appointment_id,
                                    start : prettifyDate(session.appointment_date)+ " " + session.start_time,
                                    end : prettifyDate(session.appointment_date)+ " " + session.end_time,
                                    title : session.client_name == null ? "Open Slot" : session.client_name,
                                    allDay : false
                            }
            })
                $(".day-calendar").fullCalendar({
                    defaultView:'agendaDay',
                    events: dailyTimes
                });
            console.log(date);
            console.log(dailyTimes);
        // setNextButton();
        // setPrevButton();
        // setTodayButton();  //change these to switch statement and only have one 
        });
    };      


function prettifyDate(date){
        var formattedDate = date.match(/^(\d{4}-\d\d-\d\d)/);
     return formattedDate[1]
  }     

//helper functions

function moveForwardDay(){
    date.setDate(date.getDate() + 1)
    sendDate(date);
}

function moveBackDay(){
    date.setDate(date.getDate() - 1)
    sendDate(date)
}

function resetDate(){
    date = new Date();
    sendDate(date);
}

function sendDate(date){
    var sendableDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    console.log(sendableDate);

    fillEvents(sendableDate);
}


resetDate();


});

使用完整日历获取事件

0 个答案: