Jquery Full Calendar json event source syntax

I’m trying to use full calendar to load events from a json source. The json is from a URL like a feed, “mysite.com/getEvents” (which returns a json event object). Right now it returns an object

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

I tried

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

But nothing happens. I know my json is missing the title and the id. So we have 2 questions.

  1. What is the proper way to get the events from a json url
  2. How do I go about generating an id for every event created?

Full Calendar is not showing events from JSON source

I’ve read the entire documentation on Full Calendar and still I cannot render anything from a JSON source. I’m running Rails 3.2 and when I preview my JSON source with Google’s Developer Tools I see t



jQuery full calendar adding event only with months and days

I’m using full calendar and wondering if it is possible to add event only with months and days . To simplify what I’m meaning lets take a look at script jQuery(#calendar).fullCalendar({ header: { le

Modify jquery full calendar extenal event by using date picker

Can someone give me advice for below functionality is possible with jquery full calendar. Once we drop a external event in to a date block, is it possible to extant the event by using a external date

Jquery event calendar

Please help choose jquery event calendar (or other good javascript event calendar) and how to add events.. but no jquery full calendar because I’m interest in like (short month view) http://jqueryui.c

Jquery Full calendar and dynamic event colors

I would like to to pass the colors for the events through my json events source for jquery fullcalendar, how do i achieve this ?

JQuery Full Calendar date format

Im using JQuery Full Calendar Plugin. Code: $(‘#mycalendar’).fullCalendar({ ** options ** events: function(start, end, callback) { $.ajax({ url: ‘/myloader/’, dataType: ‘json’, data: { // our hypothe

Jquery Full Calendar Questions – Color on group of events & multiple event sources

I am looking at jquery full calendar 1.5 and have a couple questions. How would multiple source look like? jQuery $.ajax options You can also specify any of the jQuery $.ajax options within the same o

Delay JSON Feed for jQuery Full Calendar

I noticed if you setup an event source(ie you going to be doing AJAX requests to the server) and start clicking next month rapidly it will fire off a request for each month. So if I click rapidly to g

JQuery Full Calendar with Spring MVC .. Can’t call the controller to get JSON object

I am trying to use JQuery Full Calendar along with Spring MVC + Freemarker. I have made a demo like that. Target: I need to call the controller to fetch JSON object that contains events to render over

qTip not appearing on jQuery Full Calendar

I’m trying to integrate qTip2 with jQuery full calendar but I’m not able to display the qTip over the event on the full calendar. I followed the same procedure given in the Full Calendar eventRender d

Answers

You should try forming the JSON so it has all the required fields. For example, on my project the following is sufficient:

  • id
  • title
  • start
  • end
  • allDay

I think the ID only has to be unique for that instance of the JSON feed, so you could just have a counter incrementing in the server-side script that generates the JSON.

Example output from the JSON script:

[
    "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"
    }
]

When I use the syntax in the accepted answer, I get four events on the calendar, not two. The two extra are bizarrely titled “12:44”. On a hunch, I removed the “0” and “1” lines and now it works perfectly:

[
  {
    "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"
  }
]

I know this is an old post but others may be looking for this…

You need to have brackets around your json response, it seems to be expecting an array of objects:

[
    {
        "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"
    }
]