fullCalendar (JSON) exemple

by Benahmed Taoufiq

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/lang-all.js"></script>
<div class='external'>
</div>

CSS

.dragged:hover {
  cursor: pointer
}

JavaScript

/* http://www.developpez.net/forums/d1598322/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/bibliotheques-frameworks/jquery/fullcalendar-evenements-externes/ */
$(function() {
  var json = '[{"name":"Element1"},{"name":"Element2"},{"name":"Element3"},{"name":"Element4"},{"name":"Element5"},{"name":"Element6"}]',
    childs = $(".external").children(),
    moment, date;
  $(".external").fullCalendar({
    droppable: true,
    lang: "fr",
    drop: function(date, jsEvent) {
      console.log("Dropped on " + date.format() + " event :" + jsEvent.clientX + " event.id :" + $(this).data("event").id);

    },
    eventAfterAllRender: function(view) {
        moment = $(".external").fullCalendar('getDate');
        date = moment.format();

        $.ajax({
          url: "/echo/json/",
          type: "post",
          data: {
            json: json
          },
          contentType: 'application/json; charset=utf-8',
          dataType: 'json',
          success: function(retour) {
              console.log("moment :" + date);
              $(".dragged,br").remove();
              $.each(retour, function(a, b) {
                $(".external")
                  .append("<p class='dragged' />")
                  .find(".dragged")
                  .eq(a)
                  .data("event", {
                    "id": a,
                    "stick": true,
                    "title": "Evenement" + (a + 1)
                  })
                  .text(retour[a].name)
                  .draggable({
                    zIndex: 999,
                    revert: true, // autoriser l'element de revenir a sa place initiale
                    revertDuration: false //  temps original après libération de drag
                  });
              });
            } //fin success
        }); //fin ajax
      } //fin eventAfterAllRender

  }); // fin $(".external").fullCalendar

});