Question

我试图使用 fullcalendar.io 插件（在我的ASP.NET MVC5项目中）但没有成功。

正如我在文档中看到的，我正在尝试这个：

function renderCalendar() {
  $('#calendar').fullCalendar({
    header: {
        left: 'prev,next, today',
        center: 'title',
        right: ''
    },
    lang: currentLangCode,
    eventLimit: true,
    eventSource :  [getEvents()]
  });
}

renderCalendar();

function getEvents() {
  var source = [{}];
  $.ajax({
    async: false,
    url: '/home/fullevents',
    data: { myParam: $('#calendar').fullCalendar('getView').visStart },
    success: function (data) {
      $(data).each(function (e, v) { 
        source.push({
          title: v.Title,
          start: v.Date,
          color: '#25427e'
        });
      });
      console.log(source);
    },
    error: function () {
      alert('could not get the data');
    },
  });
  return source;
}

阵列是这样的：

[
  {
    Date: "/Date(1448985600000)/",
    Title: "teste04"
  }
]

我在这里遗漏了什么吗？它在控制台中不会抛出任何错误。它只是没有用。

Answer 1

首先，您应该避免在阻止UI时创建同步XHR请求。浏览器是单线程的，因此您应尽可能尝试使用异步调用。

我相信你想要实现的目标已经是FullCalendar库的一部分。您可以在首次初始化应用程序时以及每次翻阅日历时调用events选项。

$('#calendar').fullCalendar({
    events: '/myfeed.php'
});

您只需要确保根据FullCalendar文档中列出的Event Object格式化您的json。

示例

以下是如何一起使用WebApi和Fullcalendar的快速示例。

查看

@section scripts{ <script type="text/javascript"> $(function () { $('#calendar').fullCalendar({ events: '@Url.HttpRouteUrl("DefaultApi", new { controller = "Calendar" })' }); }); </script> } <div id="calendar"> </div>

活动模型

这与Fullcalendar在其文档中列出的事件对象相匹配。

public class Event { public string Id { get; set; } public string Title { get; set; } public bool AllDay { get; set; } public DateTime Start { get; set; } public DateTime? End { get; set; } // // You can add the other properties if required // }

完整日历不喜欢正确的案例属性名称，因此我们需要告诉我们的JSON序列化程序使用camelcase。在Global.asax或启动
中添加以下内容
HttpConfiguration config = GlobalConfiguration.Configuration; config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); config.Formatters.JsonFormatter.UseDataContractJsonSerializer = false;

网络Api控制器

public class CalendarController : ApiController { public HttpResponseMessage Get(DateTime start, DateTime end) { // // FullCalendar will keep passing the start and end values in as you navigate through the calendar pages // You should therefore use these days to determine what events you should return . Ie // i.e. var events = db.Events.Where(event => event.Start > start && event.End < end); // // Below is dummy data to show you how the event object can be serialized // var events = new List<Event>(); events.Add(new Event { Id = "EventOne", Title = "My First Event", AllDay = false, Start = DateTime.Now.AddHours(-2), End = DateTime.Now.AddHours(2) }); return Request.CreateResponse(HttpStatusCode.OK, events, Request.GetConfiguration()); } }

来自控制器的响应示例

[{"id":"EventOne","title":"My First Event","allDay":false,"start":"2015-12-08T19:54:49.7938372+00:00" ,"end":"2015-12-08T23:54:49.7938372+00:00"}]

这应该是您开始使用WebApi和Fullcalendar所需的一切。这显然也可以使用MVC并返回Json结果。当您翻阅日历时，您会注意到您的操作在开始和结束日期发生变化时被点击。

希望这有帮助！

如何使用JSON填充完整日历？

1 个答案: