Jquery完整日历json事件源语法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery完整日历json事件源语法相关的知识,希望对你有一定的参考价值。

我正在尝试使用完整日历来加载来自json源的事件。 json来自像feed这样的URL,“mysite.com/getEvents”(返回一个json事件对象)。现在它返回一个对象

{"allDay":false,"end":1325577600,"start":1325577600}

我试过了

$('#calendar').fullCalendar({
    events: 'mysite.com/getEvents'
});

但没有任何反应。我知道我的json缺少标题和id。所以我们有2个问题。

  1. 从json url获取事件的正确方法是什么
  2. 如何为每个创建的事件生成id?
答案

您应该尝试形成JSON,以便它具有所有必需的字段。例如,在我的项目中,以下内容就足够了:

  • ID
  • 标题
  • 开始
  • 结束
  • 一整天

我认为ID只需要对于JSON提要的实例是唯一的,因此您可以在生成JSON的服务器端脚本中使用计数器递增。

JSON脚本的示例输出:

[
    "0",
    {
        "allDay": "",
        "title": "Test event",
        "id": "821",
        "end": "2011-06-06 14:00:00",
        "start": "2011-06-06 06:00:00"
    },
    "1",
    {
        "allDay": "",
        "title": "Test event 2",
        "id": "822",
        "end": "2011-06-10 21:00:00",
        "start": "2011-06-10 16:00:00"
    }
]
另一答案

当我在接受的答案中使用语法时,我在日历上得到四个事件,而不是两个。这两个额外的名字叫做“12:44”。在预感中,我删除了“0”和“1”行,现在它完美地工作:

[
  {
    "title": "Ceramics",
    "id": "821",
    "start": "2014-11-13 09:00:00",
    "end": "2014-11-13 10:30:00"
  },
  {
    "title": "Zippy",
    "id": "822",
    "start": "2014-11-13 10:00:00",
    "end": "2014-11-13 11:30:00"
  }
]
另一答案

我知道这是一个老帖子,但其他人可能正在寻找这个......

你需要在你的json响应周围有括号,它似乎期待一个对象数组:

[
    {
        "title":"foo1",
        "id":"123",
        "start":"2016-02-12T10:30:00",
        "end":"2016-02-12T12:30:00"
    },

    {
        "title":"foo2",
        "id":"456",
        "start":"2016-02-14T10:30:00",
        "end":"2016-02-14T12:30:00"
    }
]
另一答案

我尝试使用cakephp 3完整日历,我有类似的问题。如果您通过ajax eventsource获取事件。那么在将数组发送给你ajax调用之前你需要序列化它。

  $this->set(array(
    'events' =>  $this->xyzCalls->getAllEvents(),
    '_serialize' => 'events'
));

所以它将正确输出如下:

 [
    {
        "id": 22,
        "title": "event1",
        "start": "2018-09-13T13:30:00+00:00",
        "end": "2018-09-13T14:00:00+00:00"
    }
]

然后在完整日历上,调用您的事件来源:

$('#calendar').fullCalendar({

  eventSources: [

    // your event source
    {
      url: '/myfeed.php',
      type: 'POST',
      data: {
        custom_param1: 'something',
        custom_param2: 'somethingelse'
      },
      error: function() {
        alert('there was an error while fetching events!');
      },
      color: 'yellow',   // a non-ajax option
      textColor: 'black' // a non-ajax option
    }

    // any other sources...

  ]

});

以上是关于Jquery完整日历json事件源语法的主要内容,如果未能解决你的问题,请参考以下文章

在完整日历上更改月/周时更新事件json url

通过ajax调用的Jquery完整日历事件

jQuery完整日历 - 如何防止用户在非工作时间添加事件?

jquery完整日历:为前端的每个事件设置不同的颜色

JQuery完整日历,如何更改视图

为 jQuery 日历编码 JSON