Draggable Events from Json file

0
votes

I have seen the demo for drag elements https://fullcalendar.io/docs/external-dragging-demo

On this demo, My event 1..5 are static

Is it possible to dynamically populate the draggable external list of fullcalendar from the JSON file?

My idea is to show the TITLE as the name of my draggable event and to keep the others parameters are additional parameters from my Fullcalendar.

I've tried to dynamically create the divs of external events from code behind but it was not draggable anymore.

Thank you !

 var JsonData = '[{"id":"1","title":"Event Title1","start":"2015-03-17T13:13:55.008","end":"2015-03-19T13:13:55.008"},{"id":"2","title":"Event Title 2","start":"2015-03-17T13:13:55-0400","end":"2015-03-19T13:13:55-0400"}]';

var obj = JSON.parse( JsonData );

var tmp = '';
$.each( obj, function( key, value ) {
  tmp += '<div class="col-md-4 col-sm-4">';
  tmp += '    <div class="fc-event" data-color="#00cc99">';
  tmp += '      <h5>' + value.title + '</h5>';
  tmp += '    </div>';
  tmp += '  </div>';
});

$('#main').prepend(tmp);
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />


  <title>
    Drag-n-drop external events - Demos | FullCalendar
  </title>






<link href='https://fullcalendar.io//assets/demo-topbar.css' rel='stylesheet' />

<link href='https://fullcalendar.io//releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='/https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.css' rel='stylesheet' media='print' />



<script src='https://fullcalendar.io//releases/fullcalendar/3.9.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io//releases/fullcalendar/3.9.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io//releases/fullcalendar/3.9.0/fullcalendar.min.js'></script>







<script src='https://fullcalendar.io//assets/demo-to-codepen.js'></script>



  <script src='https://code.jquery.com/ui/1.11.3/jquery-ui.min.js'></script>
<script>

  $(function() {

    // initialize the external events
    // -----------------------------------------------------------------

    $('#external-events .fc-event').each(function() {

      // store data so the calendar knows to render an event upon drop
      $(this).data('event', {
        title: $.trim($(this).text()), // use the element's text as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)
      });

      // make the event draggable using jQuery UI
      $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
      });

    });

    // initialize the calendar
    // -----------------------------------------------------------------

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      editable: true,
      droppable: true, // this allows things to be dropped onto the calendar
      drop: function() {
        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
          // if so, remove the element from the "Draggable Events" list
          $(this).remove();
        }
      }
    });

  });

</script>
<style>

  html, body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #external-events {
    position: fixed;
    z-index: 2;
    top: 20px;
    left: 20px;
    width: 150px;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #eee;
  }

  .demo-topbar + #external-events { /* will get stripped out */
    top: 60px;
  }

  #external-events .fc-event {
    margin: 1em 0;
    cursor: move;
  }

  #calendar-container {
    position: relative;
    z-index: 1;
    margin-left: 200px;
  }

  #calendar {
    max-width: 900px;
    margin: 20px auto;
  }

</style>
</head><body>

  <div class='demo-topbar'>
  <button data-codepen class='codepen-button'>Edit in CodePen</button>

  

  
    Drag external events into the calendar with the help of jquery-ui draggable
  
</div>


  <div id='external-events'>
    <p>
      <strong>Draggable Events</strong>
    </p>
    <div class='main'>    
    </div>
    <div class='fc-event'>My Event 1</div>
    <div class='fc-event'>My Event 2</div>
    <div class='fc-event'>My Event 3</div>
    <div class='fc-event'>My Event 4</div>
    <div class='fc-event'>My Event 5</div>
    <p>
      <input type='checkbox' id='drop-remove' />
      <label for='drop-remove'>remove after drop</label>
    </p>
  </div>

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

</body>


</html>
2
javascriptjqueryjquery-uifullcalendarjquery-ui-draggable
it's not clear, because you gave your code out of context (and then posted a separate, working demo), but you probably need to call .draggable on each of those dynamically elements to make them draggable. Obviously you'll need to do that after you've appended them to the DOM – ADyson
Welcome to Stack Overflow. I suspect that since you are creating the DIV items dynamically, they are not getting the initial DnD settings. Should look into a refresh or re-initialization to ensure the new DIV items get DnD. – Twisty
One of the first things I notice is in your jQuery, you have a $("#main") selector, yet this does not exist. I do not see an element with the main ID. I do see one with a main Class. – Twisty

2 Answers

0
votes

