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

June 19, 2019 4 min read

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,
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 set up different colors for different events.

id	String/Integer. Optional Uniquely identifies the given event. Different instances of repeating events should all have the same `id`.
title	String. Required. The text on an event’s element
allDay	`true` 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, determine 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!
start	The date/time an event begins. Required.A Moment-ish input, like an ISO8601 string. Throughout the API this will become a real Moment object.
end	The 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!
URL	String. 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.
className	String/Array. Optional.A CSS class (or array of classes) that will be attached to this event’s element.
editable	`true` or `false`. Optional. Overrides the master editable option for this single event.
start Editable	`true` or `false`. Optional. Overrides the master event Start Editable option for this single event.
duration Editable	`true` or `false`. Optional. Overrides the master event Duration Editable option for this single event.
rendering	Allows alternate rendering of the event, like background events. Can be empty, `"background"`, or `"inverse-background"`
overlap	`true` or `false`. Optional. Overrides the master event Overlap option for this single event. If, prevents this event from being dragged/resized over other events. Also prevents other events from being dragged/resized over this event.
constraint	an event ID, `"businessHours"`, object. Optional. Overrides the master event Constraint option for this single event.
source	Event Source Object. Automatically populated.A reference to the event source that this event came from.
color	Sets an event’s background and border color just like the calendar-wide event Color option.
backgroundColor	Sets an event’s background color just like the calendar-wide event Background Color option.
borderColor	Sets an event’s border color just like the calendar-wide event Border Color option.
textColor	Sets 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.

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.