fullCalendar (HTML) exemple

fullCalendar ajax HTML

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 html = "<p>htmlElemnt 1</p><p>htmlElemnt 2</p><p>htmlElemnt 3</p><p>htmlElement 4</p><p>htmlELement 5</p><p>htmlELement 6</p>",
    moment, date;
  $(".external").fullCalendar({
    droppable: true,
    lang: "fr",
    drop: function(date) {
      console.log("Dropped on " + date.format());
    },
    eventAfterAllRender: function(view) {
        moment = $(".external").fullCalendar('getDate');
        date = moment.format();

        $.ajax({
          url: "/echo/html/",
          type: "post",
          data: {
            html: html
          },
          contentType: 'application/html; charset=utf-8',
          dataType: 'html',
          success: function(retour) {
              console.log("moment :" + date);
              $(".dragged,br").remove();
              $(retour).each(function(i) {
                $(this).appendTo(".external")
                  .addClass("dragged")
                  .data("event", {
                    "id": (i + 1),
                    "stick": (i + 1) * 2,
                    "title": "Evenement" + (i + 1)
                  })
                  .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

});