jquery FullCalendar使用MVC和JSON

我只是想做一些非常简单的事情开始。jquery FullCalendar使用MVC和JSON

我使用了jQuery FullCalendar发现这里：http://fullcalendar.io/

当添加所述事件数据作为阵列（如文档的示例提供），日历填充。但是，当我尝试通过jQuery来做到这一点时，我得到了一个有效的JSON响应，但事件没有填充。

$(document).ready(function() { 
     // page is now ready, initialize the calendar... 
     $('#calendar').fullCalendar({ 
      events: { 
       url: '../calendar/GetCalendarData', 
       type: 'GET', 
       data: {}, 
       success: function (doc) { 
         //alert(doc.title + ' ' + doc.start); 
         var events = []; 
         events.push(doc); 
         alert(events[0].title + ' ' + events[0].start); 
       }, 
       error: function() { 
        alert('there was an error while fetching events!'); 
       }, 

       color: 'yellow', // a non-ajax option 
       textColor: 'black' // a non-ajax option 
      } 
     }); 
     // Code and Documents: http://fullcalendar.io/ 
    }); 


    [HttpPost] 
    public ActionResult PostCalendarData() 
    { 
     return Json(new { title = "Free Pizza", allday = "false", borderColor = "#5173DA", color = "#99ABEA", textColor = "#000000", description = "<p>This is just a fake description for the Free Pizza.</p><p>Nothing to see!</p>", start = "2015-01-04T22:00:49", end = "2015-01-01", url = "http=//www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/" }); 
    } 

    [HttpGet] 
    public ActionResult GetCalendarData() 
    { 
     return Json(new { title = "Free Pizza", allday = "false", borderColor = "#5173DA", color = "#99ABEA", textColor = "#000000", description = "<p>This is just a fake description for the Free Pizza.</p><p>Nothing to see!</p>", start = "2015-01-04T22:00:49", end = "2015-01-01", url = "http=//www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/" }, JsonRequestBehavior.AllowGet); 
    }

我从我的GetCalendarData电话得到的回应是：对堆栈

{"title":"Free Pizza","allday":"false","borderColor":"#5173DA","color":"#99ABEA","textColor":"#000000","description":"\u003cp\u003eThis is just a fake description for the Free Pizza.\u003c/p\u003e\u003cp\u003eNothing to see!\u003c/p\u003e","start":"2015-01-04T22:00:49","end":"2015-01-01","url":"http=//www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/"}

我看到别人也有类似的问题，但我没有看到关于如何使用AJAX的例子和这个日历的JSON。

我也尝试使用eventSources：文档/示例具有相同的结果。

更新：

我更新了我的代码，基于我试过的不同事情。仍然没有运气。我看过日期格式。我试过了系统生成的日期，但是我所看到的一切似乎都指向了基于字符串的日期（这是我在更新的代码中尝试过的）。不幸的是，这仍然不起作用（至少对我而言）。

仍在寻求帮助。

来源

2015-01-04 webdad3

您的后端'Datetime'格式在javascript中无效 – charlietfl 2015-01-04 15:41:47

@charlietfl - 这样做的正确方法是什么？ – webdad3 2015-01-04 15:52:35

从服务器发送正确的格式 – charlietfl 2015-01-04 15:53:09

答案在函数参数中。一旦这些数据填入日历中填充的数据中。

$(document).ready(function() { 
     var events = []; 
     $('#calendar').fullCalendar({ 
      events: function(start, end, timezone, callback) { 
       $.ajax({ 
        url: source, 
        type: 'POST', 
        data: { }, 
        success: function (doc) { 
         events.push(doc); 
         callback(events); 
        } 
       }); 
      } 

     }); 
    });

来源

2015-01-04 18:03:27 user3263194

我不知道这是否仍然是您的问题，但我确实设法使它适用于我。我几乎有一个确切的案例。这是我的例子：

[HttpGet] 
public JsonResult SerializeEvent(int id) 
{ 
    var sesh = Umbraco.TypedContent(id).Descendants("courseSession"); 
      var eventList = new List<EventModel>(); 
      foreach (var item in sesh) 
      { 
       var eventObj = new EventModel(); 
       eventObj.start = item.GetPropertyValue<DateTime>("startDate").ToString("yyyy-MM-dd"); 
       eventObj.end = item.GetPropertyValue<DateTime>("endDate").ToString("yyyy-MM-dd"); 
       eventObj.title = item.Parent.Name; 
       eventObj.url = item.Parent.Url; 

       eventList.Add(eventObj); 
      }   

      return Json(eventList, JsonRequestBehavior.AllowGet); 
}

做出什么区别，我从ActionResult改变方法的返回类型JsonResult，并且还加入了第二个参数“JsonRequestBehavior.AllowGet”到返回的功能。

希望这会有所帮助。

来源

2016-07-21 16:54:47 Borjan

jquery FullCalendar使用MVC和JSON

回答

相关问题