moji
moji

Reputation: 267

Fetch Data from database to Fullcalendar.io using Json

In the following code I am trying to select events from a table in a database to show it in the open source calendar Fullcalendar.io

public JsonResult GetEvents()
    {
        using (var db = new MyDatabaseEntities())
        {
            var select = from cevent in db.EventTables
                         select new {
                             id = cevent.Id,
                             start = cevent.Start_Time,
                             end = cevent.End_Time
                         };
            var rows = select.ToArray();
            return Json(rows, JsonRequestBehavior.AllowGet);
        }            
    }

The thing is that i use the events as follow to fetch the data as described in documentation:

events: function () {
        $.ajax({ 
            url: 'GetEvents', 
            type: 'GET',
            success: function (result) {
                console.log(result);
            },
            error: function (result) {
                console.log("data is not fetshed from database");
            }
        }); 
    },

and when looking in the console at the browser following picture is the result:

Returned Result from Json Controller

And thats how start and end time are saved in db starttime and end time format in db the start and end date format are wrong and I am not able to fix it, can anyone help please.

Upvotes: 1

Views: 489

Answers (1)

Cat_Clan
Cat_Clan

Reputation: 352

You need to return the date in an ISO8601 date string for start and end params. As stated on http://fullcalendar.io/docs/event_data/startParam/

The code should be:

public JsonResult GetEvents()
{
    using (var db = new MyDatabaseEntities())
    {
        var events = from cevent in db.EventTables
                     select cevent;
        var rows = events.ToList().Select(cevent => new {
                         id = cevent.Id,
                         start = cevent.Start_Time.AddSeconds(1).ToString("yyyy-MM-ddTHH:mm:ssZ"),
                         end = cevent.End_Time.ToString("yyyy-MM-ddTHH:mm:ssZ")
                     }).ToArray();
        return Json(rows, JsonRequestBehavior.AllowGet);
    }            
}

I recommend adding 1 second to the start time, to avoid conflicts on events like: Event1 10:00 to 11:00 Event2 11:00 to 11:30

For fullcalendar.io Event2 is overlaping with Event1, becuase of the last second of Even1 and the first second of Event2.

Upvotes: 2

Related Questions