Add Right Click Event to Full calender Angular JS Api - angularjs

Question

I am using the Angular UI Calender API in my MVC Project
UI Calender API [http://angular-ui.github.io/ui-calendar/]
I want to add right click Context Menu to it.On clicking any date or Event the context Menu should appear containing link options
1.Add Appointment
2.Add Meeting
3.Add Task
I have used the Bootstrap Context Menu https://github.com/Templarian/ui.bootstrap.contextMenu
The Problem I am facing is on right click the context menu is appearing the event does not captures the Date and Event details from the Calender which i need to pass to show in a POP UP.
I have used below code in my Angular Js Controller.
var calendarDemoApp = angular.module('myCalendarApp', ['ui.calendar', 'ui.bootstrap', 'ui.bootstrap.contextMenu']);
calendarDemoApp.controller('CalendarCtrl',
function ($scope, $http,$compile, $timeout, uiCalendarConfig) {
$scope.SelectedEvent = null;
var isFirstTime = true;`enter code here`
$scope.events = [];
$scope.eventSources = [$scope.events];
//Load events from server
$http.get('/home/getevents', {
cache: true,
params: {}
}).then(function (data) {
$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
});
});
});
/* alert on eventClick */
$scope.alertOnEventClick = function (date, jsEvent, view) {
$scope.alertMessage = (date.title + ' was clicked ');
};
/* alert on Drop */
$scope.alertOnDrop = function (event, delta, revertFunc, jsEvent, ui, view) {
$scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function (event, delta, revertFunc, jsEvent, ui, view) {
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = 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 event*/
$scope.addEvent = function () {
};
/* remove event */
$scope.remove = function (index) {
$scope.events.splice(index, 1);
};
/* Change View */
$scope.changeView = function (view, calendar) {
uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
};
/* Change View */
$scope.renderCalendar = function (calendar) {
$timeout(function () {
if (uiCalendarConfig.calendars[calendar]) {
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
});
};
/*COntext Menu*/
var AppointmentHtml = '<div style="cursor: pointer;"><i class="glyphicon glyphicon-plus"></i>New Appointment</div>';
var AppointmentItem = {
html: AppointmentHtml, click: function ($itemScope, event, modelValue, text, $li, date, jsEvent, view) {
debugger;
var winH = $(window).height();
var winW = $(window).width();
$.ajax({
url: '/Home/Appointment',
data: {},
cache: false,
success: function (result) {
//alert(result);
$("#dialog-content").html(result);
$("#divEdit").dialog({
modal: true,
title: 'Add Appointment',
close: function (event, ui) {
$(this).dialog('destroy');
}
});
$(".ui-dialog").css({ 'min-width': '600px', 'left': winW / 2 - 300 });
},
error: function (request, status, error) {
alert(status);
}
});
}
};
var MeetingHtml = '<div style="cursor: pointer;"><i class="glyphicon glyphicon-user"></i>New Meeting</div>';
var MeetingItem = {
html: MeetingHtml, click: function ($itemScope, event, modelValue, text, $li) {
alert("New Appointment");
console.info($itemScope);
console.info(event);
console.info(modelValue);
console.info(text);
console.info($li);
}
};
var TaskHtml = '<div style="cursor: pointer;"><i class="glyphicon glyphicon-tasks"></i>New Task</div>';
var TaskItem = {
html: TaskHtml, click: function ($itemScope, event, modelValue, text, $li) {
alert("New Task");
console.info($itemScope);
console.info(event);
console.info(modelValue);
console.info(text);
console.info($li);
}
};
$scope.customHTMLOptions = [AppointmentItem, MeetingItem,
TaskItem
];
/* Render Tooltip */
$scope.eventRender = function (event, element, view) {
element.attr({
'tooltip': event.title,
'tooltip-append-to-body': true
});
$compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: function (event) {
$scope.SelectedEvent = event;
},
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
eventAfterAllRender: function () {
if ($scope.events.length > 0 && isFirstTime) {
//Focus first event
uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
isFirstTime = false;
}
}
}
};
$scope.changeLang = function () {
if ($scope.changeTo === 'Hungarian') {
$scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
$scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
$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';
}
};
/* event sources array*/
//$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
//$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
});
Below is my HTML Code:
<section id="directives-calendar" ng-controller="CalendarCtrl">
<div class="calendar" ng-model="eventSources" calendar="myCalendar" context-menu="customHTMLOptions" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>
</Section>