angular ui calendar CRUD Operation Example

Today, We want to share with you angular ui calendar CRUD Operation.In this post we will show you angular js calendar & calendar ui, hear for angularjs calendar and mvc calendar we will give you demo and example for implement.In this post, we will learn about angular js ui and bootstrap full calendar with an example.

angular ui calendar CRUD Operation Example

There are the Following The simple About calendar ui, angularjs component library, angularui, angularjs ui and angularjs controls Full Information With Example and source code.

As I will cover this Post with live Working example to develop angular ui datepicker example, so the some major files and Directory structures for this angular ui calendar is following below.

CRUD Operation in angular ui calendar

In this article, we have used the ui-calendar directives to create a simple scheduling application for Display events in a fulll calendar. Here I have only shown more Party events in a calendar for createing the demo simple as well as easy way to understandable. Later we will do more like store/add new party event, updating or edit existing event as well as more PHP Based angular ui calendar CRUD Operation.

simple You can implement step by step event as well as scheduler full calendar using ui-calendar in angular js Example with demo

angular ui calendar
angular ui calendar

AngularUI Calendar for AngularJS

CRUD operations on Angular UI Calendar(Event Scheduling)

  • Make a Visual Studio application (in this article, the application is make in VS 2015).
  • See previous article to know the full Calendar implementation step by step click here.
  • You can search what used here libraries to included as well as how to fetch and display Web server based data in UI-calendar.
  • We are using the same Database table schema as well as ADO.NET Data Model.

You can Just follow the following Phase by Phase in order Way to implement “Event or Scheduler calendar using ui-calendar in angularJS

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.


Download Project Scripts

Step 1: index.html

<!DOCTYPE html>
<html lang="en" ng-app="calendarDemoApp" id="top">
<head>
    <title>AngularUI Calendar for AngularJS</title>
    <link rel="icon" href="favicon.ico" />
    <link rel="stylesheet" href="bootstrap.css" />
    <link rel="stylesheet" href="fullcalendar.css">
    <link rel="stylesheet" href="calendarDemo.css" />
    <script src="jquery.js"></script>
    <script src="angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="moment.js"></script>
    <script src="fullcalendar.js"></script>
    <script src="gcal.js"></script>
    <script src="calendar.js"></script>
    <script src="calendarDemo.js"></script>
</head>
<body data-spy="scroll">
<div role="main">
    <div class="container">
        <section id="directives-calendar" ng-controller="LiveCalcCalenderController">
            <div class="page-header">
            </div>
            <div class="well">
                <div class="row-fluid">
                    <div class="span4">
                        <div class="btn-group calTools">
                          <button class="btn" ng-click="changeLang()">
                            {{changeTo}}
                          </button>              
                          <button class="btn" ng-click="inlineAddedDeletedFunction(familypartySources,familypartySource)">
                            Toggle Source
                          </button>
                          <button type="button" class="btn btn-success" ng-click="addFamilyFunction()">
                            Add FamilyFunction
                          </button>
                        </div>

                        <ul class="unstyled">
                            <li ng-repeat="e in familyfunctions">
                                <div class="alert alert-info">
                                    <a class="close" ng-click="remove($index)"><i class="icon-remove"></i></a>
                                    <b> <input ng-model="e.title"></b> 
                                    {{e.start | date:"MMM dd"}} - {{e.end | date:"MMM dd"}}
                                </div>
                            </li>
                        </ul>

                    </div>

                    <div class="span8">
                        <tabset>
                            <tab select="renderCalendar('pakainfoCalendar1');">
                              <tab-heading>
                               <i class="glyphicon glyphicon-bell"></i> Calendar One
                              </tab-heading>
                              <div class="alert-success fullcalcNotify" ng-show="alertMessage != undefined && alertMessage != ''">
                                <h4>{{alertMessage}}</h4>
                              </div>
                              <div class="btn-toolbar">
                                <p class="pull-right lead">Calendar One View Options</p>
                                <div class="btn-group">
                                    <button class="btn btn-success" ng-click="changeView('agendaDay', 'pakainfoCalendar1')">AgendaDay</button>
                                    <button class="btn btn-success" ng-click="changeView('agendaWeek', 'pakainfoCalendar1')">AgendaWeek</button>
                                    <button class="btn btn-success" ng-click="changeView('month', 'pakainfoCalendar1')">Month</button>
                                </div>
                              </div>
                            <div class="calendar" ng-model="familypartySources" calendar="pakainfoCalendar1" ui-calendar="uiConfig.calendar"></div>
                           </tab>
                           <tab select="renderCalendar('pakainfoCalendar2');">
                            <tab-heading>
                              <i class="glyphicon glyphicon-bell"></i> Calendar Two
                            </tab-heading>
                              <div class="alert-success fullcalcNotify" ng-show="alertMessage != undefined && alertMessage != ''">
                                <h4>{{alertMessage}}</h4>
                              </div>
                              <div class="btn-toolbar">
                                <p class="pull-right lead">Calendar Two View Options</p>
                                <div class="btn-group">
                                    <button class="btn btn-success" ng-click="changeView('agendaDay', 'pakainfoCalendar2')">AgendaDay</button>
                                    <button class="btn btn-success" ng-click="changeView('agendaWeek', 'pakainfoCalendar2')">AgendaWeek</button>
                                    <button class="btn btn-success" ng-click="changeView('month', 'pakainfoCalendar2')">Month</button>
                                </div>
                              </div>
                            <div class="calendar" ng-model="familypartySources" calendar="pakainfoCalendar2" ui-calendar="uiConfig.calendar"></div>
                           </tab>
                           <tab select="renderCalendar('pakainfoCalendar3');">
                            <tab-heading>
                              <i class="glyphicon glyphicon-bell"></i> Calendar Three
                            </tab-heading>
                              <div class="alert-success fullcalcNotify">
                                <h4>This calendar uses the extended form</h4>
                              </div>
                              <div class="btn-toolbar">
                                <p class="pull-right lead">Calendar Three View Options</p>
                                <div class="btn-group">
                                    <button class="btn btn-success" ng-click="changeView('agendaDay', 'pakainfoCalendar3')">AgendaDay</button>
                                    <button class="btn btn-success" ng-click="changeView('agendaWeek', 'pakainfoCalendar3')">AgendaWeek</button>
                                    <button class="btn btn-success" ng-click="changeView('month', 'pakainfoCalendar3')">Month</button>
                                </div>
                              </div>
                            <div class="calendar" ng-model="familypartySources2" calendar="pakainfoCalendar3" ui-calendar="uiConfig.calendar"></div>
                           </tab>
                        </tabset>
                    </div>
                </div>
            </div>
            <h3>How?</h3>
        <pre class="prettyprint linenums">
