Meeting Schedule Widget with Angular

Developer
Jeff Wainwright
Size
3,958 Kb
Views
8,096
  1. Meeting Schedule Widget with Angular Previews
  2. Meeting Schedule Widget with Angular HTML Codes
  3. Meeting Schedule Widget with Angular CSS Codes
  4. Meeting Schedule Widget with Angular JS Codes

How do I make an meeting schedule widget with angular?

This is a simple scheduler synced up with angular & jquery. Todo - update the form validation part. . What is a meeting schedule widget with angular? How do you make a meeting schedule widget with angular? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Meeting Schedule Widget with Angular Previews
IQ Test

Meeting Schedule Widget with Angular - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Meeting Schedule Widget with Angular </title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div class="forHeight"> <div class="activity-inputs"> <form name="myForm" class="myForm"> <label name="name">Who would you like to meet with?</label> <input class="nameInput" type="text" ng-model="name" placeholder="Enter a name here" required /> <div class="clearfix"></div> <label name="time">How long would you like to meet?</label> <input class="timeInput" ng-model="time" placeholder="Meeting length (mins)" type="number" required /> </form> </div> <div class="forNote"> <ol> <li>Enter in the form field info</li> <li>A dropdown widget will show</li> <li>Scroll with your input results<br />in the dropdown widget</li> <li>Toggle the dropdown to see<br />your results any time</li> </ol> </div>
<div class="activity"> <a class="activity-toggle" href="javascript:;"> <i class="activityIcon icon-chevron-right"></i> <i class="activityIcon icon-chevron-down" style="display: none;"></i> </a>	<div class="show-activity"> <h3 class="introActivityType">Meeting coming up</h3> </div> <div class="show-activity" style="display: none"> <h3 class="activityType">You have a meeting with:</h3> <div class="activity-description"> <div class="person activityPersonNameBox meetingBox"> <strong class="name">{{name}}</strong> </div> <div class="activityReadingInfo meetingBox"> <div class="estimate"> You will meet <strong class="name">{{name}}</strong> for <strong class="time">{{time}}</strong> min</span> </div> </div> </div> </div> <div class="clearfix"> </div>
</div>
</div>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Meeting Schedule Widget with Angular - Script Codes CSS Codes

