19-Mar-2020
.
Admin
 - .png)
Hi Guys
This example is focused on fullcalendar 4 disable drag and drop event. This article will give you simple example of full calendar 4 drag and drop disable. you will learn how to disable drag and drop fullcalendar vs4 event. you will learn disable drag and drop fullcalendar 4 . Let's get started with disable drag and drop in fullcalendar 4.
In this blog, I will explain how to disabled event disabled drag and drop in fullcalendar. We will show example of fullcalendar 4 disabled drag and drop. you can simple copy bellow code and use in your project. It's pretty easy and simple example of fullcalendar 4 disabled event drag and drop .In this example, you can easy to create disabled event drag and drop in fullcalendar 4.
Here the example of disabled drag and drop in fullcalendar.
Disabled Drag And Drop Event Code:
This determines if the events can only drag and drop Enables/disables at a time.
droppable: false
Or
This determines if the events can be dragged and resized. Enables/disables both at the same time.
editable:false
Example: 1
Now In this example droppable method using disables drag and drop events in fullcalendar.
<!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' />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
<style>
html, body {
font-size: 14px;
background: #e2e2e2;
overflow: hidden;
}
#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 style="width: 100%">
<div id='calendar-container'>
<h1>Fullcalendar 4 Disabled Drag And Drop Event - 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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.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,
droppable: false,
eventLimit: true,
disableDragging: false,
events: [
{
title: 'Day Event',
start: '2020-03-01',
},
{
title: 'Day Event 2',
start: '2020-03-03',
},
{
title: 'Day Event 3',
start: '2020-03-11',
},
{
title: 'Day Event 4',
start: '2020-03-15',
},
{
title: 'Day Event 4',
start: '2020-03-20',
},
]
});
calendar.render();
});
</script>
</body>
</html>
Example: 2
Now in this example,if the events can be dragged and resized disables both at the same time.
<!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' />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
<style>
html, body {
font-size: 14px;
background: #e2e2e2;
overflow: hidden;
}
#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>
<img src="">
<body style="width: 100%">
<div id='calendar-container'>
<h1>Fullcalendar 4 Disabled Drag And Drop Event - 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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.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,
editable: false,
droppable: false,
eventLimit: true,
disableDragging: false,
events: [
{
title: 'Day Event',
start: '2020-03-01',
},
{
title: 'Day Event 2',
start: '2020-03-03',
},
{
title: 'Day Event 3',
start: '2020-03-11',
},
{
title: 'Day Event 4',
start: '2020-03-15',
},
{
title: 'Day Event 4',
start: '2020-03-20',
},
]
});
calendar.render();
});
</script>
</body>
</html>
It will help you...
#Fullcalendar
