Introduction

This article demonstrates MVC using Angular UI calendar with JSON file in Visual Studio 2017.

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 & project. Now it will open New Project Window

MVC

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

MVC

One more Window should be appearing. Select MVC Template in this popup & Click ok button. Now start cropping image.

Configure Angular UI Calendar

You can download the plug in from

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

</div>
<ol class="dp-c" start="1">
	<li class="alt"><script src=<span class="string">"~/Plugin/angular/angular.min.js"</span>></script></li>
	<li class="">   <script src=<span class="string">"~/Plugin/angular-ui-router/release/angular-ui-router.min.js"</span>></script></li>
	<li class="alt">   <script src=<span class="string">"~/Plugin/moment/min/moment-with-locales.min.js"</span>></script></li>
	<li class="">   <script src=<span class="string">"~/Plugin/fullcalendar/dist/fullcalendar.min.js"</span>></script></li>
	<li class="alt">   	<link href=<span class="string">"~/Plugin/fullcalendar/dist/fullcalendar.min.css"</span> rel=<span class="string">"stylesheet"</span> /></li>
	<li class="">   <script src=<span class="string">"~/Plugin/angular-ui-calendar/src/calendar.js"</span>></script></li>
	<li class="alt">   <script src=<span class="string">"~/Plugin/fullcalendar/dist/gcal.js"</span>></script></li>
</ol>
</div>

Link your angular configurable file, whatever you given name

</div>
<ol class="dp-c" start="1">
	<li class="alt"><script src=<span class="string">"~/App/App.module.js"</span>></script></li>
	<li class=""><script src=<span class="string">"~/App/App.config.js"</span>></script></li>
	<li class="alt"><script src=<span class="string">"~/App/CalController.js"</span>></script></li>
</ol>

 

Angular Module

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

</div>
<ol class="dp-c" start="1">
	<li class="alt"><span class="keyword">var</span> uiroute = angular</li>
	<li class="">    .module(<span class="string">'uiroute'</span>, [<span class="string">'ui.router'</span>,<span class="string">'ui.calendar'</span>]);</li>
</ol>

Work in Angular UI Calendar

You can set as Angular UI with the ui-calendar directive in the html

<div class="dp-highlighter" style="text-align: justify;">
<ol class="dp-c" start="1">
	<li class="alt">div ng-model=<span class="string">"eventSources"</span></li>
	<li class="">                 calendar=<span class="string">"myCalendar"</span></li>
	<li class="alt">                 ui-calendar=<span class="string">"uiConfig.calendar"</span> <span class="keyword">class</span>=<span class="string">"calendar"</span>></div></li>
</ol>
</div>

