Event/Scheduler calendar in asp.net MVC application

Tuesday, June 27, 2017 Sourav Mondal fullcalendar

Introduction

Today I will show you, how to implement Event/Scheduler calendar in asp.net MVC application.

We know that Modern web application imposes ever higher demands on the user interface. Right? So if we have to develop an event/scheduler application where users can view and manage their schedule tasks in a calendar, then how we should develop the application with a good user interface keeping in mind?

Here I will show you, how we can create an event/scheduler application with a modern user interface using jquery fullcalendar plugin.

Fullcalendar is a JavaScript event calendar for displaying events, but it's not a complete solution for event content-management.

So what we will do here? we will implement this Event/Scheduler application in 2 parts where in the first part, I will show you how to display events in fullcalendar and then in the next part we will implement CRUD operation for manage event/schedule tasks for making this tutorial simple and understandable.

Let's implement first part, displaying events in fullcalendar of the tutorial implementing Event/Scheduler calendar in asp.net MVC application.

Follow the following steps in order to implement "Event/Scheduler calendar in asp.net MVC application".

Here In this article, I have used Visual Studio 2015

Step - 1: Create New Project.

First of all, you need to create a new project. So, Open your visual studio. I am using Visual Studio 2015.

Go to File > New > Project > ASP.NET Web Application (under web) > Enter enter application name > select your project location > and then click on add button > It will brings up a new dialog window for select template > here I will select Empty template > checked MVC checkbox from Add folder and core referances for: > and then click on ok button.

Step-2: Add a Database.

After creating the project, we have to create a database for our application. As this is a tutorial project, I will add a database in our applications here in the app_data folder.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create a table in our database.

Now in the database, we will create a new table with the following set of fields (see in the below image) where you will save the calendar events.

double click on the database under app_data folder for open the database in server explorer > expand the database and Right click on Tables node > click on Add New Table > here we will write schema of the table for the table we want to create > now click on Update button for create the table and then again click on Update Database button.

Here I have also added some data so we can view on the calendar.

Step-4: Add Entity Data Model.

Now I will Generate Entity data model from the database tables in our application for work with the database data.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Create a Controller.

Now here in our application, we will add an MVC controller, Home Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller "HomeController"

Step-6: Add a new for HomeController Index Action.

You can see here in the HomeController an MVC action Index action is already added. We will use this action for showing events /schedule tasks in the calendar. Here is the action.

public ActionResult Index()
{
    return View();
}

and now we will add a view for the Index action of HomeController and for adding a view of the action,
Right click inside the view > Add View > Enter view name > select Empty (without model) from template dropdown > Checked the checkbox for use a layout page > click on Add button.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div id="calender"></div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><span id="eventTitle"></span></h4>
            </div>
            <div class="modal-body">
                <p id="pDetails"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print"/>

@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

    <script>
        $(document).ready(function () {
            var events = [];
            $.ajax({
                type: "GET",
                url: "/home/GetEvents",
                success: function (data) {
                    $.each(data, function (i, v) {
                        events.push({
                            title: v.Subject,
                            description: v.Description,
                            start: moment(v.Start),
                            end: v.End != null ? moment(v.End) : null,
                            color: v.ThemeColor,
                            allDay : v.IsFullDay
                        });
                    })

                    GenerateCalender(events);
                },
                error: function (error) {
                    alert('failed');
                }
            })

            function GenerateCalender(events) {
                $('#calender').fullCalendar('destroy');
                $('#calender').fullCalendar({
                    contentHeight: 400,
                    defaultDate: new Date(),
                    timeFormat: 'h(:mm)a',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay,agenda'
                    },
                    eventLimit: true,
                    eventColor: '#378006',
                    events: events,
                    eventClick: function (calEvent, jsEvent, view) {                       
                        $('#myModal #eventTitle').text(calEvent.title);
                        var $description = $('<div/>');
                        $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
                        if (calEvent.end != null) {
                            $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                        }
                        $description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
                        $('#myModal #pDetails').empty().html($description);

                        $('#myModal').modal();
                    }
                })
            }
        })
    </script>
}

Here see in line 6, First I have added a div with id "calender" for render the calendar where we will show events from the database and then we have added required CSS and JS libraries for fullcalendar. You can download from here.

Here We have used the rendersection, we have created in the _Layout.cshtml view. Inside this rendersection we have added required JS libraries for fullcalendar and also added some jquery code for generating calendar and display events in the calendar fro the database.

See in line 57,we have written a function "GenerateCalender" for generating the calendar for showing events/schedule tasks and in line 35, we have written ajax method for fetching data from server side.

Step-7: Update _Layout.cshtml.

We have to update our _Layout.cshtml page. I have added a RenderSection for render js from view page after the jQuery library. See line 39, I have added a RenderSection with name "Scripts"

Here is the complete _Layout.cshtml page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    @RenderSection("Scripts", false)
</body>
</html>

Step-8: Add an another action in HomeController for fetch event data.

You can notice that we have added a URL (/home/GetEvents) for fetching event data in our ajax method in the Index view, but till now we have not written the action for this URL. Let's add this.

This is the MVC action for fetching event data from database and return as Jsonresult.

public JsonResult GetEvents()
{
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var events = dc.Events.ToList();
        return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}

Step-9: Run Application.

We have done all the steps. Now it's time to run the application.

Download Live Demo