Fullcalendar V4 Disabled Drag And Drop Event Example

Dharmik Tank April 16, 2021

Hi Guys,

This example is focused on fullcalendar v4 disable drag and drop event. This article will give you simple example of full calendar v4 drag and drop disable. you will learn how to disable drag and drop fullcalendar vs4 event. you will learn disable drag and drop fullcalendar v4 . Let's get started with disable drag and drop in fullcalendar v4.

In this blog, I will explain how to disabled event disabled drag and drop in fullcalendar. We will show example of fullcalendar v4 disabled drag and drop. you can simple copy bellow code and use in your project. It's pretty easy and simple example of fullcalendar v4 disabled event drag and drop .In this example, you can easy to create disabled event drag and drop in fullcalendar v4.

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 V4 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 V4 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...

Tags