"Event Calendar Design"
Bootstrap 3.2.0 Snippet by momodinium

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1 class="title text-center"> July 2014 </h1>
<div class="calendar" data-toggle="calendar">
<div class="row">
<div class="col-xs-12 calendar-day calendar-no-current-month">
<time datetime="2014-06-29">29</time>
</div>
<div class="col-xs-12 calendar-day calendar-no-current-month">
<time datetime="2014-06-30">30</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-01">01</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-02">02</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-03">03</time>
<div class="events">
<div class="event">
<h4>Mid Day Dance Break - SELF CARE</h4>
<div class="desc">
<p>Take a Break and enjoy Live dance and Art from Eries own local Talent</p>
<p>Support for this program is provided in part from an Erie Arts & Culture Project Grant, made possible by community contributions to the Combined Arts & Cultural Campaign and the Erie Arts Endowment.</p>
</div>
<div class="location"> <span class="glyphicon glyphicon-map-marker"></span> State St and Rt 5, Erie, Pa.</div>
<div class="datetime"> <span class="glyphicon glyphicon-time"></span> 12:00am - 1:00pm</div>
<div class="attending">
<img src="http://api.randomuser.me/portraits/women/54.jpg" />
<img src="http://api.randomuser.me/portraits/men/27.jpg" />
<img src="http://api.randomuser.me/portraits/men/61.jpg" />
</div>
<div class="progress">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
padding: 20px 0px 200px;
}
h1.title {
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.calendar {
margin: 0px 40px;
}
.popover.calendar-event-popover {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: rgb(120, 120, 120);
border-radius: 2px;
max-width: 300px;
}
.popover.calendar-event-popover h4 {
font-size: 14px;
font-weight: 900;
}
.popover.calendar-event-popover .location,
.popover.calendar-event-popover .datetime {
font-size: 14px;
font-weight: 700;
margin-bottom: 5px;
}
.popover.calendar-event-popover .location > span,
.popover.calendar-event-popover .datetime > span {
margin-right: 10px;
}
.popover.calendar-event-popover .space,
.popover.calendar-event-popover .attending {
margin-top: 10px;
padding-bottom: 5px;
border-bottom: 1px solid rgb(160, 160, 160);
font-weight: 700;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
$('[data-toggle="calendar"] > .row > .calendar-day > .events > .event').popover({
container: 'body',
content: 'Hello World',
html: true,
placement: 'bottom',
template: '<div class="popover calendar-event-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
$('[data-toggle="calendar"] > .row > .calendar-day > .events > .event').on('show.bs.popover', function () {
var attending = parseInt($(this).find('div.progress>.progress-bar').attr('aria-valuenow')),
total = parseInt($(this).find('div.progress>.progress-bar').attr('aria-valuemax')),
remaining = total - attending,
displayAttending = attending - $(this).find('div.attending').children().length,
html = [
'<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>',
'<h4>'+$(this).find('h4').text()+'</h4>',
'<div class="desc">'+$(this).find('div.desc').html()+'</div>',
'<div class="location">'+$(this).find('div.location').html()+'</div>',
'<div class="datetime">'+$(this).find('div.datetime').html()+'</div>',
'<div class="space">Attending <span class="pull-right">Available spots</span></div>',
'<div class="attending">',
$(this).find('div.attending').html(),
'<span class="attending-overflow">+'+displayAttending+'</span>',
'<span class="pull-right">'+remaining+'</span>',
'</div>',
'<a href="#signup" class="btn btn-success" role="button">Sign up</a>'
].join('\n');
$(this).attr('title', $(this).find('h4').text());
$(this).attr('data-content', html);
});
$('[data-toggle="calendar"] > .row > .calendar-day > .events > .event').on('shown.bs.popover', function () {
var $popup = $(this);
$('.popover:last-child').find('.close').on('click', function(event) {
$popup.popover('hide');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard 2 PRO
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: