"Calendario Agenda - En progreso..."
Bootstrap 4.0.0 Snippet by evargas

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="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<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);
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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

how to add close icon in popup tooltip..

anwarali66 (-1) - 6 years ago - Reply -1


how can i make the calendar position in a specific date when it loads?

mcatania () - 1 year ago - Reply 0


how can i make the calendar position in a specific date when it loads?

mcatania () - 1 year ago - Reply 0


how can i change the event

toanlamont () - 2 years ago - Reply 0


A little help with default data format?

Spacer () - 2 years ago - Reply 0


Cập nhật

mjnhnnnn () - 3 years ago - Reply 0