2013-08-29 90 views
2

實際上標題告訴了一切。我做了一個ajax調用,它返回一個事件列表。然後我想把列表放到fullcalendar中。該操作應該適用於每個更改的選定用戶名。將帶JSON數據的fullcalendar動態加載到addEventSource

$.ajax({ 
    type: "POST", 
    url: "get_event_list.php", 
    data: "username="+user, 
    success: function(ajaxCevap) { 

     var obj = jQuery.parseJSON(ajaxCevap); 
     var events = new Array(); 

     $.each(obj,function(index,value) { 

      event = new Object();  
      event.title = value['title']; 
      event.start = value['start']; 
      event.end = value['end']; 
      event.color = value['backgroundColor']; 
      event.allDay = false; 

      events.push(event); 
     }); 

     $('#calendar').fullCalendar("removeEvents");   
     $('#calendar').fullCalendar('addEventSource', events);  
     $('#calendar').fullCalendar('refetchEvents'); 

    } 
}); 

addEventSource不起作用。沒有附加到fullcalendar。

這裏是容器:<div id="calendar"></div>

---編輯---

我得到一個錯誤:Uncaught exception: TypeError: Cannot convert 'getDaySegmentContainer()' to object

回答

2

我所用的fullcalendar文檔建議一個風格: http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/

所以,如果你像我一樣使用導軌,我已經在我的文檔準備腳本中使用了這個:

eventSources: [{ 
    url: '/mymodel.json', 
    ignoreTimezone: false 
}], 

然後在模型本身:

def index 
#gets list 

@mymodel = Mymodel.all.map { |r| {:title => r.title , :start => r.date, :color => '#66FF33', :end => r.enddate, :id => r.id} } 

respond_to do |format| 
    format.html 
    format.json { render :json => @mymodel } 
end 
end 
+0

如何改變用戶名後重新獲取你的事件?此代碼在第一次加載時運行。 –

+0

如果您「註銷」或者您更改了用戶名,則該頁面應該自行刷新,並且事件將相應地重新加載。 – kjbradley

+0

如果您的用戶名更改刺激頁面請求或刷新,它應該與「第一次加載」相同。 – kjbradley

0

看一看我的回答,我面臨着同樣的問題,即我無法映射事件的jQuery fullcalender。經過三天的鬥爭後才能工作。

這裏的鏈接

Maping Events to FullCalender using JSON

0

我已經在類似的東西,只是用「月」值來獲得選擇該月唯一的事件,並更換所有事件日曆

我的javascript代碼:

$('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: '' 
     }, 
     editable: false, 
     events: function (start, end, timezone, callback) { 


      var d = new Date(); 
      var n = d.getMonth(); 

      var month = n + 1; //actual month 
      try { 
       //if the View is diferent of today , get the number of month from the actual view 
       month = parseInt($('#calendar').fullCalendar('getDate').format("MM")); 
      }catch(e){} 

      $.ajax({ 
       url: $("#url-events").val(), //GetEventsByMonth 
       dataType: 'json', 
       data: { 
        //pass the parameter to get the events by month 
        month: month 
       }, 
       success: function (result) { 
        var events = []; 
        $.each(result, function (i, item) { 

         events.push({ 
          title: result[i].title, 
          start: result[i].start,// will be parsed 
          end: result[i].end // will be parsed 
         }); 
        })       
        callback(events); 
       }, 
       error: function (xhr, ajaxOptions, thrownError) { 
        alert(xhr.status); 
        alert(thrownError); 

       } 


      }); 
     } 

    }); 

我的動作方法:

public ActionResult GetEventsByMonth(int month) 
    { 

     List<Events> list = Events.GetEvents(month); 
     var rows = list.ToArray(); 
     return Json(rows, JsonRequestBehavior.AllowGet); 
    } 

你可以改變的「用戶」的「月」參數,並把他們各自的用戶的所有事件。

我的模型:

public class Events 
{ 
    public string id { get; set; } 
    public string title { get; set; } 
    public string date { get; set; } 
    public string start { get; set; } 
    public string end { get; set; } 
    public string url { get; set; } 

    public bool allDay { get; set; } 


    public static List<Events> GetEvents(int month= 0) 
    { 
     ... 
    } 


}