Saturday, October 25, 2014

Employee Time Log : Calendar View using full-calendar.js

Hi Guys,

I added new page to the Employee Time Log by adding a new calendar view to it. Hope you like it.

Monthly View




 Weekly View


Daily View













Step One : Solution

1) Add MyTimeLogsCalendar.html to Views -> Partials folder and paste following html tags.


<div class="container" ng-controller="TimeLogCalenderController">
     <div class="panel panel-primary">
           <div class="panel-heading">
                <h1 >My Time Logs Calendar View</h1>  
               </div>
         <div class="panel-body">
               <div class="pull-right"><a data-toggle="modal" data-target="#myModal"  class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>  Add</a>
                  <a  class="btn btn-success" ng-click="Refresh()"><span class="glyphicon glyphicon-refresh"></span>  Refresh</a>

              </div>
             <br />
             <div class="table-responsive">
             <div id="calendar"></div>
                 </div>
             </div>
             
         </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">New Time Log</h4>
      </div>
      <div class="modal-body">
        <div ng-controller="TimeLogController">
  <div new-time-log></div>
</div>
      </div>
     
    </div>
  </div>
<div>

2) Refer http://jsfiddle.net/mccannf/AzmJv/16/ and Add the fullcalendar to the solution.

3) Open js -> app.js and paste following code

function LoadCalendarScript(callback) {
    function LoadFullCalendarScript() {
        if (!$.fn.fullCalendar) {
            $.getScript('js/fullcalendar.js', callback);
        }
        else {
            if (callback && typeof (callback) === "function") {
                callback();
            }
        }
    }
    if (!$.fn.moment) {
        $.getScript('js/moment.js', LoadFullCalendarScript);
    }
    else {
        LoadFullCalendarScript();
    }
}

function DrawCalendar() {
    
    /* initialize the calendar
-----------------------------------------------------------------*/
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: false,        
        editable: false,
       
       
        eventRender: function (event, element, icon) {
            if (event.description != "") {
                element.attr('title', event.description);
            }
        },
        eventClick: function (calEvent, jsEvent, view) {
            
                
          
        }
    });
    
}


function DrawFullCalendar() {
    LoadCalendarScript(DrawCalendar);
}

appmodule.controller('TimeLogCalenderController', ["$scope", "$http", "authService", "$filter",  TimeLogCalenderController])


function TimeLogCalenderController($scope, $http, authService, $filter) {
    var scope = $scope;

    scope.collection = [];
  

    scope.rowCollection = [];
  
    scope.ShowCalenderEvents = false;

    scope.authentication = authService.authentication;
    
    scope.DrawCalendar = function () {

        DrawFullCalendar();

    }

    scope.DrawCalendar();

    

    scope.Refresh = function () {

       
        scope.ShowCalenderEvents = true;
        getAllMyTimeLogs(scope, $http, scope.authentication.userName);

    }

    scope.Refresh();

}

function getAllMyTimeLogs(thisscope, http, userName) {
    var responsePromise = http.get("/Services/EmployeeService.svc/GetAllMyTimeLogs?userName=" + userName);

    responsePromise.success(function (data, status, headers, config) {

        thisscope.rowCollection = data;
        thisscope.collection = data;
        thisscope.displayedCollection = [].concat(thisscope.rowCollection);
        thisscope.itemsByPage = 10;

        if (thisscope.ShowCalenderEvents) {
            
            $("#calendar").fullCalendar('removeEvents', false);

            for (var i = 0; i < thisscope.collection.length; i++) {

               
                $("#calendar").fullCalendar('renderEvent',
                      {
                          id : thisscope.collection[i]["ID"],
                          title: thisscope.collection[i]["Name"],
                          start: getDate(thisscope.collection[i]["StartTime"]),
                          end: getDate(thisscope.collection[i]["EndTime"]),
                          allDay: false,
                      },
                      true);
                


            }
            //thisscope.ShowCalenderEvents = false;
        }


    });
    responsePromise.error(function (data, status, headers, config) {
        alert("AJAX failed!");
    });
}