"calendar"
Bootstrap 3.0.0 Snippet by evarevirus

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="container theme-showcase">
<h1>Calendar</h1>
<div id="holder" class="row" ></div>
</div>
<script type="text/tmpl" id="tmpl">
{{
var date = date || new Date(),
month = date.getMonth(),
year = date.getFullYear(),
first = new Date(year, month, 1),
last = new Date(year, month + 1, 0),
startingDay = first.getDay(),
thedate = new Date(year, month, 1 - startingDay),
dayclass = lastmonthcss,
today = new Date(),
i, j;
if (mode === 'week') {
thedate = new Date(date);
thedate.setDate(date.getDate() - date.getDay());
first = new Date(thedate);
last = new Date(thedate);
last.setDate(last.getDate()+6);
} else if (mode === 'day') {
thedate = new Date(date);
first = new Date(thedate);
last = new Date(thedate);
last.setDate(thedate.getDate() + 1);
}
}}
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
.calendar-day {
width: 100px;
min-width: 100px;
max-width: 100px;
height: 80px;
}
.calendar-table {
margin: 0 auto;
width: 700px;
}
.selected {
background-color: #eee;
}
.outside .date {
color: #ccc;
}
.timetitle {
white-space: nowrap;
text-align: right;
}
.event {
border-top: 1px solid #b2dba1;
border-bottom: 1px solid #b2dba1;
background-image: linear-gradient(to bottom, #dff0d8 0px, #c8e5bc 100%);
background-repeat: repeat-x;
color: #3c763d;
border-width: 1px;
font-size: .75em;
padding: 0 .75em;
line-height: 2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1px;
}
.event.begin {
border-left: 1px solid #b2dba1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

how can i get this code

shubhamchaturvedi (-1) - 5 years ago - Reply -1


That's a good one but it doesn't work.
Missing classes, not responsive...

Jimmy () - 7 years ago - Reply -3


The preview is not identical to the code posted. The code produces a rounded edge for each day of a multi-day event whereas the preview does not. Can you post the code used in the preview? Thanks.

tbuxton () - 5 years ago - Reply 0