NiceSnippets.com
Bootstrap 4 All Year Calendar Example
This is demo of full year calendar using jquery bootstrap year calendar. in this calendar you can display all the month of the year. you can show previous year month and past year month. Using this jquery plugin you can display full year calendar. it's a source code example with live demo.
We allows to free snippets of bootstrap year calendar , you can download full code of bootstrap calendar example code layout. Here in this post i will give you example of bootstrap responsive calendar snippet and you will get simple code of html, css and jquery. In bootstrap calendar jquery plugin snippet i give you three tab with html, css and js, you can easily get code of bootstrap calendar events source layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery Bootstrap Year Calendar - Basic Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="calendar.css">
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Year-Calendar-Bootstrap-4/jquery.bootstrap.year.calendar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Year-Calendar-Bootstrap-4/jquery.bootstrap.year.calendar.js"></script>
</head>
<body>
<div class="container main-section p-3">
<div class="header pb-3 pt-3">
<h1 class="text-white"> Calendar Design using bootstrap 4.0 </h1>
</div>
<div class="calendar-section border border-danger"></div>
</div>
</body>
</html>
*{
font-family: 'Roboto Condensed', sans-serif;
}
body{
background-color: #000 !important;
}
.header h1{
font-size:22px;
}
.calendar-section{
padding:0px 20px;
background-color: #fff;
}
.jqyc-year{
font-size: 25px;
}
.jqyc .border-top{
border:none !important;
}
.jqyc .border-top{
border-bottom: 1px solid #d2d2d2 !important;
}
$('.calendar-section').calendar();
