獲取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的使用阿賈克斯功能之前，所以我不知道如何將存儲在$ allEvents變量中的JSON數據轉換爲caldata的變量。

Answer 1

你會被要求爲每次點擊的事件。看起來效率不高。此外，在您將來初始化日曆時，數據可能會在未來的某個時間回來。所以當數據返回時，您需要初始化日曆。 像這樣：

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請求。