This post contains a total of 10+ Bootstrap Calendar Examples with Source Code. All these Calendar examples are made using Bootstrap.
You can use the source code of these examples with credits to the original owner.
Related Posts
Bootstrap Calendar Examples
1. Bootstrap calendar with Event Adding
Made by PigDog. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://demos.creative-tim.com/fullcalendar/assets/css/fullcalendar.css'>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Helvetica Nueue", Arial, Verdana, sans-serif;
background-color: #dddddd;
}
#wrap {
width: 100%;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event {
/* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366cc;
color: #fff;
font-size: 0.85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
/* float: right; */
margin: 0 auto;
width: 900px;
background-color: #ffffff;
border-radius: 6px;
box-shadow: 0 1px 2px #c3c3c3;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class='col-6'>
<p>Test</p>
</div>
<div class='col-6'>
<div id='wrap'>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://demos.creative-tim.com/fullcalendar/assets/js/fullcalendar.js'></script>
<script>
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/* className colors
className: default(transparent), important(red), chill(pink), success(green), info(blue)
*/
/* initialize the external events
-----------------------------------------------------------------*/
$("#external-events div.external-event").each(function () {
// create an Event Object (https://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data("eventObject", eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var calendar = $("#calendar").fullCalendar({
header: {
left: "title",
center: "agendaDay,agendaWeek,month",
right: "prev,next today" },
editable: true,
firstDay: 1, // 1(Monday) this can be changed to 0(Sunday) for the USA system
selectable: true,
defaultView: "month",
axisFormat: "h:mm",
columnFormat: {
month: "ddd", // Mon
week: "ddd d", // Mon 7
day: "dddd M/d", // Monday 9/7
agendaDay: "dddd d" },
titleFormat: {
month: "MMMM yyyy", // September 2009
week: "MMMM yyyy", // September 2009
day: "MMMM yyyy" // Tuesday, Sep 8, 2009
},
allDaySlot: false,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt("Event Title:");
if (title) {
calendar.fullCalendar(
"renderEvent",
{
title: title,
start: start,
end: end,
allDay: allDay },
true // make the event "stick"
);
}
calendar.fullCalendar("unselect");
},
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) {
// this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data("eventObject");
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (https://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$("#calendar").fullCalendar("renderEvent", copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($("#drop-remove").is(":checked")) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
events: [
{
title: "All Day Event",
start: new Date(y, m, 1) },
{
id: 999,
title: "Repeating Event",
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
className: "info" },
{
id: 999,
title: "Repeating Event",
start: new Date(y, m, d + 4, 16, 0),
allDay: false,
className: "info" },
{
title: "Meeting",
start: new Date(y, m, d, 10, 30),
allDay: false,
className: "important" },
{
title: "Lunch",
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
className: "important" },
{
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),
url: "https://google.com/",
className: "success" }] });
});
</script>
</body>
</html>
2. Simple Working Bootstrap Calendar
Made by AnimalMother. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.minidiv {
background-color: beige;
font-size: 10px;
color: red;
text-align: right;
vertical-align: super;
float:right;
}
</style>
</head>
<body>
<div class="container col-sm-4 col-md-7 col-lg-4 mt-5">
<div class="card">
<div class="card-header">
<div class="form-inline">
<button class="btn btn-outline-primary col-sm-3" id="previous" onclick="previous()"> < BakΓ₯t</button>
<div class="col-sm-6"><h3 id="monthAndYear" style="text-align: center"></h3></div>
<button class="btn btn-outline-primary col-sm-3" id="next" onclick="next()">FramΓ₯t ></button>
</div>
</div>
<table class="table table-bordered table-responsive-sm mb-0" id="calendar">
<thead>
<tr>
<th>MΓ₯n</th>
<th>Tis</th>
<th>Ons</th>
<th>Tor</th>
<th>Fre</th>
<th>LΓΆr</th>
<th>SΓΆn</th>
</tr>
</thead>
<tbody id="calendar-body">
</tbody>
</table>
<!-- --------------- DISPLAY NONE --------------- -->
<form class="form-inline" style="display:none">
<label class="lead mr-2 ml-2" for="month">Jump To: </label>
<select class="form-control col-sm-2" name="month" id="month">
<option value=0>Jan</option>
</select>
<label for="year"></label>
<select class="form-control col-sm-2" name="year" id="year">
<option value=2018>2018</option>
</select>
</form>
<!-- ------------------------------------------- -->
</div>
<div class="card" id="planner-card" style="display:none">
<h5 class="card-header" id="selectedDate"> </h3>
<table class="table table-bordered table-responsive-sm" id="planner">
<thead>
<tr>
<th>Uppdrag 1</th>
</tr>
<tr>
<th>Uppdrag 2</th>
</tr>
<tr>
<th>Uppdrag 3</th>
</tr>
</thead>
<tbody id="planner-body">
</tbody>
</table>
</div>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header bg-dark text-white">
<h5 id="selected-modal-title" class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<select class="form-control">
<option>Default select</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</div>
<!--<button name="jump" onclick="jump()">Go</button>-->
<script src="cal.js"></script>
<!-- Optional JavaScript for bootstrap -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script>
today = new Date();
currentMonth = today.getMonth();
currentYear = today.getFullYear();
selectYear = document.getElementById("year");
selectMonth = document.getElementById("month");
months = ["Jan", "Feb", "Mar", "Apr", "Maj", "Juni", "Juli", "Aug", "Sep", "Okt", "Nov", "Dec"];
monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function next() {
currentYear = currentMonth === 11 ? currentYear + 1 : currentYear;
currentMonth = (currentMonth + 1) % 12;
showCalendar(currentMonth, currentYear);
}
function previous() {
currentYear = currentMonth === 0 ? currentYear - 1 : currentYear;
currentMonth = currentMonth === 0 ? 11 : currentMonth - 1;
showCalendar(currentMonth, currentYear);
}
function jump() {
currentYear = parseInt(selectYear.value);
currentMonth = parseInt(selectMonth.value);
showCalendar(currentMonth, currentYear);
}
function showCalendar(month, year) {
let firstDay = new Date(year, month).getDay() - 1;
tbl = document.getElementById("calendar-body"); // body of the calendar
// clearing all previous cells
tbl.innerHTML = "";
// filing data about month and in the page via DOM.
monthAndYear.innerHTML = months[month] + " " + year;
selectYear.value = year;
selectMonth.value = month;
// creating all cells
let date = 1;
let d = 0;
for (let i = 0; i < 6; i++) {if (window.CP.shouldStopExecution(0)) break;
// creates a table row
let row = document.createElement("tr");
//creating individual cells, filing them up with data.
for (let j = 0; j < 7; j++) {if (window.CP.shouldStopExecution(1)) break;
if (i === 0 && j < firstDay) {
cell = document.createElement("td");
cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
d++;
} else
if (date > daysInMonth(month, year)) {
break;
} else
{
cell = document.createElement("td");
cell.setAttribute("id", `d${j + 1 + i * 7 - d}`);
cellText = document.createTextNode(date);
divInCell = document.createElement("div");
divInCell.setAttribute("class", "minidiv");
divText = document.createTextNode("8.5");
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.classList.add("bg-info");
} // color today's date
cell.appendChild(cellText);
row.appendChild(cell);
divInCell.appendChild(divText);
cell.appendChild(divInCell);
date++;
}
}window.CP.exitedLoop(1);
tbl.appendChild(row); // appending each row into calendar body.
}window.CP.exitedLoop(0);
}
// check how many days in a month code from https://dzone.com/articles/determining-number-days-month
function daysInMonth(iMonth, iYear) {
return 32 - new Date(iYear, iMonth, 32).getDate();
}
function showPlanner(selectedDate) {
var weekday = new Array(7);
weekday[0] = "MΓ₯ndag";
weekday[1] = "Tisdag";
weekday[2] = "Onsdag";
weekday[3] = "Torsdag";
weekday[4] = "Fredag";
weekday[5] = "LΓΆrdag";
weekday[6] = "SΓΆndag";
document.getElementById('selected-modal-title').innerHTML = `${weekday[selectedDate.getDay()]} ${selectedDate.getDate()} ${months[selectedDate.getMonth()]}`;
}
// ------------------------------------
// JQUERY
// ------------------------------------
$(document).ready(function () {
$("#calendar").on("click", "td", function () {
console.log('on');
// console.log( $('#myModal').modal )
var selectedDay = $(this).text();
if (selectedDay == '') return;
$(this).css("background-color", "blue").css("color", "white").css("font-weight", "bold");
selectedDate = new Date(currentYear + "-" + (currentMonth + 1) + "-" + selectedDay);
//document.getElementById("planner-card").style.display = "block";
// ($("#myModal").data('bs.modal') || {})._isShown // Bootstrap 4
//function isModalShown(modal)
$('#myModal').modal('toggle');
$('#myModal').modal('handleUpdate');
showPlanner(selectedDate);
});
$("#calendar").off("click", "td", function () {
console.log("off-click");
});
$("td").mouseover(function () {
$(this).css("background-color", "lightblue");
});
$("td").mouseleave(function () {
$(this).removeAttr('style');
});
});
function isModalShown(modal) {
var modalIsShown = (modal.data('bs.modal') || {})._isShown;
return !(typeof modalIsShown === 'undefined' || !modalIsShown);
}
</script>
</body>
</html>3. Bootstrap calendar for stef
Made by Simeria Sergiu Ionut. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Barlow:100,200,300,400,500,600,700,800,900');
body {
font-family: 'Barlow';
font-size:16px;
}
td {
border-radius: 0 !important;
}
tr th {
font-weight: 500;
}
.timepicker {
max-width: 100px;
border-radius: 0;
}
</style>
</head>
<body>
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js'></script>
<script>
moment.locale('en', {
week: { dow: 1 } // Monday is the first day of the week
});
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true,
format: 'DD-MM-YY HH:mm',
stepping: 30,
minDate: moment() });
</script>
</body>
</html>4. Bootstrap 4 Calendar
Made by Guilherme. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet' href='https://bootswatch.com/4/_yeti/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<style>
.calendar .today {
font-weight: bold;
}
/* Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap */
.calendar .is-day {
min-height: 50px;
overflow: hidden;
}
.calendar-month-event-title {
display: none;
}
.calendar-month-event {
display: inline-block;
}
.calendar-month-event:before {
content: "";
}
.calendar-month-events {
display: block;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.calendar .is-day {
min-height: 100px;
}
.calendar-month-event-title {
display: block;
white-space: nowrap;
overflow: hidden;
}
.calendar-month-event {
display: flex;
}
.calendar-month-event:before {
content: "";
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.calendar .is-day {
min-height: 120px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.calendar .is-day {
min-height: 150px;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.calendar .is-day {
min-height: 200px;
}
}
</style>
</head>
<body>
<div class="container-fluid bg-dark p-5">
<div class="calendar-wrapper bg-white">
<div class="m-1 p-3 calendar">
<div class="row h2 text-nowrap calendar-header">
<div class="col text-left calendar-control-arrows">
<a class="m-0 p-0" href="#"><i class="fa fa-angle-left"></i></a>
<a class="m-0 p-0" href="#"><i class="fa fa-angle-right"></i></a>
</div>
<div class="col text-center calendar-control-month">
<a href="#">
<span class="d-block d-sm-none">Jan</span>
<span class="d-none d-sm-block">Janeiro</span>
</a>
</div>
<div class="col text-right calendar-control-year">
<a href="#">2018</a>
</div>
</div>
<div class="row h2 calendar-month-week-days">
<div class="col text-center p-1">D</div>
<div class="col text-center p-1">S</div>
<div class="col text-center p-1">T</div>
<div class="col text-center p-1">Q</div>
<div class="col text-center p-1">Q</div>
<div class="col text-center p-1">S</div>
<div class="col text-center p-1">S</div>
</div>
<div class="row calendar-month-days">
<div class="col border rounded bg-light border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day"></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month">
<div class="text-right m-1 mt-0 h5 calendar-month-day-number">
<span>1</span>
</div>
<div class="calendar-month-events">
<div class="alert alert-info small font-weight-bold calendar-month-event p-1 m-0 mb-1">
<span class="p-1 calendar-month-event-title">
<span class="badge badge-pill badge-light">120</span>
Event title/Revenda
</span>
</div>
</div>
</div>
<div class="col border rounded border-primary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month">
<div class="text-right m-1 h5 calendar-month-day-number">
<strong class="text-primary">2</strong>
</div>
<div class="calendar-month-events">
<div class="alert alert-info small font-weight-bold calendar-month-event p-1 m-0 mb-1">
<span class="p-1 calendar-month-event-title">
<span class="badge badge-pill badge-light">120</span>
Event title/Revenda
</span>
</div>
<div class="alert alert-info small font-weight-bold calendar-month-event p-1 m-0 mb-1">
<span class="p-1 calendar-month-event-title">
<span class="badge badge-pill badge-light">120</span>
Event title/Revenda
</span>
</div>
</div>
</div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">3</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">4</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">5</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">6</div></div>
<!-- -->
<div class="w-100"></div>
<!-- -->
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">7</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">8</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">9</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">10</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">11</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">12</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">13</div></div>
<!-- -->
<div class="w-100"></div>
<!-- -->
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">14</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">15</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">16</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">17</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">18</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">19</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">20</div></div>
<!-- -->
<div class="w-100"></div>
<!-- -->
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">21</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">22</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">23</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">24</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">25</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">26</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">27</div></div>
<!-- -->
<div class="w-100"></div>
<!-- -->
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">28</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">29</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">30</div></div>
<div class="col border rounded border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day this-month"><div class="text-right m-1 h5">31</div></div>
<div class="col border rounded bg-light border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day"></div>
<div class="col border rounded bg-light border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day"></div>
<div class="col border rounded bg-light border-secondary border-top-0 border-left-0 m-0 ml-1 mb-1 p-0 pr-1 is-day"></div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
</body>
</html>5. Bootstrap Calendar Design
Made by brusky. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
.clearfix::after,
.calendar ol::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* ================
Calendar Styling */
.calendar {
border-radius: 10px;
}
.month {
font-size: 2rem;
}
@media (min-width: 992px) {
.month {
font-size: 3.5rem;
}
}
.calendar ol li {
float: left;
width: 14.28571%;
}
.calendar .day-names {
border-bottom: 1px solid #eee;
}
.calendar .day-names li {
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.calendar .days li {
border-bottom: 1px solid #eee;
min-height: 8rem;
}
.calendar .days li .date {
margin: 0.5rem 0;
}
.calendar .days li .event {
font-size: 0.75rem;
padding: 0.4rem;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 4rem;
margin-bottom: 1px;
}
.calendar .days li .event.span-2 {
width: 200%;
}
.calendar .days li .event.begin {
border-radius: 1rem 0 0 1rem;
}
.calendar .days li .event.end {
border-radius: 0 1rem 1rem 0;
}
.calendar .days li .event.clear {
background: none;
}
.calendar .days li:nth-child(n+29) {
border-bottom: none;
}
.calendar .days li.outside .date {
color: #ddd;
}
body {
min-height: 100vh;
background-color: #3ca55c;
background-image: linear-gradient(147deg, #3ca55c 0%, #b5ac49 100%);
}
</style>
</head>
<body>
<div class="container py-5">
<!-- Start -->
<header class="text-center text-white mb-5">
<h1 class="display-4">Bootstrap Calendar</h1>
<p class="font-italic mb-0">A nicely-designed Bootstrap calendar widget. This calendar is just a for design purpose, you can make it work.</p>
<p class="font-italic">Snippet By <a href="" class="text-white">
<u>Brusky</u></a>
</p>
</header>
<!-- Calendar -->
<div class="calendar shadow bg-white p-5">
<div class="d-flex align-items-center"><i class="fa fa-calendar fa-3x mr-3"></i>
<h2 class="month font-weight-bold mb-0 text-uppercase">December 2019</h2>
</div>
<p class="font-italic text-muted mb-5">No events for this day.</p>
<ol class="day-names list-unstyled">
<li class="font-weight-bold text-uppercase">Sun</li>
<li class="font-weight-bold text-uppercase">Mon</li>
<li class="font-weight-bold text-uppercase">Tue</li>
<li class="font-weight-bold text-uppercase">Wed</li>
<li class="font-weight-bold text-uppercase">Thu</li>
<li class="font-weight-bold text-uppercase">Fri</li>
<li class="font-weight-bold text-uppercase">Sat</li>
</ol>
<ol class="days list-unstyled">
<li>
<div class="date">1</div>
<div class="event bg-success">Event with Long Name</div>
</li>
<li>
<div class="date">2</div>
</li>
<li>
<div class="date">3</div>
</li>
<li>
<div class="date">4</div>
</li>
<li>
<div class="date">5</div>
</li>
<li>
<div class="date">6</div>
</li>
<li>
<div class="date">7</div>
</li>
<li>
<div class="date">8</div>
</li>
<li>
<div class="date">9</div>
</li>
<li>
<div class="date">10</div>
</li>
<li>
<div class="date">11</div>
</li>
<li>
<div class="date">12</div>
</li>
<li>
<div class="date">13</div>
<div class="event all-day begin span-2 bg-warning">Event Name</div>
</li>
<li>
<div class="date">14</div>
</li>
<li>
<div class="date">15</div>
<div class="event all-day end bg-success">Event Name</div>
</li>
<li>
<div class="date">16</div>
</li>
<li>
<div class="date">17</div>
</li>
<li>
<div class="date">18</div>
</li>
<li>
<div class="date">19</div>
</li>
<li>
<div class="date">20</div>
</li>
<li>
<div class="date">21</div>
<div class="event bg-primary">Event Name</div>
<div class="event bg-success">Event Name</div>
</li>
<li>
<div class="date">22</div>
<div class="event bg-info">Event with Longer Name</div>
</li>
<li>
<div class="date">23</div>
</li>
<li>
<div class="date">24</div>
</li>
<li>
<div class="date">25</div>
</li>
<li>
<div class="date">26</div>
</li>
<li>
<div class="date">27</div>
</li>
<li>
<div class="date">28</div>
</li>
<li>
<div class="date">29</div>
</li>
<li>
<div class="date">30</div>
</li>
<li>
<div class="date">31</div>
</li>
<li class="outside">
<div class="date">1</div>
</li>
<li class="outside">
<div class="date">2</div>
</li>
<li class="outside">
<div class="date">3</div>
</li>
<li class="outside">
<div class="date">4</div>
</li>
</ol>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
</body>
</html>
6. Bootstrap Calendar Design with Events
Made by Thumper. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
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;
}
.popover.calendar-event-popover .space > .pull-right,
.popover.calendar-event-popover .attending > .pull-right {
font-weight: 400;
}
.popover.calendar-event-popover .attending {
margin-top: 5px;
font-size: 18px;
padding: 0px 10px 5px;
}
.popover.calendar-event-popover .attending img {
border-radius: 50%;
width: 40px;
}
.popover.calendar-event-popover .attending span.attending-overflow {
display: inline-block;
width: 40px;
background-color: rgb(200, 200, 200);
border-radius: 50%;
padding: 8px 0px 7px;
text-align: center;
}
.popover.calendar-event-popover .attending > .pull-right {
font-size: 28px;
}
.popover.calendar-event-popover a.btn {
margin-top: 10px;
width: 100%;
border-radius: 3px;
}
[data-toggle="calendar"] > .row > .calendar-day {
font-family: 'Roboto', sans-serif;
width: 14.28571428571429%;
border: 1px solid rgb(235, 235, 235);
border-right-width: 0px;
border-bottom-width: 0px;
min-height: 120px;
}
[data-toggle="calendar"] > .row > .calendar-day.calendar-no-current-month {
color: rgb(200, 200, 200);
}
[data-toggle="calendar"] > .row > .calendar-day:last-child {
border-right-width: 1px;
}
[data-toggle="calendar"] > .row:last-child > .calendar-day {
border-bottom-width: 1px;
}
.calendar-day > time {
position: absolute;
display: block;
bottom: 0px;
left: 0px;
font-size: 12px;
font-weight: 300;
width: 100%;
padding: 10px 10px 3px 0px;
text-align: right;
}
.calendar-day > .events {
cursor: pointer;
}
.calendar-day > .events > .event h4 {
font-size: 12px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.calendar-day > .events > .event > .desc,
.calendar-day > .events > .event > .location,
.calendar-day > .events > .event > .datetime,
.calendar-day > .events > .event > .attending {
display: none;
}
.calendar-day > .events > .event > .progress {
height: 10px;
}
</style>
</head>
<body>
<p class="text-center">No this is not a working calendar. It is purely for design. You are more than welcome to make it work.</p>
<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">
<div class="progress-bar" role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="134" style="width: 4.477%;">
<span class="sr-only">4.477% Filled</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-04">04</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-05">05</time>
</div>
</div>
<div class="row">
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-06">06</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-07">07</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-08">08</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-09">09</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-10">10</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-11">11</time>
<div class="events">
<div class="event">
<h4>Local artist showing, meet and greet and feature film</h4>
<div class="desc">
<p>We will be showing local artists films on our new 16 foot movie screen with feature film last "Carnival Of Souls", come see the new BT, hang out and socialize while enjoying some local talent. FREE event, suggested $2 or $3 donation. Concessions, popcorn, soda etc available so come hungry!!</p>
<p>*This event is all ages welcomed and also handicapped accessible (side entrance ramp)</p>
<p>Featuring :</p>
<ul>
<li><a href="https://www.youtube.com/user/walrys11/videos">Jack Rys</a></li>
<li><a href="http://society6.com/wombglow">Alex Wilson</a></li>
<li><a href="http://www.erieartcompany.com/">Brad Ford</a></li>
<li><a href="https://www.youtube.com/watch?v=dkTz0EvfEiY">Carnival of Souls</a> (Trailer)</li>
</ul>
</div>
<div class="location"> <span class="glyphicon glyphicon-map-marker"></span> 145 West 11th Street, Erie, Pa.</div>
<div class="datetime"> <span class="glyphicon glyphicon-time"></span> 7:00pm - ?</div>
<div class="attending">
<img src="http://api.randomuser.me/portraits/women/31.jpg" />
<img src="http://api.randomuser.me/portraits/women/47.jpg" />
<img src="http://api.randomuser.me/portraits/women/93.jpg" />
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="368" style="width: 11.68%;">
<span class="sr-only">11.68% Filled</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-12">12</time>
</div>
</div>
<div class="row">
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-13">13</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-14">14</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-15">15</time>
<div class="events">
<div class="event">
<h4>Erie Art Museum 91st Annual Spring Show</h4>
<div class="desc">
<p>This juried, regional multi-media exhibition, open to all artists living within a 250-mile radius of Erie represents all media and showcases the most current and finest artwork created in the area.</p>
</div>
<div class="location"> <span class="glyphicon glyphicon-map-marker"></span> Presque Isle State Park </div>
<div class="datetime"> <span class="glyphicon glyphicon-time"></span> ALL DAY</div>
<div class="attending">
<img src="http://api.randomuser.me/portraits/men/10.jpg" />
<img src="http://api.randomuser.me/portraits/men/23.jpg" />
<img src="http://api.randomuser.me/portraits/men/66.jpg" />
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="69" aria-valuemin="0" aria-valuemax="320" style="width: 21.56%;">
<span class="sr-only">21.56% Filled</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-16">16</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-17">17</time>>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-18">18</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-19">19</time>
</div>
</div>
<div class="row">
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-20">20</time>
<div class="events">
<div class="event">
<h4>Mouse0270's 24th Birthday</h4>
<div class="desc">
<p style="text-align:center;">Friendships are one of the few things that improve with age<br/>
The family and friends of <br/>
Mouse0270 <br/>
invite you to celebrate his <br/>
24th Birthday and a lifetime of good friendship</p>
</div>
<div class="location"> <span class="glyphicon glyphicon-map-marker"></span> Erie, Pa </div>
<div class="datetime"> <span class="glyphicon glyphicon-time"></span> 10:00pm - 2:00am </div>
<div class="attending">
<img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfa1/t1.0-9/417157_4897339837183_626079670_n.jpg" />
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="336" style="width: 0.29%;">
<span class="sr-only">0.29% Filled</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-21">21</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-22">22</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-23">23</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-24">24</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-25">25</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-26">26</time>
</div>
</div>
<div class="row">
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-27">27</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-28">28</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-29">29</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-30">30</time>
</div>
<div class="col-xs-12 calendar-day">
<time datetime="2014-07-31">31</time>
</div>
<div class="col-xs-12 calendar-day calendar-no-current-month">
<time datetime="2014-08-01">01</time>
</div>
<div class="col-xs-12 calendar-day calendar-no-current-month">
<time datetime="2014-08-02">02</time>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script>
$(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');
});
});
});
</script>
</body>
</html>7. Simple Calendar
Made by Oleksandr H. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
.wc-calendar {
background-color: #fff;
}
.wc-calendar__header {
position: relative;
height: 40px;
border-bottom: 2px solid gray;
overflow: hidden;
text-align: center;
}
.wc-calendar__header__date {
display: inline-block;
}
.wc-calendar__btn {
height: 32px;
padding: 0 15px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 12px;
line-height: 32px;
background-color: #4889ff;
cursor: pointer;
}
.wc-calendar__btn:focus, .wc-calendar__btn:active {
outline: none;
}
.wc-calendar__btn:hover {
background-color: #83AFFF;
}
.wc-calendar__btn--prev {
float: left;
}
.wc-calendar__btn--next {
float: right;
}
.wc-calendar__days-names,
.wc-calendar__days-list {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
.wc-calendar__days-names {
border-bottom: 1px solid #2f4f4f;
}
.wc-calendar__days-names__item,
.wc-calendar__days-list__item {
width: 14.2%;
flex-grow: 1;
text-align: center;
}
.wc-calendar__days-names__item {
padding-top: 10px;
}
.wc-calendar__days-list__item {
height: 60px;
line-height: 60px;
cursor: pointer;
}
.wc-calendar__days-list__item--active {
color: #fff;
background-color: #4889ff;
}
.wc-calendar__days-list__item--prev-month,
.wc-calendar__days-list__item--next-month {
color: gray;
}
.wc-calendar__days-list__item--active.wc-calendar__days-list__item--prev-month,
.wc-calendar__days-list__item--active.wc-calendar__days-list__item--next-month {
border: 1px solid #4889ff;
background-color: #fff;
}
/* testing styles */
.red-class {
background-color: red;
}
.gray-class {
background-color: gray;
}
.calendar-form {
width: 300px;
padding: 10px;
border: 1px solid gray;
}
.control-group + .control-group {
margin-top: 5px;
}
.control-label {
display: inline-block;
width: 94px;
font-size: 14px;
}
.control-input {
width: 197px;
}
</style>
</head>
<body>
<div class="calendar"></div>
<!-- Testing form START -->
<form class="calendar-form">
<div class="control-group">
<label class="control-label" for="class-input">Class: </label>
<input class="control-input" type="text" id="class-input" placeholder="Type class name here..."/>
</div>
<div class="control-group">
<label class="control-label" for="date-input">Selected date: </label>
<input class="control-input" type="date" id="date-input" placeholder="Type date in format M/D/YYYY..."/>
</div>
<div class="control-group">
<button type="submit">Change</button>
</div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script>
/**
* Creates a new 'Calendar' class instance
* @class Calendar
*/
class Calendar {
/**
* @constructor
* @param {string} container - represents calendar container DOM query
* @param {string} activeDateClass - represents custom class for selected date
* @param {Date} initialDate - represents initially selected calendar date
*/
constructor({ container = '',
activeDateClass = '',
initialDate = new Date() } = {}) {
this.$container = container ? document.querySelector(container) : null;
this.activeDateClass = activeDateClass;
this.selectedDate = initialDate;
this.currentMonth = initialDate;
this.currentMonthDays = [];
// Months human readable names, to be used inside
// getFormattedDate() function
this.monthsNames = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
// initizlize markup and bootstrap application events
this.generateMarkup();
this.bootstrapEvents();
}
/**
* Generate selected month visible dates
* @function buildCurrentMonthDays
*/
buildCurrentMonthDays() {
var curYear = this.currentMonth.getFullYear(),
curMonth = this.currentMonth.getMonth(),
firstMonthDay = new Date(curYear, curMonth, 1),
lastMonthDay = new Date(curYear, curMonth + 1, 0);
// clear previously selected month generated days
this.currentMonthDays = [];
// push visible previous month days
for (let i = -firstMonthDay.getUTCDay(); i < 0; i++) {if (window.CP.shouldStopExecution(0)) break;
this.currentMonthDays.push(new Date(curYear, curMonth, i));
}
// push current month days
window.CP.exitedLoop(0);for (let i = 1, lastDay = lastMonthDay.getDate(); i <= lastDay; i++) {if (window.CP.shouldStopExecution(1)) break;
this.currentMonthDays.push(new Date(curYear, curMonth, i));
}
// push visible next month days
window.CP.exitedLoop(1);for (let i = 1, daysAppend = 7 - lastMonthDay.getUTCDay(); i < daysAppend; i++) {if (window.CP.shouldStopExecution(2)) break;
this.currentMonthDays.push(new Date(curYear, curMonth + 1, i));
}window.CP.exitedLoop(2);
}
/**
* Generate 'days-list__item' element class
* @function getDayClass
* @return {string} - represents element class string
*/
getDayClass(date) {
var classes = ['wc-calendar__days-list__item'],
curYear = this.currentMonth.getFullYear(),
curMonth = this.currentMonth.getMonth(),
firstMonthDay = new Date(curYear, curMonth, 1),
lastMonthDay = new Date(curYear, curMonth + 1, 0);
// if date is selectedDate
if (date.toDateString() === this.selectedDate.toDateString()) {
// add default and custom active classes
classes = classes.concat(['wc-calendar__days-list__item--active', this.activeDateClass]);
}
// if date is from previous year
if (date.getMonth() === 11 && this.currentMonth.getMonth() === 0) {
// mark as previous month date
classes.push('wc-calendar__days-list__item--prev-month');
// if date is from next year
} else if (date.getMonth() === 0 && this.currentMonth.getMonth() === 11) {
// mark as next month date
classes.push('wc-calendar__days-list__item--next-month');
// if date is from previous month
} else if (date.getMonth() < this.currentMonth.getMonth()) {
classes.push('wc-calendar__days-list__item--prev-month');
// if date is from next month
} else if (date.getMonth() > this.currentMonth.getMonth()) {
classes.push('wc-calendar__days-list__item--next-month');
}
// return element class string
return classes.join(' ');
}
/**
* Utility function for showing formatted date of type 'MonthName YYYY'
* @function gerFormattedDate
* @param {Date} date - represents date object which shall be formatted
* @return {string} - represents formatted date
*/
getFormattedDate(date) {
return `${date.getFullYear()} ${this.monthsNames[date.getMonth()]}`;
}
/**
* Generate HTML string markup for visible calendar dates
* @function generateDaysMarkup
* @return {string} - represents HTML markup for currently selected month days
*/
generateDaysMarkup() {
var days = [];
// build month days list
this.buildCurrentMonthDays();
// generate markup for each month day
this.currentMonthDays.forEach(function (day) {
days.push(`<li data-date="${day.toLocaleDateString()}" class="${this.getDayClass(day)}">${day.getDate()}</li>`);
}.bind(this));
return days.join('');
}
/**
* Refresh calendar view
* @function refreshCalendar
*/
refreshCalendar() {
// refresh days-list
this.$container.querySelector('.wc-calendar__days-list').innerHTML = this.generateDaysMarkup();
// refresh calendar header date
this.$container.querySelector('.wc-calendar__header__date').innerHTML = this.getFormattedDate(this.currentMonth);
}
/**
* Switch calendar to previous month
* @function prevMonth
*/
prevMonth() {
var curYear = this.currentMonth.getFullYear(),
curMonth = this.currentMonth.getMonth();
// set currentMonth to month before
this.currentMonth = new Date(curYear, curMonth - 1, 1);
// refresh calendar view
this.refreshCalendar();
}
/**
* Switch calendar to next month
* @function nextMonth
*/
nextMonth() {
var curYear = this.currentMonth.getFullYear(),
curMonth = this.currentMonth.getMonth();
// set currentMonth to month after
this.currentMonth = new Date(curYear, curMonth + 1, 1);
// refresh calendar view
this.refreshCalendar();
}
/**
* Update calendar options
* @function update
* @param {string} [option='selectedDate'|'activeDateClass'] - name of option to be updated
* @param {string} value - value of option to be updated
*/
update(option, value) {
if (option === 'selectedDate') {
let date = new Date(value);
if (!isNaN(date.getTime())) {
this.selectedDate = new Date(value);
this.currentMonth = this.selectedDate;
} else {
throw new Error('Invalid date format');
}
} else if (option === 'activeDateClass') {
this.activeDateClass = value;
}
this.refreshCalendar();
}
/**
* Select day. Used as event handler for day-list__item 'click'
* @function selectDay
* @prop {Object} event - represents 'click' event object
*/
selectDay(event) {
var $target = event.target;
// Act only if 'day-list__item' was clicked
if ($target.classList.contains('wc-calendar__days-list__item')) {
let isPrevMonth = $target.classList.contains('wc-calendar__days-list__item--prev-month'),
isNextMonth = $target.classList.contains('wc-calendar__days-list__item--next-month');
this.selectedDate = new Date($target.dataset.date);
// if element represents date from either previous or next month
if (isPrevMonth || isNextMonth) {
// if previous month
if (isPrevMonth) {
// switch calendar to month before
this.prevMonth();
// if next
} else {
// switch calendar to month after
this.nextMonth();
}
// select date element from currently rendered month
$target = this.$container.querySelector(`[data-date="${this.selectedDate.toLocaleDateString()}"]`);
// if element represents currently rendered month
} else {
let $activeItem = this.$container.querySelector('.wc-calendar__days-list__item--active');
// if there already is element with active class
if ($activeItem) {
// remove active class from element
$activeItem.classList.remove('wc-calendar__days-list__item--active');
// if custom active class was specified - remove this class
this.activeDateClass && $activeItem.classList.remove(this.activeDateClass);
}
}
// add default and custom active classes to selected date element
$target.classList.add('wc-calendar__days-list__item--active');
this.activeDateClass && $target.classList.add(this.activeDateClass);
}
}
/**
* Generate initial calendar markup
* @function generateMarkup
*/
generateMarkup() {
// if container query wasn't specified
if (!this.$container) {
// create new container element
let fragment = document.createDocumentFragment(),
calendarContainer = document.createElement('div');
fragment.appendChild(calendarContainer);
// append container to body
document.body.appendChild(calendarContainer);
// save new container reference
this.$container = calendarContainer;
}
// add default class for container
this.$container.classList.add('wc-calendar');
// form calendar markup
this.$container.innerHTML = `
<div class="wc-calendar__header">
<button class="wc-calendar__btn wc-calendar__btn--prev">Prev</button>
<div class="wc-calendar__header__date">${this.getFormattedDate(this.currentMonth)}</div>
<button class="wc-calendar__btn wc-calendar__btn--next">Next</button>
</div>
<div class="wc-calendar__body">
<ul class="wc-calendar__days-names">
<li class="wc-calendar__days-names__item">Mon</li>
<li class="wc-calendar__days-names__item">Tue</li>
<li class="wc-calendar__days-names__item">Wed</li>
<li class="wc-calendar__days-names__item">Thu</li>
<li class="wc-calendar__days-names__item">Fri</li>
<li class="wc-calendar__days-names__item">Sat</li>
<li class="wc-calendar__days-names__item">Sun</li>
</ul>
<ul class="wc-calendar__days-list">
${this.generateDaysMarkup()}
</ul>
</div>
`;
}
/**
* Bootstrap calendar specific events
* @function bootstrapEvents
*/
bootstrapEvents() {
// prev month button event handler
this.$container.querySelector('.wc-calendar__btn--prev').
addEventListener('click', this.prevMonth.bind(this));
// next month button event handler
this.$container.querySelector('.wc-calendar__btn--next').
addEventListener('click', this.nextMonth.bind(this));
// select day item delegated to days-list event handler
this.$container.querySelector('.wc-calendar__days-list').
addEventListener('click', this.selectDay.bind(this));
}}
// Testing part. Contains calendar initialization and calendar testing form
// handler
var calendar = new Calendar({
container: '.calendar' });
function changeCalendarOptions(event) {
event.preventDefault();
var classValue = document.getElementById('class-input').value;
var dateValue = document.getElementById('date-input').value;
classValue.trim() && calendar.update('activeDateClass', classValue);
dateValue.trim() && calendar.update('selectedDate', dateValue);
}
document.querySelector('.calendar-form').
addEventListener('submit', changeCalendarOptions);
</script>
</body>
</html>8. Basic Calendar
Made by Nithyanandan Natchimuthu. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://code.ionicframework.com/1.2.4/css/ionic.min.css" rel="stylesheet">
<link href="https://mattlewis92.github.io/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://mattlewis92.github.io/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-content ng-controller="cal">
<mwl-calendar view="calendarView" view-date="calendarDate" events="events" view-title="calendarTitle" on-timespan-click="$event.preventDefault()" on-view-change-click="showEvents(calendarDate)">
</mwl-calendar>
</ion-content>
</ion-pane>
<script>
angular.
module('starter', ['ionic', 'mwl.calendar']).
controller('cal', function ($scope, $timeout) {
$scope.calendarView = 'month';
$scope.calendarDate = new Date();
$timeout(function () {
$scope.events = [{
title: 'My event title',
desc: 'Some description',
type: 'info',
startsAt: new Date(2016, 1, 1, 1),
endsAt: new Date(2016, 1, 3, 15),
editable: true,
deletable: true,
draggable: true,
resizable: true,
incrementsBadgeTotal: false }];
}, 3000);
});
</script>
</body>
</html>9. Bootstrap Calendar tab
Made by Flora. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'>
<style>
.calendar {
display: flex;
flex-wrap: wrap;
}
.calendar h3 {
color: #434343;
}
.calendar .number, .calendar .day {
width: 14%;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
}
.calendar .number:nth-child(7n+1), .calendar .day:first-child {
color: #f44336;
font-weight: 600;
}
.calendar .number:nth-child(7n+7), .calendar .day:nth-child(7) {
color: #0DA5F6;
font-weight: 600;
}
.calendar .day {
color: #333;
}
.calendar .number {
color: #A8A7A8;
}
.calendar .number a {
color: #A8A7A8;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
position: relative;
box-shadow: 0 2px 10px rgba(29, 209, 85, 0);
transition: background-color 0.15s linear;
}
.calendar .number a::before {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #FC3969;
right: -4px;
top: 3px;
}
.calendar .number a.active {
width: 30px;
height: 30px;
color: #fff;
border-radius: 50%;
background-color: #1DD155;
box-shadow: 0 2px 10px rgba(29, 209, 85, 0.5);
}
.calendar .number a.active::before {
display: none;
}
.calendar-list li {
border-bottom: 1px solid #F2F1F2;
}
</style>
</head>
<body>
<header style="background: #4C3571;padding:50px 0;">
<div class="container">
<h1 style="color: #fff;">[ Bootstrap ] Calendar tab</h1>
</div>
</header>
<div class="container py-5">
<div class="shadow-lg p-3 bg-white rounded">
<div class="row no-gutters">
<div class="col-md-6">
<h3 class="text-center py-3 font-weight-light">July</h3>
<div class="calendar">
<ul class="nav">
<li class="day">S</li>
<li class="day">M</li>
<li class="day">T</li>
<li class="day">W</li>
<li class="day">T</li>
<li class="day">F</li>
<li class="day">S</li>
<li class="number">1</li>
<li class="number">2</li>
<li class="number">3</li>
<li class="number"><a class="active" data-toggle="pill" href="#number-4">4</a></li>
<li class="number"><a data-toggle="pill" href="#number-5">5</a></li>
<li class="number">6</li>
<li class="number">7</li>
<li class="number">8</li>
<li class="number">9</li>
<li class="number">10</li>
<li class="number">11</li>
<li class="number">12</li>
<li class="number">13</li>
<li class="number">14</li>
<li class="number">15</li>
<li class="number">16</li>
<li class="number">17</li>
<li class="number">18</li>
<li class="number">19</li>
<li class="number">20</li>
<li class="number">21</li>
<li class="number">22</li>
<li class="number">23</li>
<li class="number">24</li>
<li class="number">25</li>
<li class="number">26</li>
<li class="number">27</li>
<li class="number">28</li>
<li class="number">29</li>
<li class="number">30</li>
<li class="number">31</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="tab-content">
<div class="tab-pane fade show active" id="number-4">
<ul class="calendar-list list-unstyled">
<li class="row no-gutters py-2">
<div class="col-3 col-md-2"><strong>9:00</strong></div>
<div class="col-9 col-md-10">ιε</div>
</li>
<li class="row no-gutters py-2">
<div class="col-3 col-md-2"><strong>10:00</strong></div>
<div class="col-9 col-md-10">δΈη</div>
</li>
<li class="row no-gutters py-2">
<div class="col-3 col-md-2"><strong>11:00</strong></div>
<div class="col-9 col-md-10">ιζ</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="number-5">
<ul class="calendar-list list-unstyled">
<li class="row no-gutters py-2">
<div class="col-3 col-md-2"><strong>6:00</strong></div>
<div class="col-9 col-md-10">ζ²δΊ</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js'></script>
</body>
</html>10. Simple Working Calendar
Made by jingwei. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://unpkg.com/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<mwl-calendar
view="calendarView"
view-date="viewDate"
events="events"
view-title="calendarTitle"
on-event-click="eventClicked(calendarEvent)"
on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
cell-is-open="true">
</mwl-calendar>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js'></script>
<script src='https://unpkg.com/angular-bootstrap-calendar@1.0.0/dist/js/angular-bootstrap-calendar-tpls.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js'></script>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script>
var app = angular.module('myApp', ['mwl.calendar', 'ui.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.calendarView = 'month';
$scope.viewDate = new Date();
$scope.events = [
{
title: 'My event title', // The title of the event
startsAt: new Date(2013, 5, 1, 1), // A javascript date object for when the event starts
endsAt: new Date(2014, 8, 26, 15), // Optional - a javascript date object for when the event ends
color: { // can also be calendarConfig.colorTypes.warning for shortcuts to the deprecated event types
primary: '#e3bc08', // the primary event color (should be darker than secondary)
secondary: '#fdf1ba' // the secondary event color (should be lighter than primary)
},
actions: [{ // an array of actions that will be displayed next to the event title
label: '<i class=\'glyphicon glyphicon-pencil\'></i>', // the label of the action
cssClass: 'edit-action', // a CSS class that will be added to the action element so you can implement custom styling
onClick: function (args) {// the action that occurs when it is clicked. The first argument will be an object containing the parent event
console.log('Edit event', args.calendarEvent);
} }],
draggable: true, //Allow an event to be dragged and dropped
resizable: true, //Allow an event to be resizable
incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
recursOn: 'year', // If set the event will recur on the given period. Valid values are year or month
cssClass: 'a-css-class-name', //A CSS class (or more, just separate with spaces) that will be added to the event when it is displayed on each view. Useful for marking an event as selected / active etc
allDay: false // set to true to display the event as an all day event on the day view
}];
});
</script>
</body>
</html>11. Bootstrap Calendar UI
Made by Sylvain Schellenberger. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
</head>
<body>
<div class="container">
<table class="table table-borderless text-center">
<thead>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Thu</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
<th scope="col">Sun</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td class="rounded-pill bg-primary text-white">3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>