Calendar Events Using EntityFramework In AngularJS

Description

I have fetched some calendar events using a back-end and shown them on the calendar. The event description will be shown when the end user clicks on the event link in a calendar.

• Click Here>>

Steps to be followed

Step 1

Create an MVC application named SatyaEventCalendarInAngularJS.

Step 2

Create a database named "Calender" in the App_Data folder. Inside this database, create a new table named "Demo_Events".

Then, add some demo records in this table.

Script

Step 3

Now, add the Entity Data Model.

Go to Solution Explorer, right click on Project name from Solution Explorer.

Go to Add > New item > select ADO.NET Entity Data Model under Data.

Enter the Model name > Add.

A popup window will appear (Entity Data Model Wizard). Here, select Generate from the database.

Next, choose your data connection > select your database > Next.

Select tables > enter Model Namespace > Finish.

Step 4

Then, add the fullcalendar.css file into your application. This file can be found in the attached project.

Step 5

Add a JavaScript file related to ui-calendar dependencies into your application.

Step 6

Make a JS file named "MyApp.js" for Angular components.

Code Ref

Code Description

I have included the ui.calendar module in our module (here referred to as "myApp") for implementing the ui-calender (fullcalendar) in our AngularJS application as well as uiCalendarConfig into our Controller for getting the ui-calender object into our Controller.