<div ui-calendar="{{uiConfig.calendar}}" calendar="pakainfoCalendar" class="span8 calendar" ng-model="familypartySources"></div> 

angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);

function LiveCalcCalenderController($scope,$compile,uiCalendarConfig) {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    
    $scope.changeTo = 'Hungarian';

    $scope.familypartySource = {
            url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
            className: 'gcal-familyparty',           // an option!
            currentTimezone: 'America/Chicago' // an option!
    };

    $scope.familyfunctions = [
      {title: 'All Day FamilyFunction',start: new Date(y, m, 1)},
      {title: 'Long FamilyFunction',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
      {id: 999,title: 'Repeating FamilyFunction',start: new Date(y, m, d - 3, 16, 0),allDay: false},
      {id: 999,title: 'Repeating FamilyFunction',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.familyfunctionsF = function (start, end, timezone, callback) {
      var s = new Date(start).getTime() / 1000;
      var e = new Date(end).getTime() / 1000;
      var m = new Date(start).getMonth();
      var familyfunctions = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
      callback(familyfunctions);
    };

    $scope.calFamilyFunctionsExt = {
       color: '#f00',
       textColor: 'yellow',
       familyfunctions: [ 
          {type:'party',title: 'Lunch',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
          {type:'party',title: 'Lunch 2',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
          {type:'party',title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
        ]
    };
    /* alert on familypartyClick */
    $scope.alertOnFamilyFunctionClick = function( date, jsFamilyFunction, view){
        $scope.alertMessage = (date.title + ' was clicked ');
    };

     $scope.alertOnDrop = function(familyparty, delta, revertFunc, jsFamilyFunction, ui, view){
       $scope.alertMessage = ('FamilyFunction Dropped to make dayDelta ' + delta);
    };

    $scope.alertOnResize = function(familyparty, delta, revertFunc, jsFamilyFunction, ui, view ){
       $scope.alertMessage = ('FamilyFunction Resized to make dayDelta ' + delta);
    };

    $scope.inlineAddedDeletedFunction = function(sources,source) {
      var canAdd = 0;
      angular.forEach(sources,function(value, key){
        if(sources[key] === source){
          sources.splice(key,1);
          canAdd = 1;
        }
      });
      if(canAdd === 0){
        sources.push(source);
      }
    };
    /* add custom familyparty*/
    $scope.addFamilyFunction = function() {
      $scope.familyfunctions.push({
        title: 'Open Sesame',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        className: ['openSesame']
      });
    };
    /* remove familyparty */
    $scope.remove = function(index) {
      $scope.familyfunctions.splice(index,1);
    };

    $scope.changeView = function(view,calendar) {
      uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
    };

    $scope.renderCalender = function(calendar) {
      if(uiCalendarConfig.calendars[calendar]){
        uiCalendarConfig.calendars[calendar].fullCalendar('render');
      }
    };

    $scope.familypartyRender = function( familyparty, element, view ) { 
        element.attr({'tooltip': familyparty.title,
                     'tooltip-append-to-body': true});
        $compile(element)($scope);
    };

    $scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        familypartyClick: $scope.alertOnFamilyFunctionClick,
        familypartyDrop: $scope.alertOnDrop,
        familypartyResize: $scope.alertOnResize,
        familypartyRender: $scope.familypartyRender
      }
    };

    $scope.changeLang = function() {
      if($scope.changeTo === 'Hungarian'){
        $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
        $scope.uiConfig.calendar.dayNamesShort = ["ndmsj", "DGfdg", "pikl", "modi", "webs", "demos", "Skmj"];
        $scope.changeTo= 'English';
      } else {
        $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        $scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        $scope.changeTo = 'Hungarian';
      }
    };

    $scope.familypartySources = [$scope.familyfunctions, $scope.familypartySource, $scope.familyfunctionsF];
    $scope.familypartySources2 = [$scope.calFamilyFunctionsExt, $scope.familyfunctionsF, $scope.familyfunctions];
}

            </pre>
        </section>
    </div>
</div>
    </body>
</html>

Step 2: calendarDemo.js

var calendarDemoApp = angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);

calendarDemoApp.controller('LiveCalcCalenderController',
   function($scope, $compile, $timeout, uiCalendarConfig) {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.changeTo = 'Hungarian';

    $scope.familypartySource = {
            url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
            className: 'gcal-familyparty',           // an option!
            currentTimezone: 'America/Chicago' // an option!
    };

    $scope.familyfunctions = [
      {title: 'All Day FamilyFunction',start: new Date(y, m, 1)},
      {title: 'Long FamilyFunction',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
      {id: 999,title: 'Repeating FamilyFunction',start: new Date(y, m, d - 3, 16, 0),allDay: false},
      {id: 999,title: 'Repeating FamilyFunction',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/'}
    ];
    /* familyparty source that calls a function on every view switch */
    $scope.familyfunctionsF = function (start, end, timezone, callback) {
      var s = new Date(start).getTime() / 1000;
      var e = new Date(end).getTime() / 1000;
      var m = new Date(start).getMonth();
      var familyfunctions = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
      callback(familyfunctions);
    };

    $scope.calFamilyFunctionsExt = {
       color: '#f00',
       textColor: 'yellow',
       familyfunctions: [
          {type:'party',title: 'Lunch',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
          {type:'party',title: 'Lunch 2',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
          {type:'party',title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
        ]
    };

    $scope.alertOnFamilyFunctionClick = function( date, jsFamilyFunction, view){
        $scope.alertMessage = (date.title + ' was clicked ');
    };

     $scope.alertOnDrop = function(familyparty, delta, revertFunc, jsFamilyFunction, ui, view){
       $scope.alertMessage = ('FamilyFunction Dropped to make dayDelta ' + delta);
    };

    $scope.alertOnResize = function(familyparty, delta, revertFunc, jsFamilyFunction, ui, view ){
       $scope.alertMessage = ('FamilyFunction Resized to make dayDelta ' + delta);
    };

    $scope.inlineAddedDeletedFunction = function(sources,source) {
      var canAdd = 0;
      angular.forEach(sources,function(value, key){
        if(sources[key] === source){
          sources.splice(key,1);
          canAdd = 1;
        }
      });
      if(canAdd === 0){
        sources.push(source);
      }
    };
    /* add custom familyparty*/
    $scope.addFamilyFunction = function() {
      $scope.familyfunctions.push({
        title: 'Open Sesame',
        start: new Date(y, m, 28),
        end: new Date(y, m, 29),
        className: ['openSesame']
      });
    };
    /* remove familyparty */
    $scope.remove = function(index) {
      $scope.familyfunctions.splice(index,1);
    };

    $scope.changeView = function(view,calendar) {
      uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
    };

    $scope.renderCalendar = function(calendar) {
      $timeout(function() {
        if(uiCalendarConfig.calendars[calendar]){
          uiCalendarConfig.calendars[calendar].fullCalendar('render');
        }
      });
    };

    $scope.familypartyRender = function( familyparty, element, view ) {
        element.attr({'tooltip': familyparty.title,
                      'tooltip-append-to-body': true});
        $compile(element)($scope);
    };

    $scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        familypartyClick: $scope.alertOnFamilyFunctionClick,
        familypartyDrop: $scope.alertOnDrop,
        familypartyResize: $scope.alertOnResize,
        familypartyRender: $scope.familypartyRender
      }
    };

    $scope.changeLang = function() {
      if($scope.changeTo === 'Hungarian'){
        $scope.uiConfig.calendar.dayNames = ["Lovnjd", "kajdf", ",edhan", "godaddy", "webinr", "ejunhs", "djshd"];
        $scope.uiConfig.calendar.dayNamesShort = ["finiy", "kdji", "parld", "lovd", "lking", "jdk", "dsp"];
        $scope.changeTo= 'English';
      } else {
        $scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        $scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        $scope.changeTo = 'Hungarian';
      }
    };

    $scope.familypartySources = [$scope.familyfunctions, $scope.familypartySource, $scope.familyfunctionsF];
    $scope.familypartySources2 = [$scope.calFamilyFunctionsExt, $scope.familyfunctionsF, $scope.familyfunctions];
});

Step 3: calendarDemo.css

  Angular 6 Http Request Methods Tutorial with Example

simple Included calendarDemo.css file into our web application.

body {
	margin-top: 40px;
}
section {
	padding-top: 40px;
}
.paka-unit {
	position: relative;
	padding: 40px 0;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
	background: #020031;
	background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353));
	background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%);
	background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%);
	background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%);
	background: linear-gradient(45deg, #020031 0%,#6d3353 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 );
	-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
	-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
	box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-o-border-radius: 0;
}
.paka-unit .btn, .pagination-centered .btn {
	float: none;
	font-weight: normal;
}
.paka-unit p {
	margin: 1em 0;
}
.bs-docs-social {
	margin-top: 1em;
	padding: 15px 0;
	text-align: center;
	background-color: rgba(245,245,245,0.3);
	border-top: 1px solid rgba(255,255,255,0.3);
	border-bottom: 1px solid rgba(221,221,221,0.3);
}
.bs-docs-social-buttons {
	margin-left: 0;
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}
.bs-docs-social-buttons li {
	display: inline-block;
	padding: 5px 8px;
	line-height: 1;
}

.modal-backdrop {
	overflow: hidden;
	height: 0;
	-webkit-transition: opacity 0.15s linear, height 0 0.2s linear;
	-moz-transition: opacity 0.15s linear, height 0 0.2s linear;
	-ms-transition: opacity 0.15s linear, height 0 0.2s linear;
	-o-transition: opacity 0.15s linear, height 0 0.2s linear;
	transition: opacity 0.15s linear, height 0 0.2s linear;
}
.modal-backdrop.in {
	height: 100%;
	-webkit-transition: opacity 0.15s linear;
	-moz-transition: opacity 0.15s linear;
	-ms-transition: opacity 0.15s linear;
	-o-transition: opacity 0.15s linear;
	transition: opacity 0.15s linear;
}


.fullcalcNotify{
	width: 595px; float: right; margin-bottom: 5px;
}

.calXBtn{
	float: right; margin-top: -5px; margin-right: -5px;
}

.fullcalCart{
	float: left; margin-bottom: 40px;
}

.fc-familyparty.openSesame .fc-familyparty-skin{
	background-color: rgb(229, 229, 11);
	color: black;
}

.fc-familyparty.customFeed .fc-familyparty-skin{
	background-color: rgb(132, 222, 175);
	color: black;
}

.calTools{
	margin-bottom: 10px;
}

A complete Full Source code for AngularJS directive for the Demo of the FullCalendar. http://angular-ui.github.io/ui-calendar/

  Input Fields Validation with Class using Angular Example

angular ui Projects

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular ui-calendar scheduler.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Form Text Box with Angular Material(mat-input) Example
  2.   Multiple Controllers on Page using Angular Example
  3.   Update Scope Variable using Angular Example
  4.   NodeJS RESTful API User Authentication with AngularJS using PHP MYSQL
  5.   Form Textarea with Angular Material Example
  6.   AngularJS Arrays - tips, tricks and examples
  7.   Angular 7|8|9 Validate Mobile number With 10 Digits Example
  8.   AngularJS Login Script using PHP MySQL
  9.   Angular 9/8 Get Selected DropDown Value on Form Submit
  10.   Input Fields Validation with Class using Angular Example

Leave a Reply

Your email address will not be published. Required fields are marked *