Html Code

  1. “CalendarController” >
  2.     
    class=“panel panel-default”>
  3.         
    class=“panel-heading”>
  4.             
    class=“row”>
  5.                 
    class=“col-md-6”>
  6.                     
    class=“btn-switch mb btn-switch-purple”>
  7.                         “toggleEventSource()” > Load Json
  8.                     
  •                 </div>
  •             </div>
  •         </div>
  •         
    class=“panel-body”>
  •             
    “eventSources”
  •                  calendar=“myCalendar”
  •                  ui-calendar=“uiConfig.calendar” class=“calendar”>
  •         </div>
  •     </div>
  • </div>
  • Angular Controller

    Simply initiate the events for calendar

    1. $scope.today = new Date();
    2.         var date = new Date();
    3.         var d = date.getDate();
    4.         var m = date.getMonth();
    5.         var y = date.getFullYear();
    6.         $scope.calEventsPers = {
    7.             id: 0,
    8.             visible: true,
    9.             className: [‘fc-id-0’],
    10.             events: [
    11.                 { id: 324, title: ‘All Day Event’, start: new Date(y, m, 1) },
    12.                 { title: ‘Long Event’, start: new Date(y, m, d – 5), end: new Date(y, m, d – 2) },
    13.                 { id: 999, title: ‘Repeating Event’, start: new Date(y, m, d – 3, 16, 0), allDay: false },
    14.                 { id: 999, title: ‘Repeating Event’, start: new Date(y, m, d + 4, 16, 0), allDay: false },
    15.                 { title: ‘Birthday Party’, start: new Date(y, m, d + 1, 19, 0), end: new Date(y, m, d + 1, 22, 30), allDay: false },
    16.                 { title: ‘Click for Google’, start: new Date(y, m, 28), end: new Date(y, m, 29), url: http://google.com/&#8217; }
    17.             ]
    18.         };
    19.         $scope.eventSources = [$scope.calEventsPers];

    you  set to the ui configuration, like  the code given below

    1. $scope.uiConfig = {
    2.             calendar: {
    3.                 height: 400,
    4.                 editable: true,
    5.                 header: {
    6.                     left: ‘month,basicWeek,basicDay’,
    7.                     center: ‘title’,
    8.                     right: ‘prev,next today’
    9.                 },
    10.                 eventClick: $scope.alertOnEventClick,
    11.                 eventDrop: $scope.alertOnDrop,
    12.                 eventResize: $scope.alertOnResize,
    13.                 // Select options
    14.                 selectable: true,
    15.                 selectHelper: true,
    16.                 unselectAuto: true,
    17.                 select: function (start, end) {
    18.                     var title = prompt(‘Event Title:’);
    19.                     var eventData;
    20.                     if (title) {
    21.                         eventData = {
    22.                             title: title,
    23.                             start: start.format(),
    24.                             end: end.format()
    25.                         };
    26.                         $scope.addEvent(eventData);
    27.                     }
    28.                 }
    29.             }          };

    Click F5 button and Run the Application. Now it will appear in 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 project explorer, write the code likes below.

    JSON File

    1. [
    2.  {
    3.    “type”“party”,
    4.    “title”“Lunch “,
    5.    “start”“01/01/2015”,
    6.    “end”“01/02/2015”,
    7.    “allDay”“false”
    8.  },
    9.  {
    10.    “type”“link”,
    11.    “title”“google.com”,
    12.    “start”“01/01/2015”,
    13.    “end”“01/02/2015”,
    14.    “url”http://google.com/&#8221;
    15.  }

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

    Angular Controller

    Retrieve the data in controller using $http service.

    1. $scope.toggleEventSource = function () {
    2.             $http.get(‘server/calendar/external-calendar.json’).success(function (data) {
    3.                 var calEventsExt = {
    4.                     id: 2,
    5.                     visible: true,
    6.                     color: ‘green’,
    7.                     textColor: ‘#fff’,
    8.                     className: [‘fc-id-2’],
    9.                     events: []
    10.                 };
    11.                 // ———–
    12.                 // override dates just for demo
    13.                 for (var i = 0; i < data.length; i++) {
    14.                     data[i].start = new Date(y, m, d + i, 12, 0);
    15.                     data[i].end = new Date(y, m, d + i, 14, 0);
    16.                 }
    17.                 // ———–
    18.                 calEventsExt.events = angular.copy(data);
    19.                 $scope.eventSources.push(calEventsExt);
    20.             });
    21.         };

    Output 2

    MVC

    Data will load when you click load Json button.

    Let’s see the event in this calendar

    Angular Controller

    1. /* alert on eventClick */
    2.         $scope.alertOnEventClick = function (event, allDay, jsEvent, view) {
    3.             alert(event.title + ‘ was clicked ‘);
    4.         };
    5.         /* alert on Drop */
    6.         $scope.alertOnDrop = function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
    7.             alert(‘Event Droped to make dayDelta ‘ + dayDelta);
    8.         };
    9.         /* alert on Resize */
    10.         $scope.alertOnResize = function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
    11.             alert(‘Event Resized to make dayDelta ‘ + minuteDelta);
    12.         };
    13.         /* add custom event*/
    14.         $scope.addEvent = function (newEvent) {
    15.             if (newEvent) {
    16.                 $scope.calEventsPers.events.push(newEvent);
    17.             }
    18.         };
    19.         /* remove event */
    20.         $scope.remove = function (index) {
    21.             $scope.calEventsPers.events.splice(index, 1);
    22.         };
    23.         /* Change View */
    24.         $scope.changeView = function (view, calendar) {
    25.             $scope.myCalendar.fullCalendar(‘changeView’, view);
    26.         };
    27.         /* Change View */
    28.         $scope.renderCalender = function (calendar) {
    29.             $scope.myCalendar.fullCalendar(‘render’);
    30.         };

    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 section, because your comments are very valuable.

    Happy Coding!…

    Advertisements