FullCalendar - Draggable Event Calendar Plugin Example

05-Nov-2020

.

Admin

Now let's see example of draggable event calendar plugin in fullcalendar. In this article i will show you how drag and drop event in fullcalendar. We will talk about fullcalendar draggable event calendar plugin example. This tutorial will give you draggable event calendar in fullcalendar.

Here i will give you simple and easy way to drag and drop event from date to another date in fullcalendar.

Example


<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Draggable Event Calendar Plugin - FullCalendar Example</title>

<link href='https://www.jqueryscript.net/demo/Full-Size-Drag-Drop-Calendar-Plugin-FullCalendar/fullcalendar.min.css' rel='stylesheet' />

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">

<link href='https://www.jqueryscript.net/demo/Full-Size-Drag-Drop-Calendar-Plugin-FullCalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />

</head>

<style>

body {

padding: 0;

font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

font-size: 14px;

}

#calendar {

max-width: 900px;

margin:0px auto;

}

h1 { text-align: center; margin-top:50px;margin-bottom: 50px; }

</style>

<body>

<h1>Draggable Event Calendar Plugin - FullCalendar Example</h1>

<div id='calendar'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

<script src='https://www.jqueryscript.net/demo/Full-Size-Drag-Drop-Calendar-Plugin-FullCalendar/fullcalendar.min.js'></script>

<script>

$(document).ready(function() {

$('#calendar').fullCalendar({

defaultDate:'2019-01-12',

editable: true,

eventLimit: true,

events: [

{

title: 'All Day Event',

start: '2019-01-01'

},

{

title: 'Long Event',

start: '2019-01-07',

end: '2019-01-10'

},

{

id: 999,

title: 'Repeating Event',

start: '2019-01-09T16:00:00'

},

{

id: 999,

title: 'Repeating Event',

start: '2019-01-16T16:00:00'

},

{

title: 'Conference',

start: '2019-01-11',

end: '2019-01-13'

},

{

title: 'Meeting',

start: '2019-01-12T10:30:00',

end: '2019-01-12T12:30:00'

},

{

title: 'Lunch',

start: '2019-01-12T12:00:00'

},

{

title: 'Meeting',

start: '2019-01-12T14:30:00'

},

{

title: 'Happy Hour',

start: '2019-01-12T17:30:00'

},

{

title: 'Dinner',

start: '2019-01-12T20:00:00'

},

{

title: 'Birthday Party',

start: '2019-01-13T07:00:00'

},

{

title: 'Click for Google',

url: 'http://google.com/',

start: '2019-01-28'

}

]

});

});

</script>

</body>

</html>

It will help you...

#Fullcalendar