How to add Full Calendar in Asp.Net Mvc Application?

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

These are steps to get the Full calendar in ASP.Net MVC application.

  • Create new MVC Application.
  • Add fullcalendar.css in Application.
  • Add a view to display 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 for display full calendar as follows. Here we have used static events. you can also get events from database.

Hire Now!

Do You Need Help From Our Dedicated ASP Net MVC Developer?

Hire our best ASP Net MVC developer on hourly, Full-time, Part-time bases. We are ready to help you resolve the problems for ASP MVC web app development.
Hire Now!
   $(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,
                    editable: true,
                    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 setup different colors for different events.

idString/Integer. Optional Uniquely identifies the given event. Different instances of repeating events should all have the same id.
titleString. Required.The text on an event’s element
allDaytrue or false. Optional.Whether an event occurs at a specific time-of-day. This property affects whether an event’s time is shown.
Also, in the agenda views, determines if it is displayed in the “all-day” section.If this value is not explicitly specified, allDayDefault will be used if it is defined.If all else fails, FullCalendar will try to guess.
If either the start or end value has a "T" as part of the ISO8601
date string, allDay will become false. Otherwise, it will be true.Don’t include quotes around your true/false. This value is a boolean, not a string!
startThe date/time an event begins. Required.A Moment-ish input, like an ISO8601 string.
Throughout the API this will become a real Moment object.
endThe exclusive date/time an event ends. Optional.A Moment-ish input, like an ISO8601 string.
Throughout the API this will become a real Moment object.It is the moment immediately after the event has ended.
For example, if the last full day of an event is Thursday, the exclusive
end of the event will be 00:00:00 on Friday!
urlString. Optional.A URL that will be visited when this event is clicked by the user.
For more information on controlling this behavior, see the eventClick callback.
classNameString/Array. Optional.A CSS class (or array of classes) that will be attached to this event’s element.
editabletrue or false. Optional.Overrides the master editable option for this single event.
start Editabletrue or false. Optional.Overrides the master event Start Editable option for this single event.
duration Editabletrue or false. Optional.Overrides the master event Duration Editable option for this single event.
renderingAllows alternate rendering of the event, like background events. Can be empty, "background", or "inverse-background"
overlaptrue or false. Optional.Overrides the master event Overlap option for this single event. If false, prevents this event from being dragged/resized over other events. Also prevents other events from
being dragged/resized over this event.
constraintan event ID, "businessHours", object. Optional.Overrides the master event Constraint option for this single event.
sourceEvent Source Object. Automatically populated.A reference to the event source that this event came from.
colorSets an event’s background and border color just like
the calendar-wide event Color option.
backgroundColorSets an event’s background color just like
the calendar-wide event Background Color option.
borderColorSets an event’s border color just like the
the calendar-wide event Border Color option.
textColorSets an event’s text color just like
the calendar-wide event Text Color option.

 

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

Day click event will be triggered when user clicks on day. It is used to add new event in calendar. you will date for that event as follows.

$('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view) {

        alert('Clicked on: ' + date.format());

        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

        alert('Current view: ' + view.name);

        // change the day's background color just for fun
        $(this).css('background-color', 'red');

    }
});

Event click event will be triggered when a user clicks on an event. It is used to get details of that event in 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 drop start time and end time from this event.¬†Here event is an Event Object that hold 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();
        }

    }
});

Resize event will be triggered when a user resizes any event. The user can get 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 for add full calendar to Asp.Net MVC application will works for you. We are at Satva Solutions, we provide the API integration services for any Asp.Net MVC application.

By | 2017-09-20T11:25:15+00:00 December 6th, 2014|API Integration Services, Asp.Net, Content Management System, How To|