body { background-color: #fcd8d8; height: 100%; width: 100%;
}
.forHeight { margin: 0 auto; min-height: 800px; max-width: 800px; padding-top: 5em;
}
.activity-inputs { margin: 1em; padding: 1em; background: #fef1f1; border-radius: 5px; border: 1px solid #ccc; float: left;
}
.forNote { float: left; margin-left: 0.5em; margin-top: 0.5em;
}
.forNote ol li { font-size: 1.5em; line-height: 1.2em; margin-bottom: 0.2em; text-shadow: 0 1px 0 #fff;
}
.activity { position: fixed; right: 0px; top: -1px; z-index: 50; padding: 0px 0px 13px 15px; height: 50px;
}
.show-activity,
.have-activity { border-radius: 5px; background: transparent; height: auto !important; padding: 0 15px; width: auto !important;
}
.show-activity .activity-wrap,
.have-activity .activity-wrap { position: relative; top: -10px;
}
.show-activity.collapse { height: 10px;
}
.show-activity { height: 30px; width: 290px;
}
html .have-activity { height: 75px;
}
.activity h3 { color: #f3f3f3; font-size: 16px; line-height: 20px; padding: 0px; text-shadow: 1px -1px #666; width:82%;
}
.activity p { padding: 3px 0 6px 0; color: #557300; font-size: 12px;
}
.activity .person
{ display: inline-block; *display: inline; *zoom: 1; float: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background-color: #333; color: #f3f3f3; height:32px; padding: 5px; font-weight: normal !important; font-size: 15px; line-height: 15px; width: 60px;
}
.activity .estimate
{ display: inline; float: right; height:32px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 5px; background-color: #f3f3f3; color: #666666; font-size: 15px; line-height: 15px; width:100%;
} .activity .estimate .time { color: #333; font-weight: bold; }
.activity .have-activity
{ color: white; font-size: 16px; line-height: 30px;
}
.activity .callbackUpdate
{ float: right; width: 20px; position: absolute; right: -10px; top: -10px; overflow: visible;
} .activity .callbackUpdate .callbackIcon { background:green; width: 19px; height: 19px; display: block; } .activity .callbackUpdate .message { width: 134px; padding: 10px; background: #fff; color: #333; font-size: 12px; line-height: normal; border: 1px solid #D5D5D5; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .head4 .container .activity .callbackUpdate .message strong { display: block; }
.activity-description
{ width: 100%; position: relative; float:left;padding-bottom:15px;
}
a.activity-toggle
{ position: absolute; top: 3px; right: 3px; font-size: 10px; z-index: 9;
} a.activity-toggle.noLink { background: green; right 6px; display: block; height: 15px; width: 15px; } a.activity-toggle.noLink span { display: none; }
.activity.compact
{ height: 30px; padding: 0 15px;
} .activity.compact h3, .activity.compact p, .activity.compact .person, .activity.compact .estimate { display: none; } .activity.compact .have-activity { display: block; }
/* Activity Updates (must be cleaned) */
body .activity, body .activity {	background: #777;	height:auto;
}
.activity {	height:auto;	width:300px;	padding:0;
}
body a.activity-toggle {	right:10px;
}
.activity-toggle i {	font-size:16px;	color:#fff;	position:relative;	text-decoration:none; text-shadow:1px -1px #666;	top:6px;
}
.activity-toggle:hover, .activity-toggle i:hover {	text-decoration:none;
}
body .head4 .container .activity .person, body .head4 .container .activity .estimate {	font-size:12px;	line-height:16px;
}
body .head4 .container .activity .estimate {	height:32px; padding-right:15px;
}
.estimate .time {	font-size:14px;
}
.activityPersonNameBox,.activityReadingInfo {float:left;}
.activityPersonNameBox {width:60px;}
.activityPersonNameBox strong { line-height:32px;
}
.activityReadingInfo { float:right; height:32px; width:190px;
}
.callbackUpdate {	background:#6f930a;	border-radius:2px;
}
.callbackUpdate i {	color:#fff; left:2px;	padding:1px; position:relative;
}
.callbackUpdate strong { margin-bottom:5px;
}
.rightRailTopSpace
{ margin-top:40px;
}
Write Preview Comments are parsed with GitHub Flavored Markdown
Add Comment
© 2014 GitHub Inc. All rights reserved.
The GitHub Blog Support Contact

Meeting Schedule Widget with Angular - Script Codes JS Codes

var $activityToggle = $(".activity-toggle");
var $activityAlertWrap = $(".activityAlertWrap");
$('.activity').hide();
$( ".myForm" ).change(function() { $('.activity').fadeIn('slow');
});
$activityToggle.on("click", function () { $(".activityIcon").toggle();
});
$activityToggle.on("click", function () { $(".show-activity").toggle();
});
$activityAlertWrap.mouseover(function () {	$(".activityMessage").show();
});
$activityAlertWrap.mouseout(function () { $(".activityMessage").hide();
});
Meeting Schedule Widget with Angular - Script Codes
Meeting Schedule Widget with Angular - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3
Size 3,958 Kb
Views 8,096
Do you need developer help for Meeting Schedule Widget with Angular?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Wainwright (yowainwright) Script Codes
Name
Playing with URLs and ScrollSpy
Reframe.js Example
Stickybits with a custom vertical position
Noframe.js Example
Trucated.js jQuery Demo
Full CSS Ribbon on 1 element
ScrollDir Example
Quick Bootstrap ScrollSpy Demo
Shave, a javascript plugin for truncating text
Reframe.js Demo
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!