jQuery FullCalendar 调用填充数据方法失败

Posted 2023-02-26

【中文标题】jQuery FullCalendar 调用填充数据方法失败

【英文标题】：jQuery FullCalendar invoking populate data method failing

【发布时间】：2012-01-14 17:46:55

【问题描述】：

我目前在 ASP.NET MVC3 (Razor) 中的一个小网站上工作，我需要一个显示日历的页面，其中包含一些约会。

我选择了 FullCalendar，但遇到了一些麻烦。通过将日历注入<div>，我可以正常显示日历。

但是一旦我尝试添加“事件”属性以便调用我的填充数据方法，日历甚至都不会显示，自然我永远不会到达控制器中的方法。即使我尝试添加一个标题部分来操作标题和导航箭头，它也不会呈现。

我已经在我的母版页中包含了所有必要的脚本，这里是索引视图的源视图，您可以看到包含的所有脚本。

我无法理解我做错了什么。我应该能够很好地呈现 html 并调用该方法，以便在我的日历中获得一些约会。

还有为什么我不能做一个简单的操作，比如修改标题并将标题定位在我想要的位置。我的语法一定是坏了？

   <title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/css/jquery.lightbox-0.5.css" rel="Stylesheet" type="text/css" media="screen" />
<link href="/Content/fullcalendar.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

    <script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>

    <script src="/Scripts/jquery.js" type="text/javascript"></script>

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>

    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

    <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript">  </script>

    <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>

    <script src="/Scripts/fullcalendar.min.js" type="text/javascript"></script>

    <script src="/Scripts/jquery.lightbox-0.5.min.js" type="text/javascript"></script>

    <script src="/Scripts/Venatores.js" type="text/javascript"></script>

数据模型：

 public class EventModel

    public int ID  get; set; 
    public string Title  get; set; 
    public DateTime StartDateTime  get; set; 
    public DateTime EndDateTime  get; set; 
    public bool IsAllDay  get; set; 

名为 CalendarController 的控制器：

        public ActionResult Index()
    

        return View();
    



    public JsonResult PopulateData(double start, double end)
    

      //  var startDateTime = FromUnixTimestamp(start);
       // var endDateTime = FromUnixTimestamp(end);

        EventModel appointment = new EventModel();
        appointment.StartDateTime = DateTime.Now;
        appointment.EndDateTime = appointment.StartDateTime.AddHours(2.0);
        appointment.IsAllDay = false;
        appointment.Title = "Riffel";
        appointment.ID = 1;

        List<EventModel> appointments = new List<EventModel>();
        appointments.Add(appointment);

        var clientList = new List<object>();

        foreach (EventModel e in appointments)
        
            clientList.Add(
                new
                    
                        id = e.ID,
                        title = e.Title,
                        //description = e.Description,
                        start = ToUnixTimespan(e.StartDateTime),
                        end = ToUnixTimespan(e.EndDateTime),
                        allDay = e.IsAllDay,
                        url = "www.google.com"
                );
        
        return Json(clientList.ToArray(), JsonRequestBehavior.AllowGet);

    

    private static DateTime FromUnixTimestamp(double timestamp)
    
        var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
        return origin.AddSeconds(timestamp);
    

    private long ToUnixTimespan(DateTime date)
    
        TimeSpan tspan = date.ToUniversalTime().Subtract(
        new DateTime(1970, 1, 1, 0, 0, 0));

        return (long)Math.Truncate(tspan.TotalSeconds);
    

我的索引视图：

<script type="text/javascript" language="javascript">

$(document).ready(function () 

    $('#calendar').fullCalendar(
            //events: "/Calendar/PopulateData"
        );
    );

</script>

<h2>Index</h2>
<div id="calendar"></div>

【参考方案1】：

我不在 ASP 中工作 - 但是，如果您想使用服务器端 JSON 回调，FullCalendar API 似乎需要“url”设置。 “事件”设置用于客户端数组或函数填充。除此之外 - 从表面上看 - 其余的大部分看起来都是有道理的。