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">×</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();
}
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!");
});
}
Comments
Post a Comment