Implementing Event Scheduling in Angular UI calendar ~ MiTechDev.com

Sunday, 24 July 2016

Implementing Event Scheduling in Angular UI calendar

21:02:00 Posted by raviteja swayampu , , No comments
Hi every one in this article i am going to explain about Implementing angular UI calendar with Events scheduling using Angular JS.UI-calendar is a open source git hub project for implementing events scheduling in angular enabled web application.To know more about this UI calendar angular control click here.In this article i am going to show the events in UI calendar that are created in the database.
I will explain it in step by step manner like below.

Implementing Event Scheduling in Angular UI calendar

1.Create a ASP.NET web application using Empty MVC template.
2.I am creating this application in visual studio 2013 (may be the source code of this application i am providing do not work in Visual studio 2015).

3.Create a table with below table definition.
CREATE TABLE [dbo].[EventCalender] (
    [EventID]     INT           IDENTITY (1, 1) NOT NULL,
    [Title]       VARCHAR (250) NOT NULL,
    [Description] VARCHAR (250) NOT NULL,
    [StartAt]     DATETIME      NOT NULL,
    [EndAt]       DATETIME      NOT NULL,
    [IsFullDay]   BIT           NOT NULL,
    PRIMARY KEY CLUSTERED ([EventID] ASC)
);
4.After creating table insert some data into the table.

Add ADO.NET Entity Data Model

1.Right click on Models folder--> Add --> New Item -->Select ADO.NET Entity Data Model(Under Data) --> name it -->Add --> select Add from Database (In Entity Data Model wizard) --> Next
2.Select Database --> give name for web.config.
3.Choose your Database objects(tables) and click finish.
4.Now Model is added to my project.

Create a Controller to Display View and fetch data from DB

1.Right click on Controllers folder --> add --> Controller --> name it.
2.Replace the controller code with below code.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AngularUICalender.Models;

namespace AngularUICalender.Controllers
{
    public class HomeController : Controller
    {
        //Index action to display the Index view
        public ActionResult Index()
        {
            return View();
        }
        //Get Events data from server
        public ActionResult GetEventsData()
        {
            using (DatabaseEntities db = new DatabaseEntities())
            {
                var events = db.EventCalenders.OrderBy(a => a.StartAt).ToList();
                return new JsonResult{Data=events,JsonRequestBehavior=JsonRequestBehavior.AllowGet};
            }
        }
 }
}
3.GetEventData method gets the events data from the server to display in UI-Calendar.
4.Add below reference files in Either _layout.cshtml page or Index page.
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<!--Angular javascript references for UI-Calendar-->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/calendar.js"></script>
<script src="~/Scripts/fullcalendar.js"></script>
<script src="~/Scripts/gcal.js"></script>
<!--application script-->
<script src="~/Scripts/myscript.js"></script>
5.download those reference files from link here Download

Add angular script code for UI-calendar implementation

1.Right click on Scripts folder --> add --> java script file --> name it.
2.Replace the code with the below script.
var app = angular.module('myapp', ['ui.calendar']); //Inject dependency here
app.controller('CalenderController', function ($scope, uiCalendarConfig, $http) {
    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];
    //get the events data from server 
    $http.get('/Home/GetEventsData', {
        cache: true,
        params: {}
    }).then(function (data) {
        //get and push events data to calendar here
        $scope.events.slice(0, $scope.events.length);
        angular.forEach(data.data, function (value) {
            $scope.events.push({
                title: value.Title,
                description: value.Description,
                start: new Date(parseInt(value.StartAt.substr(6))),
                end: new Date(parseInt(value.EndAt.substr(6))),
                allDay: value.IsFullDay,
                stick: true
            });
        });
    });
    //Calender configration in angular
    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            displayEventTime: false,
            header: {
                left: 'Day and Monthly calendar Events',
                center: 'title',
                right: 'today prev,next'
            },
            eventClick: function (event) {
                $scope.SelectedEvent = event;
            },
            eventAfterAllRender: function () {
                if ($scope.events.length > 0 && isFirstTime) {
                    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                }
            }
        }
    };
});
3.Here  $scope.uiConfig is used to configure the UI calendar.
4.And $http service to get the data from the server.

Add Index View to display the UI calendar

1.Right click on Index action --> Add View --. name it.
2.Replace the code with below code for Index.cshtml.
@{
    ViewBag.Title = "mitechdev.com";
}
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<!--Angular javascript references for UI-Calendar-->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/calendar.js"></script>
<script src="~/Scripts/fullcalendar.js"></script>
<script src="~/Scripts/gcal.js"></script>
<!--application script-->
<script src="~/Scripts/myscript.js"></script>

<h2>Angular UI Full Caleder Controller</h2>
<div ng-app="myapp" ng-controller="CalenderController">
    <div class="row">
        <div class="col-md-8">
            <!--Calendar display element-->
            <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>
        </div>
    </div>
</div>
3.Finally run the application and see output..

Implementing Event Scheduling in Angular UI calendar

Download source code for this application Source code(Visual studio 2013 code).

Conclusion

I hope this article may helpful for many readers.Please subscribe to this blog www.mitechdev.com to get posts to your mail inbox.And follow through social networks(Facebook,twitter,google plus) for daily updates...

0 comments:

Post a Comment