我在MVC项目中使用Angular UI Calender API
UI日历API [http://angular-ui.github.io/ui-calendar/]
我想右键单击上下文菜单。单击任何日期或事件，上下文菜单应显示包含链接选项
1.添加约会 2.添加会议 3.添加任务
我使用了Bootstrap上下文菜单https://github.com/Templarian/ui.bootstrap.contextMenu
我面临的问题是右键单击上下文菜单显示事件未从日历中捕获日期和事件详细信息，我需要传递给POP UP显示。
我在Angular Js控制器中使用了以下代码。
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];
}）;
以下是我的HTML代码