<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.8.0/fullcalendar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.1/bootstrap-material-design.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js"></script>
<script data-require="angular.js@*" data-semver="1.5.0" src="https://code.angularjs.org/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.8.0/fullcalendar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="calendarApp">
<div class="container-fluid" ng-controller="maincontroller">
<div class="row vertical-center">
<!-- <a ui-sref="signUp">Show List</a> -->
<div ui-view="mainContainer" ></div>
</div>
</div>
</body>
</html>
var calendarApp = angular.module("calendarApp", ['ui.bootstrap','ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('signin', {
url: "/signin",
views: {
'mainContainer': {
templateUrl: "signin.html"
}
},
}).state('signUp', {
url: "/signUp",
views: {
'mainContainer': {
templateUrl: "signUp.html"
}
}
}).state('calendar', {
url: "/calendar",
views: {
'mainContainer': {
templateUrl: "calendar.html"
}
}
})
})
.controller("maincontroller",function($scope,$state,$rootScope){
this.isSignup = false;
$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options){
// console.log("Success : ",event, toState, toParams, fromState, fromParams, options)
})
$scope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, options){
// console.log("Error : ",toState)
});
$scope.$on('$stateChangeSuccess', function(event, current) {
// console.log(event, current)
});
$state.go("signin");
}).directive("calendarShow", function() {
return {
restrict: 'A',
link: function (scope, oElement, attrs) {
scope.resetVariables = function(){
scope.edit = true;
scope.getTitle = '';
scope.getStartTime = "";
scope.getDate = "";
scope.getEndTime = "";
scope.setSelectedDate = "";
scope.end_time = "";
scope.start_time = "";
scope.event_date = "";
scope.event_title = "";
scope.event_color = "#ccc";
}
scope.init = function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaDay'
},
editable:false,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
$("#eventCreate").modal("show");
calendar.fullCalendar('unselect');
},
dayClick: function(date, jsEvent, view) {
scope.setSelectedDate = date.format("YYYY-MM-DD");
scope.$apply();
},
eventClick: function(calEvent, jsEvent, view) {
scope.getTitle = calEvent.title;
scope.getDate = moment(calEvent.start).format("YYYY-MM-DD");
scope.getStartTime = moment(calEvent.start).format("hh:mm:ss");
if(calEvent.end!==null){
scope.getEndTime = moment(calEvent.end).format("hh:mm:ss");
}else{
scope.getEndTime = "--";
}
$("#eventDetails").modal("show");
scope.$apply();
},
events: [{
title: 'All Day Event',
start: new Date(y, m, 1),
backgroundColor: '#ccc'
}, {
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: 'green'
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
backgroundColor: 'black',
textColor: "#fff"
}, {
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d + 4, 16, 0),
allDay: false
}, {
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
}, {
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
textColor: "yellow"
}, {
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)
}]
});
}();
scope.addNewEvent = function(){
console.log(angular.element("#calendar"))
if (scope.event_title)
{
var _eDate = moment(scope.setSelectedDate).format("YYYY-MM-DD");
var newEvent = {};
newEvent.title = scope.event_title;
if(scope.start_time===""){
newEvent.start = _eDate;
newEvent.end = _eDate;
newEvent.allDay = true;
}else{
newEvent.start = _eDate+"T"+moment(scope.start_time).format("HH:MM:SS");
newEvent.end = _eDate+"T"+moment(scope.end_time).format("HH:MM:SS");
newEvent.allDay = false;
}
newEvent.backgroundColor = scope.event_color;
angular.element("#calendar").fullCalendar('renderEvent',newEvent);
$("#eventCreate").modal("hide");
scope.resetVariables();
}
};
scope.resetVariables();
}
}
});
/* Styles go here */
a {
cursor: pointer;
}
.marginLeft20 {
margin-left: 20px;
cursor: pointer;
}
.marginTop20 {
margin-top: 20px;
display: inline-block;
}
input[disabled="disabled"] {
background-color: transparent;
border: 2px solid #fff;
}
input:focus {
outline: none;
}
.center{
text-align:center;
}
.vertical-center {
min-height: 100%; /* Fallback for vh unit */
min-height: 100vh; /* You might also want to use
'height' property instead.
Note that for percentage values of
'height' or 'min-height' properties,
the 'height' of the parent element
should be specified explicitly.
In this case the parent of '.vertical-center'
is the <body> element */
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
}
<!-- Login Page start -->
<div class="jumbotron">
<div id="signInContainer" class="floatCenter">
<h3 class="blueText appName paddingTop20 paddingBottom10">
Outlook App
</h3>
<div class="alignCenter form-horizontal">
<form name="loginForm" class="form-group">
<input ng-model="user.userName" class="form-control" required placeholder="username" />
<span ng-show="loginForm.userName.$touched && loginForm.userName.$invalid">The username is required.</span>
<input ng-model="user.password" required class="form-control inputText marginTop20" type="password" placeholder="password" />
<span ng-show="loginForm.password.$touched && loginForm.password.$invalid">The password is required.</span>
</form>
<div class="">
<div class="btn btn-primary btn-raised center" ui-sref="calendar">Sign In</div>
<div ui-sref="signUp" class="btn btn-primary btn-raised center">Sign up</div>
</div>
</div>
</div>
</div>
<!-- Sign Up Page start -->
<div class="jumbotron">
<div id="signUpContainer" class="floatCenter">
<h3 class="blueText appName paddingTop20 paddingBottom10">
Outlook App - Sign up
</h3>
<div class="alignCenter form-horizontal">
<form name="signupForm" class="form-group">
<input ng-model="user.firstName" class="form-control" required placeholder="First Name*" />
<span ng-show="loginForm.userName.$touched && loginForm.userName.$invalid">The username is required.</span>
<input ng-model="user.lastName" class="form-control" required placeholder="Last Name*" />
<input ng-model="user.userId" class="form-control" required placeholder="Employee ID*" />
<input ng-model="user.password" required class="form-control" type="password" placeholder="password*" />
</form>
<div class="marginTop20">
<div class="btn btn-primary btn-raised" ui-sref="signin">Cancel</div>
<div class="btn btn-primary btn-raised" ng-click="DoRegisterUser(user)">Submit</div>
</div>
</div>
</div>
</div>
<!-- Sign Up Page End -->
<div id="calendar" calendar-show></div>
<div id="eventDetails" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{getTitle}}</h4>
</div>
<div class="modal-body form-group">
<div class="pull-right btn btn-info btn-fab" ng-click="edit = !edit"><i class="fa fa-pencil" aria-hidden="true"></i></div>
<div>Date :{{getDate}}
</div>
<div>Start Time :
<input type="text" class="form-control" ng-disabled="edit" ng-model="getStartTime">
</div>
<div>End Time :
<input type="text" class="form-control" ng-disabled="edit" ng-model="getEndTime"> </div>
</div>
<div class="modal-footer">
<button ng-if="edit" type="button" class="btn btn-default btn-raised" data-dismiss="modal">Close</button>
<button ng-if="edit" type="button" class="btn btn-danger btn-raised">Delete</button>
<button ng-if="!edit" type="button" class="btn btn-primary btn-raised" ng-click="edit = !edit">Save</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div id="eventCreate" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">New Event</h4>
</div>
<div class="modal-body form-group">
<div>Event Title :
<input type="text" name="event_title" class="form-control" ng-model="event_title">
</div>
<div>Date :
<input type="text" name="event_date" class="form-control" value="{{setSelectedDate}}" disabled ng-model="setSelectedDate">
</div>
<div>Start Time :
<input type="time" name="start_time" class="form-control" ng-model="start_time">
</div>
<div>End Time :
<input type="time" name="end_time" class="form-control" ng-model="end_time">
</div>
<div>Event Color :
<input type="color" name="favcolor" class="form-control" value="#ccc" ng-model="event_color">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-raised" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-raised" ng-click="addNewEvent()">Save</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}