Event Manager using ASP.NET MVC and Jquery Full Calendar Plugin

Jquery full calendar plugin is quite in demand especially if there is an event management module involved in your business requirements. I have created a very simple event manager using Jquery full calendar plugin with the combination of ASP.NET MVC5 platform power. My event manager project/product contains basic SQL server entity framework database integrated CRUD (Create, Read, Update & Delete) operations in combination with Jquery full calendar plugin using ASP.NET MVC5 platform.

Today, I shall be demonstrating the execution of my event manager, which is developed using Jquery full calendar plugin along with SQL server entity framework and ASP.NET MVC5 platform.

Prerequisites:

Following are some of the prerequisites for this tutorial before you proceed any further:

1. Download & Installation of Jquery Full Calendar Plugin v3.9.0.
2. Knowledge of Entity Framework.
3. Knowledge of SQL Server Database.
4. Knowledge of ASP.NET MVC5.
5. Knowledge of Jquery.
6. Knowledge of HTML.
7. Knowledge of JavaScript.
8. Knowledge of Bootstrap.
9. Knowledge of C# Programming.

The project/product code is being developed in Microsoft Visual Studio 2019 Professional.

Download Now!

Jquery Plugins

Following list of Jquery plugins are used in the project/product other than full calendar Jquery plugin i.e.

1. Bootstrap Modal plugin.
   
2. qTip plugin for tooltip.
3. Date Range Picker plugin.
4. Datatables plugin.

Features

Provided project/product has following in demand CRUD features i.e.

1. View Events on Full Calendar Jquery Plugin.
2. Add New Event.
3. Edit/Update Existing Event.
4. Delete Existing Event.
   

Project/Product Execution

In order to execute the provided event manager project/product follow the below listed steps i.e.

1) Create new database on SQL server and name it "db_full_calendar". 

2) Then execute the "DB scripts" provided with the project/product. 

3) Now, open the provided "MvcFullCalendarPluginCRUD.sln" visual studio solution file.

4) Then open "Web.config" file and update the following parameters for SQL server connection string configuration i.e.

1. SQL SERVER_NAME - use localhost if using local server.
   
2. DATABASE_NAME - use database name created in step-1 above.
3. SQL_USER_NAME
4. SQL_PASSWORD

5) Build & Execute the project and you will be able to see the following i.e.

6) The provided database setup contains some existing events for the year 2017. If you navigate to the year 2017, you will be able to see following i.e.

Here is the database table view of the existing events i.e.

7) You can edit the existing events of the year 2017 by simply clicking on the event bar shown on the full calendar Jquery plugin. When you click on the event to edit/update the event then you will be able to see following i.e.

8) Now. click on the blue plus button at the top left to add a new event. When you click the add new event button you will be able to see the following i.e.

9) Click on the "Add Event" button and your new event will be created and added into the SQL server database and visible on the UI as well i.e.

10) To edit/update the event, click on the event bar on the full calendar Jquery plugin and you will be able to see a popup as shown below i.e.

11) Edit/Update your event. For example, I have updated end date of the event from 20-June-2020 to 30-June-2020. When I click the "Update Event" button, my event will be updated both in the SQL server database and on the UI as shown below i.e.

12) Now, in order to delete an event, click on the red minus button at the top left and you will be able to see the list of existing events as shown below i.e.

13) Click on the delete button next to each event, which you want to delete. For example, in my case, I have deleted my newly created event. When you delete the event, you will see that both the SQL server database and UI has been updated as shown below i.e.

Conclusion

In this article, you will learn about the execution of my event manager, which is developed using Jquery full calendar plugin along with SQL server entity framework and ASP.NET MVC5 platform. You will learn about different plugins that are being used in this project/product. You will also learn about the features that my event manager project/product offers and finally, you will learn about the execution configurations for my event manager, in order to execute it.