CODEWITHSUNDEEP
asp.net-mvc-4asp.net-web-apifullcalendar
user1736299
user1736299

Reputation: 37

how to feed the data from WEBAPI JSON to FullCalendar

<script type="text/javascript">
    $(document).ready(function() {
    // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({


            url: 'http://localhost/CalendarAPI/api/calendar/'
    })

    });
    </script>

I want to feed the calendar data from WebAPI Json. When I click on the above link I can see the JSON data and I can download the well formatted JSON data.

Need help in feeding the above JSON to the FullCalender JQuery plugin.

Upvotes: 0

Views: 1633

Answers (2)

Dana Bek
Dana Bek

Reputation: 113

Your js code should be like:

$('#calendar').fullCalendar({
   url: '/api/ControllerName/GetEvents/'
})

GetEvents - an action name.

Your model for events should be like this:

public class EventModel
{
    public int id { get; set; }
    public DateTime? start { get; set; }
    public DateTime? end { get; set; }
    public string title { get; set; }
    public bool allDay { get; set; }
}

In your controller create an action (GetEvents) with code like this:

public IEnumerable<EventModel> GetEvents()
    {
        //data from database
        CalendarEntities _db = new CalendarEntities();
        var events = _db.Events.ToList();
        IEnumerable<EventModel> listEvents = events.Select(_event => new EventModel
        {
            id = _event.Id,
            title = _event.Caption,
            start = _event.TimeStart,
            end = _event.TimeEnd,
            allDay = _event.AllDay
        });
        return listEvents;
    }

Upvotes: 2

movsky
movsky

Reputation: 661

The documentation of fullcalendar is really good, just take a look: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

You have several ways to include the data from your script. The easiest way is:

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

You can also use an extended form, to pass more options:

$('#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...

    ]

});

Upvotes: 1

Related Questions