19-Mar-2020
.
Admin
Hi Guys,
This post will give you example of fullcalendar version 4 example. you will learn fullcalendar 4. you can understand a concept of fullcalendar example code. i would like to share with you fullcalendar 4 basic example.
I will show the example of fullcalendar 4.I will show basic example of fullcalendar 4. we will create fullcalendar using version 4 you can get code of fullcalendar. we give you example of bootstrap step by step fullcalendar , you can simple copy bellow code and use in your project. It's pretty easy and simple example of fullcalendar 4.In this example, you can easy to create fullcalendar 4.
Here the example of fullcalendar 4
Example
Now in this example in create basic fullcalendar for full code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.css' rel='stylesheet' />
<style>
html, body {
font-size: 14px;
background: #e2e2e2;
}
#calendar{
width: 80%;
margin-left: 100px;
box-shadow: 0px 0px 10px #000;
padding:15px;
background: #fff;
}
#calendar-container {
position: fixed;
top: 0%;
text-align: center;
left: 10%;
right: 10%;
bottom: 20%;
}
</style>
</head>
<body>
<div id='calendar-container'>
<h1>Fullcalendar 4 Example - Nicesnippets.com</h1>
<div id='calendar'></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth'
},
defaultView: 'dayGridMonth',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-02-01',
},
{
title: 'Long Event',
start: '2020-02-07',
end: '2020-02-10'
},
{
title: 'Conference',
start: '2020-02-11',
end: '2020-02-13'
}
]
});
calendar.render();
});
</script>
</body>
</html>
It will help you...
#Fullcalendar