Here is an example that might help. You called the $('#main') selector, yet there is no element with main as the ID. Switching this to a Class selector appears to help. Try using $('.main').

Example Snippet:

$(function() {
  var JsonData = '[{"id":"1","title":"Event Title1","start":"2015-03-17T13:13:55.008","end":"2015-03-19T13:13:55.008"},{"id":"2","title":"Event Title 2","start":"2015-03-17T13:13:55-0400","end":"2015-03-19T13:13:55-0400"}]';

  var obj = JSON.parse(JsonData);

  var tmp = '';
  $.each(obj, function(key, value) {
    tmp += '<div class="col-md-4 col-sm-4">';
    tmp += '    <div class="fc-event" data-color="#00cc99">';
    tmp += '      <h5>' + value.title + '</h5>';
    tmp += '    </div>';
    tmp += '  </div>';
  });

  $('.main').prepend(tmp);

  // initialize the external events
  // -----------------------------------------------------------------

  $('#external-events .fc-event').each(function() {

    // store data so the calendar knows to render an event upon drop
    $(this).data('event', {
      title: $.trim($(this).text()), // use the element's text as the event title
      stick: true // maintain when user navigates (see docs on the renderEvent method)
    });

    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex: 999,
      revert: true, // will cause the event to go back to its
      revertDuration: 0 //  original position after the drag
    });

  });

  // initialize the calendar
  // -----------------------------------------------------------------

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar
    drop: function() {
      // is the "remove after drop" checkbox checked?
      if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
      }
    }
  });
});
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#external-events {
  position: fixed;
  z-index: 2;
  top: 20px;
  left: 20px;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
}

.demo-topbar+#external-events {
  /* will get stripped out */
  top: 60px;
}

#external-events .fc-event {
  margin: 1em 0;
  cursor: move;
}

#calendar-container {
  position: relative;
  z-index: 1;
  margin-left: 200px;
}

#calendar {
  max-width: 900px;
  margin: 20px auto;
}
<link href='https://fullcalendar.io//releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://code.jquery.com/ui/1.11.3/jquery-ui.min.js'></script>

<div id='external-events'>
  <p>
    <strong>Draggable Events</strong>
  </p>
  <div class='main'>
  </div>
  <div class='fc-event'>My Event 1</div>
  <div class='fc-event'>My Event 2</div>
  <div class='fc-event'>My Event 3</div>
  <div class='fc-event'>My Event 4</div>
  <div class='fc-event'>My Event 5</div>
  <p>
    <input type='checkbox' id='drop-remove' />
    <label for='drop-remove'>remove after drop</label>
  </p>
</div>

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

</body>


</html>

You can also see I moved the JavaScript into one block. This helps ensure that the content is cre4ated before the calendar is created. It then catches the changes and makes them draggable.

0
votes

Here was my solution.

window.onload = function() {
  $.getJSON( "includes/load_employees.php", function(cgData) {
    var tmp = '';
    $.each(cgData, function(key, value){
      tmp += '  <div class="fc-event calendar-events ui-draggable ui-draggable-handle" data-class="bg-info" data-event="{"fname":"'+value.fname+'","lname":"'+value.lname+'", "title":"'+value.title+'", "id":"'+value.id+'"}" style="position: relative;">';
      tmp += value.title;
      tmp += '  </div>';
    });
    $('#cgMain').prepend(tmp);
    $('#calendar-events .fc-event').each(function(event) {
    // store data so the calendar knows to render an event upon drop
    $(this).data('event', {
      title: $.trim($(this).text()), // use the element's text as the event title
      stick: true // maintain when user navigates (see docs on the renderEvent method)
    });
    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex: 999,
      revert: true,      // will cause the event to go back to its
      revertDuration: 0  //  original position after the drag
    });
  });
  });
}

You have to make sure that the JSON data is being loaded, otherwise you'll get undefined json (which is why window.onload is used). Additionally, associating event data with the div is important for dragging and placing the event on the calendar.

Once an event is placed, both drop and eventReceive are called.

drop: function(date, jsEvent, ui, resourceId){
      alert("i'm in the drop function");
    },
eventReceive: function(event){
      alert("I'm in the eventReceive function");
      alert(JSON.stringify(event.title, null, 4));
    },

Here's the relevant html:

<div id='calendar-events' class="fc-event m-t-20">
    <div id="cgMain"></div>
</div>
<div class="checkbox">
    <input type='checkbox' id='drop-remove'>
    <label for='drop-remove'>remove after drop</label>
</div>