将 JSON 数据获取到日历插件的 jQuery.ajax 函数中

Question

我正在为 SilverStripe 网站制作活动日历，我有一个函数可以获取所述日历的所有活动并将它们放入 JSON 数据数组中：

  public function getCalendarEvents(){
    $SiteConfig = SiteConfig::current_site_config();
    if(Director::is_ajax()){
        $allEvents = array();

        foreach(CalendarEvents::get() as $Event){
            $date = date('m-d-Y',strtotime($Event->EventDate));

            $linkID = $Event->InternalURLID;
            $doSitetree = SiteTree::get_by_id('SiteTree',$linkID);
            $link = $doSitetree->Link();

            $title =  '<a href="'.$link.'">'.$Event->EventTitle.'</a>';

            $time = date('g:ia',strtotime($Event->EventTime));

            if(!array_key_exists($date, $allEvents)){
            $allEvents[$date] = array(
                array($time, $title)
              );
            }
            else{
                $existingEvents = $allEvents[$date];
                array_push($existingEvents, array(
                    array($time, $title)
                ));
                $allEvents[$date] = $existingEvents;
            }

        }
        return json_encode($allEvents);

    }
    else{
      return CalendarEvents::get();
    }
}

这个函数工作正常，但现在我需要获取 $allEvents 的值并将其放入 jQuery.ajax 函数中，这样我就可以使用事件日期填充日历（我使用的插件称为 Calendario）。我要做的是将$allEvents的JSON数据放入变量“caldata”中，如下所示：

jQuery.noConflict();

(function($) {
    var cal = $( '#calendar' ).calendario( {
            onDayClick : function( $el, $contentEl, dateProperties ) {
                for( var key in dateProperties ) {
                    console.log( key + ' = ' + dateProperties[ key ] );
                }
                $.ajax({
                    url: '/Home/getCalendarEvents',
                    context: this
                }).done(function(response) {
                });
            },
            caldata :// [this is where the data for the calendar goes]

        } ),
        $month = $( '#custom-month' ).html( cal.getMonthName() ),
        $year = $( '#custom-year' ).html( cal.getYear() );
    $( '#custom-next' ).on( 'click', function() {
        cal.gotoNextMonth( updateMonthYear );
    } );
    $( '#custom-prev' ).on( 'click', function() {
        cal.gotoPreviousMonth( updateMonthYear );
    } );
    $( '#custom-current' ).on( 'click', function() {
        cal.gotoNow( updateMonthYear );
    } );
    function updateMonthYear() {
        $month.html( cal.getMonthName() );
        $year.html( cal.getYear() );
    }

}(jQuery));

我之前从未使用过 jQuery 中的 .ajax 函数，所以我不确定如何将存储在 $allEvents 变量中的 JSON 数据获取到 caldata 的变量中。

Answer 1

您会在每次点击时请求事件。似乎效率不高。此外，数据可能会在将来的某个时间返回，而您已经初始化了 calendario。因此，当数据返回时，您需要初始化日历。 像这样：

jQuery.noConflict();

(function($) {
    $.ajax({
        url: '/Home/getCalendarEvents',
        context: this,
        dataType: "json"
    }).done(function(response) {

        var cal = $( '#calendar' ).calendario( {
                onDayClick : function( $el, $contentEl, dateProperties ) {
                    for( var key in dateProperties ) {
                        console.log( key + ' = ' + dateProperties[ key ] );
                    }
                },
                caldata : response // [this is where the data for the calendar goes]

            } ),
            $month = $( '#custom-month' ).html( cal.getMonthName() ),
            $year = $( '#custom-year' ).html( cal.getYear() );
        $( '#custom-next' ).on( 'click', function() {
            cal.gotoNextMonth( updateMonthYear );
        } );
        $( '#custom-prev' ).on( 'click', function() {
            cal.gotoPreviousMonth( updateMonthYear );
        } );
        $( '#custom-current' ).on( 'click', function() {
            cal.gotoNow( updateMonthYear );
        } );
        function updateMonthYear() {
            $month.html( cal.getMonthName() );
            $year.html( cal.getYear() );
        }

    });

}(jQuery));

或者直接把js json数据放到模板中，不用ajax请求加载就更好了。