Question

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

 ZonedDateTime.now().format(format);

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

  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();
    }
}

之前我从未使用过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请求的情况下加载会更好。

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

1 个答案: