Learn MVC Using Angular UI Calendar

Introduction

This article demonstrates MVC using Angular UI Calendar with JSON files in Visual Studio 2017.

By following the steps below, you can use Angular UI Calendar in Angular JS in MVC.

  • Create MVC Project.
  • Configure Angular UI calendar.
  • Work in Angular UI calendar.

Create MVC Project

Open Visual Studio 2017.

MVC

Go to New menu >Click New and Project. Now it will open a New Project Window

MVC

You can select ASP.NET Web Application on Framework 4.5. Enter the name of the project in the “Solution Name” textbox and then click OK.

MVC

One more Window should open. Select MVC Template in this popup and the click OK. Now start cropping your image.

Configure Angular UI Calendar

You can download the plugin from these sources:

Open the _Layout.cshtml and use it refer the .js file from your downloaded folder to this view page.

Link to your Angular configurable file here, using whatever name you gave it.

Angular Module

You will need to include the module as a dependency of your application.

Work in Angular UI Calendar

You can access Angular UI by using the ui-calendar directive in your HTML.

HTML Code

Angular Controller

Simply initiate the events for the calendar.

Set the UI configuration using the code given below.


 

Click F5 button and run the application. Now it will appear in the browser and you will see the result.

Output 1

MVC

Yes, we got the result! Let’s start binding the JSON file data. So create one JSON file in the project explorer, and write code like I’ve given below.

JSON File

If you need to, you can bind the data from the database side with JSON format.

Angular Controller

Retrieve the data in the controller using $http service.

Output 2

MVC

The data will load when you click the load JSON button.

Let’s see the event in this calendar

Angular Controller

After adding this code in your controller, just run the application.

Output 3

MVC

If you click on the above data, you can add the new event.

Conclusion

In this article, we have learned MVC using Angular UI Calendar with JSON files. If you have any queries, please tell me through the comments sectionbecause your comments are very valuable.

Happy Coding!

Author Profile

Thiruppathi Rengasamy
I 'm a .Net Developer & Blogger. And also I'm working as senior software engineer in Microsoft Technologies for 5+ Years.I would like to spend my precious time in writing articles, research in .Net technologies and to learn new technologies. I have been awarded as C# Corner MVP & DZone MVB.
Show Buttons
Hide Buttons