DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Learn MVC Using Angular UI Calendar

Learn MVC Using Angular UI Calendar

We continue our exploration of MVC by looking how to build a web application using the Angular library, Angular UI Caldendar.

Thiruppathi Rengasamy user avatar by
Thiruppathi Rengasamy
CORE ·
Jul. 14, 17 · Web Dev Zone · Tutorial
Like (4)
Save
Tweet
5.72K Views

Join the DZone community and get the full member experience.

Join For Free

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:

  • angular ui calendar
  • jquery fullcalender
  • moment js

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

<script src="~/plugin/angular/angular.min.js"></script>  
   <script src="~/plugin/angular-ui-router/release/angular-ui-router.min.js"></script>  
   <script src="~/plugin/moment/min/moment-with-locales.min.js"></script>  
   <script src="~/plugin/fullcalendar/dist/fullcalendar.min.js"></script>  
   <link href="~/plugin/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" />  
   <script src="~/plugin/angular-ui-calendar/src/calendar.js"></script>  
   <script src="~/plugin/fullcalendar/dist/gcal.js"></script>   

link to your angular configurable file here, using whatever name you gave it.

<script src="~/app/app.module.js"></script>  
<script src="~/app/app.config.js"></script>  
<script src="~/app/calcontroller.js"></script>   

angular module

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

var uiroute = angular  
    .module('uiroute', ['ui.router','ui.calendar']); 

work in angular ui calendar

you can access angular ui by using the ui-calendar directive in your html.

html code

<div ng-controller="calendarcontroller" >  
    <div class="panel panel-default">  
        <div class="panel-heading">  
            <div class="row">  

                <div class="col-md-6">  
                    <div class="btn-switch mb btn-switch-purple">  
                        <button  ng-click="toggleeventsource()" > load json</button>  
                    </div>  
                </div>  
            </div>  
        </div>  
        <div class="panel-body">  
            <div ng-model="eventsources"   
                 calendar="mycalendar"   
                 ui-calendar="uiconfig.calendar" class="calendar"></div>  
        </div>  

    </div>  
</div>    

angular controller

simply initiate the events for the calendar.

$scope.today = new date();  
        var date = new date();  
        var d = date.getdate();  
        var m = date.getmonth();  
        var y = date.getfullyear();  

        $scope.caleventspers = {  
            id: 0,  
            visible: true,  
            classname: ['fc-id-0'],  
            events: [  
                { id: 324, title: 'all day event', start: new date(y, m, 1) },  
                { title: 'long event', start: new date(y, m, d - 5), end: new date(y, m, d - 2) },  
                { id: 999, title: 'repeating event', start: new date(y, m, d - 3, 16, 0), allday: false },  
                { id: 999, title: 'repeating event', start: new date(y, m, d + 4, 16, 0), allday: false },  
                { title: 'birthday party', start: new date(y, m, d + 1, 19, 0), end: new date(y, m, d + 1, 22, 30), allday: false },  
                { title: 'click for google', start: new date(y, m, 28), end: new date(y, m, 29), url: 'http://google.com/' }  
            ]  
        };  

        $scope.eventsources = [$scope.caleventspers];   

set the ui configuration using the code given below.

$scope.uiconfig = {  
            calendar: {  
                height: 400,  
                editable: true,  
                header: {  
                    left: 'month,basicweek,basicday',  
                    center: 'title',  
                    right: 'prev,next today'  
                },  
                eventclick: $scope.alertoneventclick,  
                eventdrop: $scope.alertondrop,  
                eventresize: $scope.alertonresize,  
                // select options  
                selectable: true,  
                selecthelper: true,  
                unselectauto: true,  
                select: function (start, end) {  
                    var title = prompt('event title:');  
                    var eventdata;  
                    if (title) {  
                        eventdata = {  
                            title: title,  
                            start: start.format(),  
                            end: end.format()  
                        };  
                        $scope.addevent(eventdata);  
                    }  
                }  
            }          };   

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

[  

 {  
   "type": "party",  
   "title": "lunch ",  
   "start": "01/01/2015",  
   "end": "01/02/2015",  
   "allday": "false"  
 },  
 {  
   "type": "link",  
   "title": "google.com",  
   "start": "01/01/2015",  
   "end": "01/02/2015",  
   "url": "http://google.com/"  
 }   

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.

$scope.toggleeventsource = function () {  
            $http.get('server/calendar/external-calendar.json').success(function (data) {  

                var caleventsext = {  
                    id: 2,  
                    visible: true,  
                    color: 'green',  
                    textcolor: '#fff',  
                    classname: ['fc-id-2'],  
                    events: []  
                };  

                // -----------  
                // override dates just for demo  
                for (var i = 0; i < data.length; i++) {  
                    data[i].start = new date(y, m, d + i, 12, 0);  
                    data[i].end = new date(y, m, d + i, 14, 0);  
                }  
                // -----------  

                caleventsext.events = angular.copy(data);  

                $scope.eventsources.push(caleventsext);  

            });  
        };   

output 2


mvc

the data will load when you click the load json button.

let’s see the event in this calendar

angular controller

/* alert on eventclick */  
        $scope.alertoneventclick = function (event, allday, jsevent, view) {  
            alert(event.title + ' was clicked ');  
        };  
        /* alert on drop */  
        $scope.alertondrop = function (event, daydelta, minutedelta, allday, revertfunc, jsevent, ui, view) {  
            alert('event droped to make daydelta ' + daydelta);  
        };  
        /* alert on resize */  
        $scope.alertonresize = function (event, daydelta, minutedelta, revertfunc, jsevent, ui, view) {  
            alert('event resized to make daydelta ' + minutedelta);  
        };  

        /* add custom event*/  
        $scope.addevent = function (newevent) {  
            if (newevent) {  
                $scope.caleventspers.events.push(newevent);  
            }  
        };  

        /* remove event */  
        $scope.remove = function (index) {  
            $scope.caleventspers.events.splice(index, 1);  
        };  
        /* change view */  
        $scope.changeview = function (view, calendar) {  
            $scope.mycalendar.fullcalendar('changeview', view);  
        };  
        /* change view */  
        $scope.rendercalender = function (calendar) {  
            $scope.mycalendar.fullcalendar('render');  
        };   

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!

AngularJS Calendar (Apple)

Published at DZone with permission of Thiruppathi Rengasamy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Key Metrics and Measurements to Track Project and Product Performance
  • Working With Geospatial Data in Redis
  • No Sprint Goal, No Cohesion, No Collaboration
  • MuleSoft Logs Integration With Datadog

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo