How to Add Full Calendar in ASP.NET MVC Application?

Full Calendar is a plugin that provides full-sized, drag & drops events in the calendar. It uses AJAX to fetch events and is easily configured to use your Asp.net MVC application. It is visually customizable with a rich API.

These are steps to get the Full calendar in the Asp.net MVC application.

• Create a new MVC Application.
• Add fullcalendar.css in the Application.
• Add a view to display the full calendar.
• Modify Ajax Events as per your application requirement.

Add division for a calendar in View as follows.

<div id="”calendar”"></div>

Add Javascript to display the full calendar as follows.

Here we have used static events. you can also get events from the database.

$(document).ready(function () {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        editable: true,
        firstDay: 1,
        year: y,
        month: m,
        date: d,
        header: {
            left: 'title',
            right: 'prev,next today,agendaDay,agendaWeek,month'
        },
        defaultView: 'agendaWeek',
        columnFormat: {
            month: 'ddd',
            week: 'ddd d/M',
            day: 'dddd d/M'
        },
        minTime: 7,
        maxTime: 22,
        droppable: false,
        slotMinutes: 15,
        disableResizing: false,
        events: [
            {
                "title": "Calendar Test",
                "start": "2014-06-01 18:30:00",
                "end": "2014-06-01 19:00:00",
                "allDay": false
            },
            {
                "title": "Calendar Test 1",
                "start": "2014-06-02 18:30:00",
                "end": "2014-06-02 19:00:00",
                "allDay": false
            },
            {
                "title": "Calendar Test 2",
                "start": "2014-06-03 18:30:00",
                "end": "2014-06-03 19:00:00",
                "allDay": false
            }
        ],
    });
});

These are many properties to get calendar event information. Full Calendar stores information about a calendar event in the properties. you can also set up different colors for different events.

These are some events though you can add/update/drag/resize events.

An event click event will be triggered when a user clicks on an event. It is used to get details of that event from this event.

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {
        alert('Event: ' + calEvent.title);
        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        alert('View: ' + view.name);
        
        // Change the border color just for fun
        $(this).css('border-color', 'red');
    }
});

Drop event will be triggered when a user drops any event. A User can get a drop start time and end time from this event. Here event is an Event Object that holds the event’s information (date, title, etc).

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventDrop: function(event, delta, revertFunc) {
        alert(event.title + " was dropped on " + event.start.format());

        if (!confirm("Are you sure about this change?")) {
            revertFunc();
        }
    }
});

The resize event will be triggered when a user resizes any event. The user can get the event start time and end time from this event. Here event is an Event Object that holds the event’s information (date, title, etc).

$('#calendar').fullCalendar({
    events: [
        // events here
    ],
    editable: true,
    eventResize: function(event, delta, revertFunc) {
        alert(event.title + " end is now " + event.end.format());
        
        if (!confirm("Is this okay?")) {
            revertFunc();
        }
    }
});

I Hope this small help to add a full calendar to the Asp.net MVC application will work for you. We are at Satva Solutions, we provide API integration services in any Asp.net MVC application.