Question

我们需要提取以下内容

var calEvents

来自单独的JSON文件，因为我们需要从我们自己的数据库填充事件，目前这3个条目在下面的代码中进行了硬编码

<script type="text/javascript">

$( document ).ready(function() {

 var calEvents = [

{"icon": "bars","eid":"someID 1","name":"My event test","url":"#","start":new Date("2016-01-15T08:00:00.000Z"),"end":new Date("2016-01-15T10:00:00.000Z"),"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
{"eid":"someID 1","name":"My event test","url":"#","start":new Date("2016-01-10T17:00:00.000Z"),"end":new Date("2016-01-10T18:00:00.000Z"),"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."}

];


 $("#calendar").jqmCalendar({
  events : calEvents,
  months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
  startOfWeek : 1
  });

我将非常感谢你们给我的任何帮助。

Answer 1

您需要使用AJAX从单独的资源中获取数据。

如果您从数据库中撤出，那么我预计您已经拥有某种端点，可以为您提供JSON服务，期望数据可用。如果你没有这样的东西，那么在你从JavaScript调用数据之前，首先需要设置某种后端服务来以这种格式公开你的数据。

如果你只是将JSON代码放在一个单独的文件中，我可能会质疑为什么这是必要的，因为它仍然是静态数据。

但是，让我们说你有一个端点，它位于http://example.com/calendar/events

在这种情况下，您需要进行如下的AJAX调用：

function getCalEvents(callback) {

  $.ajax({
    url: 'http://example.com/calendar/events',
    dataType: 'json',
    success: function(data) {
      callback(data);
    }
  });

}

$(document).ready(function() {

  getCalEvents(function(calEvents) {

    $("#calendar").jqmCalendar({
      events : calEvents,
      months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      startOfWeek : 1
    });

  });

});

$ .ajax上的文档：http://api.jquery.com/jQuery.ajax/

如果您不需要传递任何其他设置，也可以使用$ .getJSON简写功能更简要地编写：

$(document).ready(function() {

  $.getJSON('http://example.com/calendar/events', function(calEvents) {
    $("#calendar").jqmCalendar({
      events : calEvents,
      months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
      startOfWeek : 1
});
  });

});

$ .getJSON上的文档：http://api.jquery.com/jquery.getjson/

编辑：刚刚注意到您在使用的日期有new Date('...')次来电。我不认为您能够将它们存储在单独的JSON文件中。 jqmCalendar可以处理日期字符串而不转换为日期对象吗？

Answer 2

您应该将JSON中的"start"更改为"begin"。这是jmqCalendar期望的属性名称。

    var calEvents = [

        {
            "icon": "bars",
            "eid": "someID 1",
            "name": "My event test",
            "url": "#",
            "begin": new Date("2016-01-15T08:00:00.000Z"),
            "end": new Date("2016-01-15T10:00:00.000Z"),
            "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."
        },
        {
            "eid": "someID 1",
            "name": "My event test",
            "url": "#",
            "begin": new Date("2016-01-10T17:00:00.000Z"),
            "end": new Date("2016-01-10T18:00:00.000Z"),
            "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."
        }

    ];

从JSON文件中提取数据

2 个答案: