Fullcalendar wordpress予約を提出する

Question

私はcreatが必要calendar私はfullcalendar jqueryを使用しますが、私は私のPHPページに統合するための多くの問題があります。更新のためのデータを保存する必要があります。コマースの予約や、提出する求人ジョブ（wp jobmanager）で保存する必要があります。 はあなたの助け

jQuery(document).ready(function($) { 
 
\t 
 
\t /* initialize the external events 
 
    -----------------------------------------------------------------*/ 
 

 
    $('#external-events div.external-event').each(function() { 
 
    //console.log($(this)); 
 
     // events drags 
 
     var eventObject = { 
 
    title: $.trim($(this).text()), 
 
      className: $(this).attr('className'), 
 
      color: $(this).attr('color'), 
 
      type: $(this).attr('type'), 
 
      textColor: $(this).attr('textColor'), 
 
     }; 
 
     
 
     // store the Event Object in the DOM element so we can get to it later 
 
     $(this).data('eventObject', eventObject); 
 
     $.fullCalendar.formatDate(eventObject.start,'yyyy-MM-dd'); 
 
     
 
     // 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 
 
     }); 
 
     
 
    }); 
 
\t // inti calendar 
 
\t 
 
     $('#calendar').fullCalendar({ 
 
     header: { 
 
      left: 'today', 
 
      center: 'title', 
 
      right: 'prev,next', 
 
     }, 
 
     height: 350, 
 
     aspectRatio: 1, 
 
     //contentHeight: 600, 
 
     editable: true, 
 
     droppable: true, 
 

 
     events: $('#calendar').attr('values'), 
 

 
     // on dropping 
 
     drop: function(date, allDay) { // this function is called when something is dropped 
 
     
 
      // retrieve the dropped element's stored Event Object 
 
      var originalEventObject = $(this).data('eventObject'); 
 
      
 
      // we need to copy it, so that multiple events don't have a reference to the same object 
 
      var copiedEventObject = $.extend({}, originalEventObject); 
 
      
 
      // assign it the date that was reported 
 
      copiedEventObject.start = $.fullCalendar.formatDate(date,'yyyy-MM-dd'); 
 
      copiedEventObject.end = $.fullCalendar.formatDate(date,'yyyy-MM-dd'); 
 
      copiedEventObject.allDay = allDay; 
 
      
 
      // render the event on the calendar 
 
      $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 
 

 
      // Get currents dates 
 
      var startCurrent = new Date(copiedEventObject.start); 
 
      if (copiedEventObject.end == null) { 
 
       var endCurrent = startCurrent; 
 
      } else { 
 
       var endCurrent = new Date(copiedEventObject.end); 
 
      } 
 

 
      // Get events dates 
 
      var pulledEvents = $('#calendar').fullCalendar('clientEvents'); 
 
      // Compare to events dates 
 
      var nbEventCheck = pulledEvents.length-1; 
 
      for (var i = 0; i < nbEventCheck; i++) { 
 
       var startPulled = new Date(pulledEvents[i].start); 
 
       var endPulled = new Date(pulledEvents[i].end); 
 
       if (endPulled.getTime() == 0) { 
 
        endPulled = startPulled; 
 
       } 
 
       // containing 
 
       if (startCurrent >= startPulled && endCurrent <= endPulled) { 
 
        // begin 
 
        if (startCurrent.getTime() == startPulled.getTime()) { 
 
         // start pulledEvent later 
 
         pulledEvents[i].start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
         // if same remove 
 
         if (endCurrent.getTime() == endPulled.getTime()) { 
 
          $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id); 
 
         } 
 
        } 
 
        // finish 
 
        else if (endCurrent.getTime() == endPulled.getTime()) { 
 
         // finish pulledEvent earlier 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
        } 
 
        // contain 
 
        else { 
 
         // copy pulledEvent to the end 
 
         var copiedpulledEvent = $.extend({}, pulledEvents[i]); 
 
         copiedpulledEvent._id = "copy"+Math.floor((Math.random()*1000)+1);; 
 
         copiedpulledEvent.source = null; 
 
         copiedpulledEvent.start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         copiedpulledEvent.end = pulledEvents[i].end; 
 
         $('#calendar').fullCalendar('renderEvent', copiedpulledEvent, true); 
 
         // cut beginning pulledEvent 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('addEventSource', pulledEvents[i]); 
 
         $('#calendar').fullCalendar('renderEvent', pulledEvents[i], true); 
 
         
 
        } 
 
       } 
 
      } 
 
     }, 
 

 
     // on dropping from calendar 
 
     eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) { 
 

 
      // Get currents dates 
 
      var startCurrent = new Date(event.start); 
 
      if (event.end == null) { 
 
       var endCurrent = startCurrent; 
 
      } else { 
 
       var endCurrent = new Date(event.end); 
 
      } 
 
      
 
      // Get events dates 
 
      var pulledEvents = $('#calendar').fullCalendar('clientEvents'); 
 
      // Compare to events dates 
 
      var nbEventCheck = pulledEvents.length; 
 
      for (var i = 0; i < nbEventCheck; i++) { 
 
       // avoid to compare to the same copy element 
 
       if (event._id == pulledEvents[i]._id) { 
 
        i++; 
 
        if (i >= nbEventCheck) { 
 
         break; 
 
        } 
 
       } 
 
       var startPulled = new Date(pulledEvents[i].start); 
 
       var endPulled = new Date(pulledEvents[i].end); 
 
       if (endPulled.getTime() == 0) { 
 
        endPulled = startPulled; 
 
       } 
 

 
       // containing 
 
       if (startCurrent >= startPulled && endCurrent <= endPulled) { 
 
        // begin 
 
        if (startCurrent.getTime() == startPulled.getTime()) { 
 
         // start pulledEvent later 
 
         pulledEvents[i].start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
         // if same remove 
 
         if (endCurrent.getTime() == endPulled.getTime()) { 
 
          $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id) 
 
         } 
 
        } 
 
        // finish 
 
        else if (endCurrent.getTime() == endPulled.getTime()) { 
 
         // finish pulledEvent earlier 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
        } 
 
        // contain 
 
        else { 
 
         // copy pulledEvent to the end 
 
         var copiedpulledEvent = $.extend({}, pulledEvents[i]); 
 
         copiedpulledEvent._id = "copy"+Math.floor((Math.random()*1000)+1); 
 
         copiedpulledEvent.source = null; 
 
         copiedpulledEvent.start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         copiedpulledEvent.end = pulledEvents[i].end; 
 
         $('#calendar').fullCalendar('renderEvent', copiedpulledEvent, true); 
 
         // cut beginning pulledEvent 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('addEventSource', pulledEvents[i]); 
 
         $('#calendar').fullCalendar('renderEvent', pulledEvents[i], true); 
 
        } 
 
        // update pulledEvent 
 
        var startPulled = new Date(pulledEvents[i].start); 
 
        var endPulled = new Date(pulledEvents[i].end); 
 
       } 
 

 
       // externing 
 
       if (startCurrent <= endPulled && endCurrent >= startPulled) { 
 
        // left 
 
        if (endCurrent <= endPulled) { 
 
         pulledEvents[i].start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
         // if same remove 
 
         if (endCurrent.getTime() == endPulled.getTime()) { 
 
          $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id) 
 
         } 
 

 
        } 
 
        // right 
 
        else if (startCurrent >= startPulled) { 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
         if (startCurrent.getTime() == startPulled.getTime()) { 
 
          $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id) 
 
         } 
 
        } 
 
        // surround 
 
        else 
 
        { 
 
         $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id); 
 
        } 
 
       } 
 
       
 
      } 
 

 
     }, 
 

 
     // on event resizing 
 
     eventResize: function (event, dayDelta, minuteDelta, revertFunc) { 
 

 
      // Get currents dates 
 
      var startCurrent = new Date(event.start); 
 
      if (event.end == null) { 
 
       var endCurrent = startCurrent; 
 
      } else { 
 
       var endCurrent = new Date(event.end); 
 
      } 
 

 
      // Get events dates 
 
      var pulledEvents = $('#calendar').fullCalendar('clientEvents'); 
 
      // Compare to events dates 
 
      var nbEventCheck = pulledEvents.length; 
 
      for (var i = 0; i < nbEventCheck; i++) { 
 
       // avoid to compare to the same copy element 
 
       if (event._id == pulledEvents[i]._id) { 
 
        i++; 
 
        if (i >= nbEventCheck) { 
 
         break; 
 
        } 
 
       } 
 
       var startPulled = new Date(pulledEvents[i].start); 
 
       var endPulled = new Date(pulledEvents[i].end); 
 
       if (endPulled.getTime() == 0) { 
 
        endPulled = startPulled; 
 
       } 
 

 
       // externing 
 
       if (startCurrent <= endPulled && endCurrent >= startPulled) { 
 
        // left 
 
        if (endCurrent < endPulled) { 
 
         pulledEvents[i].start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
        } 
 
        // right 
 
        else if (startCurrent > startPulled) { 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
        } 
 
        // surround 
 
        else 
 
        { 
 
         $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id); 
 
        } 
 
       } 
 
      } 
 
     }, 
 

 
     // on click on event 
 
     eventClick: function(calEvent, jsEvent, view) { 
 
      if (confirm('Remove this event ?')) { 
 
       $('#calendar').fullCalendar('removeEvents',calEvent._id); 
 
      } 
 
     } 
 
    // get localized date format using Moment.js 
 
    // var lang = jQuery('html').attr('lang') || 'en'; 
 
// var locale = moment().locale(lang); 
 
    var dateFormat = "d-m-y"; 
 

 
    // get origin date format from query string 
 
    var originFormat = dateFormat; 
 
    // if (originFormat) { 
 
    // originFormat = convertPHPFormatMoment(originFormat); 
 
// } 
 

 

 
    // reformat date for current locale if different of origin format 
 
    if (originFormat && originFormat != dateFormat) { 
 
     var startField = $("#datepicker-start"), 
 
      endField = $("#datepicker-end"), 
 
      startDate = moment(startField.val(), originFormat), 
 
      endDate = moment(endField.val(), originFormat); 
 
     startField.val(startDate.format(dateFormat)); 
 
     endField.val(endDate.format(dateFormat)); 
 
    } 
 

 
    // add hidden date_format field 
 
    $("#datepicker-start").closest('form').append('<input type="hidden" name="date_format" id="date_format" value="'+ dateFormat +'">'); 
 

 
    $("#datepicker-start").datepicker({ 
 
      dateFormat: dateFormat, 
 
      minDate: 0, 
 
      showButtonPanel: true, 
 
      onClose: function (selectedDate) { 
 
       $("#datepicker-end").datepicker("option", "minDate", selectedDate); 
 
       $("#datepicker-end").focus(); 
 
      } 
 
     }); 
 

 
     $("#datepicker-end").datepicker({ 
 
      dateFormat: dateFormat, 
 
      minDate: 0, 
 
      showButtonPanel: true, 
 
      onClose: function (selectedDate) { 
 
       $("#datepicker-start").datepicker("option", "maxDate", selectedDate); 
 
      } 
 
     }); 
 

 

 
\t 
 
     $('#calendar').fullCalendar('renderEvent', newEvent, true); 
 

 
     $('#calendar').fullCalendar('gotoDate', newEvent.start); 
 

 
     var color = $("#default-events label.active input").attr("color"); 
 
     $('td.fc-day').css('background-color', color); 
 

 
     // empty date 
 
     $('#datepicker-start').val(''); 
 
     $('#datepicker-end').val(''); 
 

 
     // reset bounds dates 
 
     $('#datepicker-start').datepicker("option", "maxDate", null); 
 
     $('#datepicker-end').datepicker("option", "minDate", null); 
 
    
 
    
 
});

<link href="<?php echo get_template_directory_uri(); ?>/fullcalendar/jquery-ui-1.10.3.custom.min.css" media="screen" rel="stylesheet" type="text/css"> 
 
<link href="<?php echo get_template_directory_uri(); ?>/fullcalendar/fullcalendar.css" media="screen" rel="stylesheet" type="text/css"> 
 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fullcalendar/moment.js"></script> 
 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fullcalendar/jquery-ui.custom.min.js"></script> 
 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fullcalendar/jquery-ui-1.10.3.custom.datepicker.min.js"></script> 
 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fullcalendar/fullcalendar-gtg.js"></script> 
 

 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fullcalendar/fullcalendar.min.js"></script> 
 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fullcalendar/i18n/jquery.ui.datepicker-fr.js"></script> 
 

 

 

 
<div class="tab-pane fade active in" id="calendar_home" style="display:initial;"> 
 
                         
 
          <div id="progress"> 
 
           <div class="bar bar-photo-edit" style="display:none;"> 
 
            <span>Chargement en cours…</span> 
 
           </div> 
 
          </div> 
 

 
          <div id="alert-box"> 
 
           <div id="calendar-not-uptodate" class="alert alert-warning alert-calendar" style="display: initial;"> 
 
            Vous n'avez aucune période selectionné 
 
           </div> 
 
           <div style="display: none;" class="alert alert-success alert-calendar" id="calendar-updated"> 
 
            Votre calendrier a été mis à jour 
 
           </div> 
 
          </div> 
 

 
          <div class="clearfix"></div> 
 

 
          <!-- date picker --> 
 
          <div id="datepicker-event" class="form-inline"> 
 

 
           <label class="home_type">Créer une nouvelle période de disponibilité</label> 
 

 
           <div> 
 
            <div class="form-group calendar-edition"> 
 
\t \t \t \t \t \t \t \t \t 
 

 

 
            <input id="datepicker-start" class="form-control " type="text" placeholder="Du" /> 
 
            </div> 
 

 
            <div class="form-group calendar-edition"> 
 
            <input id="datepicker-end" class="form-control " type="text" placeholder="jusqu'au" /> 
 
            </div> 
 

 
            <div class="form-group"> 
 
             <select class="form-control"> 
 
              <option value="0" disabled="" selected="">Type de disponibilité</option> 
 
              <option title="Disponible" classname="event-available" color="#d4f2e6" value="5">Disponible</option> 
 
              <option title="Flexible" classname="event-ask-me" color="#CDE5f9" value="3">Flexible me contacter</option> 
 
              <option title="Indisponible" classname="external-events event-unavailable" color="#E7E7E7" value="1">Indisponible</option> 
 
             </select> 
 
            </div> 
 

 
            <input class="btn btn-default calendar-edition" type="button" id="add_date" value="submit"> 
 
           </div> 
 

 
          </div> 
 
          <!-- #datepicker-event --> 
 
          <div id="datepicker-event"></div> 
 
          <!-- popup period delete --> 
 
          <div class="modal fade" id="deletePeriod" style="display: none;"> 
 
           <div class="modal-dialog"> 
 
            <div class="modal-content"> 
 
             <div class="modal-header"> 
 
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
               <span aria-hidden="true">×</span> 
 
              </button> 
 
              <h4 class="modal-title" id="myModalLabel">Etes-vous sûr?</h4> 
 
             </div> 
 
             <div class="modal-body"> 
 
              <p>Etes-vous sûr de vouloir supprimer cette période ?</p> 
 
             </div> 
 
             <div class="modal-footer"> 
 
              <button type="button" class="btn btn-default btn-basic" data-dismiss="modal">Annuler</button> 
 
              <button type="button" class="btn btn-primary" data-dismiss="modal" id="delete_period">Supprimer</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 

 
          <!-- calendar --> 
 
          <div id="calendar" class="fc fc-ltr" value=""> 
 
\t \t \t \t \t \t \t </div> 
 
          <!-- default value --> 
 
          <div id="default-events"> 
 
           <label class="">Disponibilité par défaut <span class="grey-color small italic text-default-value">Choisissez l'option qui décrit le mieux la disponibilité de votre maison durant l'année</span></label> 
 

 
           <label class="radio default-available active"> 
 
            <input type="radio" color="#d4f2e6" name="default-date" id="default-date-4" value="4"> 
 
            <span class="color-available small">Disponible</span> 
 
            Ma maison est généralement disponible 
 
           </label> 
 
           <label class="radio default-ask-me"> 
 
            <input type="radio" color="#CDE5f9" name="default-date" id="default-date-2" value="2" > 
 
            <span class="color-ask-me small">Demandez moi</span> 
 
            Mes dates sont flexibles 
 
           </label> 
 
           <label class="radio default-unavailable"> 
 
            <input type="radio" color="#E7E7E7" name="default-date" id="default-date-0" value="0"> 
 
            <span class="color-unavailable small">Indisponible</span> 
 
            Ma maison est habituellement indisponible 
 
           </label> 
 
           <label class="default-guestwanted"> 
 
            <span class="color-wanted small">test</span> 
 
            Je recherche activement des Invités <br> 
 
            <small><em>(période non disponible par défaut)</em></small> 
 
           </label> 
 
          </div> 
 

 
          <div class="clearfix"></div> 
 

 
          <div id="return-message"></div> 
 

 
         </div>

Answer 1

次の更新ありがとうございますが動作しません。私はフィールドとしてwpのジョブマネージャーユーザーのfullcalendarカスタムの可用性を保存し、availabityうまくコマース予約カレンダー製品に更新する必要があります。誰もがこれより良いを行う方法について良いアイデアを持っている場合は、

$(function() { 
 
\t 
 
\t /* initialize the external events 
 
    -----------------------------------------------------------------*/ 
 

 
    $('#external-events div.external-event').each(function() { 
 
    //console.log($(this)); 
 
     // events drags 
 
     var eventObject = { 
 
      title: $.trim($(this).text()), 
 
      className: $(this).attr('className'), 
 
      color: $(this).attr('color'), 
 
      type: $(this).attr('type'), 
 
      textColor: $(this).attr('textColor'), 
 
     }; 
 
     
 
     // store the Event Object in the DOM element so we can get to it later 
 
     $(this).data('eventObject', eventObject); 
 
     $.fullCalendar.formatDate(eventObject.start,'yyyy-MM-dd'); 
 
     
 
     // 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 
 
     }); 
 
     
 
    }); 
 
\t // inti calendar 
 
\t 
 
     $('#calendar').fullCalendar({ 
 
     header: { 
 
      left: 'today', 
 
      center: 'title', 
 
      right: 'prev,next', 
 
     }, 
 
     height: 350, 
 
     aspectRatio: 1, 
 
     //contentHeight: 600, 
 
     editable: true, 
 
     droppable: true, 
 

 
     events: $('#calendar').attr('values'), 
 

 
     // on dropping 
 
     drop: function(date, allDay) { // this function is called when something is dropped 
 
     
 
      // retrieve the dropped element's stored Event Object 
 
      var originalEventObject = $(this).data('eventObject'); 
 
      
 
      // we need to copy it, so that multiple events don't have a reference to the same object 
 
      var copiedEventObject = $.extend({}, originalEventObject); 
 
      
 
      // assign it the date that was reported 
 
      copiedEventObject.start = $.fullCalendar.formatDate(date,'yyyy-MM-dd'); 
 
      copiedEventObject.end = $.fullCalendar.formatDate(date,'yyyy-MM-dd'); 
 
      copiedEventObject.allDay = allDay; 
 
      
 
      // render the event on the calendar 
 
      $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 
 

 
      // Get currents dates 
 
      var startCurrent = new Date(copiedEventObject.start); 
 
      if (copiedEventObject.end == null) { 
 
       var endCurrent = startCurrent; 
 
      } else { 
 
       var endCurrent = new Date(copiedEventObject.end); 
 
      } 
 

 
      // Get events dates 
 
      var pulledEvents = $('#calendar').fullCalendar('clientEvents'); 
 
      // Compare to events dates 
 
      var nbEventCheck = pulledEvents.length-1; 
 
      for (var i = 0; i < nbEventCheck; i++) { 
 
       var startPulled = new Date(pulledEvents[i].start); 
 
       var endPulled = new Date(pulledEvents[i].end); 
 
       if (endPulled.getTime() == 0) { 
 
        endPulled = startPulled; 
 
       } 
 
       // containing 
 
       if (startCurrent >= startPulled && endCurrent <= endPulled) { 
 
        // begin 
 
        if (startCurrent.getTime() == startPulled.getTime()) { 
 
         // start pulledEvent later 
 
         pulledEvents[i].start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
         // if same remove 
 
         if (endCurrent.getTime() == endPulled.getTime()) { 
 
          $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id); 
 
         } 
 
        } 
 
        // finish 
 
        else if (endCurrent.getTime() == endPulled.getTime()) { 
 
         // finish pulledEvent earlier 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
        } 
 
        // contain 
 
        else { 
 
         // copy pulledEvent to the end 
 
         var copiedpulledEvent = $.extend({}, pulledEvents[i]); 
 
         copiedpulledEvent._id = "copy"+Math.floor((Math.random()*1000)+1);; 
 
         copiedpulledEvent.source = null; 
 
         copiedpulledEvent.start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         copiedpulledEvent.end = pulledEvents[i].end; 
 
         $('#calendar').fullCalendar('renderEvent', copiedpulledEvent, true); 
 
         // cut beginning pulledEvent 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('addEventSource', pulledEvents[i]); 
 
         $('#calendar').fullCalendar('renderEvent', pulledEvents[i], true); 
 
         
 
        } 
 
       } 
 
      } 
 
     }, 
 

 
     // on dropping from calendar 
 
     eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) { 
 

 
      // Get currents dates 
 
      var startCurrent = new Date(event.start); 
 
      if (event.end == null) { 
 
       var endCurrent = startCurrent; 
 
      } else { 
 
       var endCurrent = new Date(event.end); 
 
      } 
 
      
 
      // Get events dates 
 
      var pulledEvents = $('#calendar').fullCalendar('clientEvents'); 
 
      // Compare to events dates 
 
      var nbEventCheck = pulledEvents.length; 
 
      for (var i = 0; i < nbEventCheck; i++) { 
 
       // avoid to compare to the same copy element 
 
       if (event._id == pulledEvents[i]._id) { 
 
        i++; 
 
        if (i >= nbEventCheck) { 
 
         break; 
 
        } 
 
       } 
 
       var startPulled = new Date(pulledEvents[i].start); 
 
       var endPulled = new Date(pulledEvents[i].end); 
 
       if (endPulled.getTime() == 0) { 
 
        endPulled = startPulled; 
 
       } 
 

 
       // containing 
 
       if (startCurrent >= startPulled && endCurrent <= endPulled) { 
 
        // begin 
 
        if (startCurrent.getTime() == startPulled.getTime()) { 
 
         // start pulledEvent later 
 
         pulledEvents[i].start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
         // if same remove 
 
         if (endCurrent.getTime() == endPulled.getTime()) { 
 
          $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id) 
 
         } 
 
        } 
 
        // finish 
 
        else if (endCurrent.getTime() == endPulled.getTime()) { 
 
         // finish pulledEvent earlier 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
        } 
 
        // contain 
 
        else { 
 
         // copy pulledEvent to the end 
 
         var copiedpulledEvent = $.extend({}, pulledEvents[i]); 
 
         copiedpulledEvent._id = "copy"+Math.floor((Math.random()*1000)+1); 
 
         copiedpulledEvent.source = null; 
 
         copiedpulledEvent.start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         copiedpulledEvent.end = pulledEvents[i].end; 
 
         $('#calendar').fullCalendar('renderEvent', copiedpulledEvent, true); 
 
         // cut beginning pulledEvent 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('addEventSource', pulledEvents[i]); 
 
         $('#calendar').fullCalendar('renderEvent', pulledEvents[i], true); 
 
        } 
 
        // update pulledEvent 
 
        var startPulled = new Date(pulledEvents[i].start); 
 
        var endPulled = new Date(pulledEvents[i].end); 
 
       } 
 

 
       // externing 
 
       if (startCurrent <= endPulled && endCurrent >= startPulled) { 
 
        // left 
 
        if (endCurrent <= endPulled) { 
 
         pulledEvents[i].start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
         // if same remove 
 
         if (endCurrent.getTime() == endPulled.getTime()) { 
 
          $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id) 
 
         } 
 

 
        } 
 
        // right 
 
        else if (startCurrent >= startPulled) { 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
         if (startCurrent.getTime() == startPulled.getTime()) { 
 
          $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id) 
 
         } 
 
        } 
 
        // surround 
 
        else 
 
        { 
 
         $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id); 
 
        } 
 
       } 
 
       
 
      } 
 

 
     }, 
 

 
     // on event resizing 
 
     eventResize: function (event, dayDelta, minuteDelta, revertFunc) { 
 

 
      // Get currents dates 
 
      var startCurrent = new Date(event.start); 
 
      if (event.end == null) { 
 
       var endCurrent = startCurrent; 
 
      } else { 
 
       var endCurrent = new Date(event.end); 
 
      } 
 

 
      // Get events dates 
 
      var pulledEvents = $('#calendar').fullCalendar('clientEvents'); 
 
      // Compare to events dates 
 
      var nbEventCheck = pulledEvents.length; 
 
      for (var i = 0; i < nbEventCheck; i++) { 
 
       // avoid to compare to the same copy element 
 
       if (event._id == pulledEvents[i]._id) { 
 
        i++; 
 
        if (i >= nbEventCheck) { 
 
         break; 
 
        } 
 
       } 
 
       var startPulled = new Date(pulledEvents[i].start); 
 
       var endPulled = new Date(pulledEvents[i].end); 
 
       if (endPulled.getTime() == 0) { 
 
        endPulled = startPulled; 
 
       } 
 

 
       // externing 
 
       if (startCurrent <= endPulled && endCurrent >= startPulled) { 
 
        // left 
 
        if (endCurrent < endPulled) { 
 
         pulledEvents[i].start = new Date(endCurrent.getTime() + (1000 * 60 * 60 * 24 * 1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
        } 
 
        // right 
 
        else if (startCurrent > startPulled) { 
 
         pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1)); 
 
         $('#calendar').fullCalendar('updateEvent', pulledEvents[i]); 
 
        } 
 
        // surround 
 
        else 
 
        { 
 
         $('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id); 
 
        } 
 
       } 
 
      } 
 
     }, 
 

 
     // on click on event 
 
     eventClick: function(calEvent, jsEvent, view) { 
 
      if (confirm('Remove this event ?')) { 
 
       $('#calendar').fullCalendar('removeEvents',calEvent._id); 
 
      } 
 
     } 
 
\t }); 
 
    // get localized date format using Moment.js 
 
    // var lang = jQuery('html').attr('lang') || 'en'; 
 
// var locale = moment().locale(lang); 
 
    var dateFormat = "d-m-y"; 
 

 
    // get origin date format from query string 
 
    var originFormat = dateFormat; 
 
    // if (originFormat) { 
 
    // originFormat = convertPHPFormatMoment(originFormat); 
 
// } 
 

 

 
    // reformat date for current locale if different of origin format 
 
    if (originFormat && originFormat != dateFormat) { 
 
     var startField = $("#datepicker-start"), 
 
      endField = $("#datepicker-end"), 
 
      startDate = moment(startField.val(), originFormat), 
 
      endDate = moment(endField.val(), originFormat); 
 
     startField.val(startDate.format(dateFormat)); 
 
     endField.val(endDate.format(dateFormat)); 
 
    } 
 

 
    // add hidden date_format field 
 
    $("#datepicker-start").closest('form').append('<input type="hidden" name="date_format" id="date_format" value="'+ dateFormat +'">'); 
 

 
    $("#datepicker-start").datepicker({ 
 
      dateFormat: dateFormat, 
 
      minDate: 0, 
 
      showButtonPanel: true, 
 
      onClose: function (selectedDate) { 
 
       $("#datepicker-end").datepicker("option", "minDate", selectedDate); 
 
       $("#datepicker-end").focus(); 
 
      } 
 
     }); 
 

 
     $("#datepicker-end").datepicker({ 
 
      dateFormat: dateFormat, 
 
      minDate: 0, 
 
      showButtonPanel: true, 
 
      onClose: function (selectedDate) { 
 
       $("#datepicker-start").datepicker("option", "maxDate", selectedDate); 
 
      } 
 
     }); 
 

 

 
\t 
 
     $('#calendar').fullCalendar('renderEvent', newEvent, true); 
 

 
     $('#calendar').fullCalendar('gotoDate', newEvent.start); 
 

 
     var color = $("#default-events label.active input").attr("color"); 
 
     $('td.fc-day').css('background-color', color); 
 

 
     // empty date 
 
     $('#datepicker-start').val(''); 
 
     $('#datepicker-end').val(''); 
 

 
     // reset bounds dates 
 
     $('#datepicker-start').datepicker("option", "maxDate", null); 
 
     $('#datepicker-end').datepicker("option", "minDate", null); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/i18n/jquery.ui.datepicker-fr.js"></script> 
 
<link href="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/jquery-ui-1.10.3.custom.min.css" media="screen" rel="stylesheet" type="text/css"> 
 
<link href="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/fullcalendar.css" media="screen" rel="stylesheet" type="text/css"> 
 
<script src="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/moment.js"></script> 
 
<script src="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/jquery-ui.custom.min.js"></script> 
 
<script src="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/jquery-ui-1.10.3.custom.datepicker.min.js"></script> 
 
<script src="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/fullcalendar-gtg.js"></script> 
 
<script src="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/datepicker-custom.js"></script> 
 
<script src="https://free-communiity.com/wp-content/themes/listable-172/listable/fullcalendar/fullcalendar.min.js"></script> 
 

 

 

 

 
<div class="tab-pane fade active in" id="calendar_home" style="display:initial;"> 
 
                         
 
          <div id="progress"> 
 
           <div class="bar bar-photo-edit" style="display:none;"> 
 
            <span>Chargement en cours…</span> 
 
           </div> 
 
          </div> 
 

 
          <div id="alert-box"> 
 
           <div id="calendar-not-uptodate" class="alert alert-warning alert-calendar" style="display: initial;"> 
 
            Vous n'avez aucune période selectionné 
 
           </div> 
 
           <div style="display: none;" class="alert alert-success alert-calendar" id="calendar-updated"> 
 
            Votre calendrier a été mis à jour 
 
           </div> 
 
          </div> 
 

 
          <div class="clearfix"></div> 
 

 
          <!-- date picker --> 
 
          <div id="datepicker-event" class="form-inline"> 
 

 
           <label class="home_type">Créer une nouvelle période de disponibilité</label> 
 

 
           <div> 
 
            <div class="form-group calendar-edition"> 
 

 

 
            <input id="datepicker-start" class="form-control " type="text" placeholder="Du" /> 
 
            </div> 
 

 
            <div class="form-group calendar-edition"> 
 
            <input id="datepicker-end" class="form-control " type="text" placeholder="jusqu'au" /> 
 
            </div> 
 

 
            <div class="form-group"> 
 
             <select class="form-control"> 
 
              <option value="0" disabled="" selected="">Type de disponibilité</option> 
 
              <option title="Disponible" classname="event-available" color="#d4f2e6" value="5">Disponible</option> 
 
              <option title="Flexible" classname="event-ask-me" color="#CDE5f9" value="3">Flexible me contacter</option> 
 
              <option title="Indisponible" classname="external-events event-unavailable" color="#E7E7E7" value="1">Indisponible</option> 
 
             </select> 
 
            </div> 
 

 
            <input class="btn btn-default calendar-edition" type="button" id="add_date" value="submit"> 
 
           </div> 
 

 
          </div> 
 
          <!-- #datepicker-event --> 
 
          <div id="datepicker-event"></div> 
 
          <!-- popup period delete --> 
 
          <div class="modal fade" id="deletePeriod" style="display: none;"> 
 
           <div class="modal-dialog"> 
 
            <div class="modal-content"> 
 
             <div class="modal-header"> 
 
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
               <span aria-hidden="true">×</span> 
 
              </button> 
 
              <h4 class="modal-title" id="myModalLabel">Etes-vous sûr?</h4> 
 
             </div> 
 
             <div class="modal-body"> 
 
              <p>Etes-vous sûr de vouloir supprimer cette période ?</p> 
 
             </div> 
 
             <div class="modal-footer"> 
 
              <button type="button" class="btn btn-default btn-basic" data-dismiss="modal">Annuler</button> 
 
              <button type="button" class="btn btn-primary" data-dismiss="modal" id="delete_period">Supprimer</button> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 

 
          <!-- calendar --> 
 
          <div id="calendar" class="" value=""> 
 
\t \t \t \t \t \t \t </div> 
 
          <!-- default value --> 
 
          <div id="default-events"> 
 
           <label class="">Disponibilité par défaut <span class="grey-color small italic text-default-value">Choisissez l'option qui décrit le mieux la disponibilité de votre maison durant l'année</span></label> 
 

 
           <label class="radio default-available active"> 
 
            <input type="radio" color="#d4f2e6" name="default-date" id="default-date-4" value="4"> 
 
            <span class="color-available small">Disponible</span> 
 
            Ma maison est généralement disponible 
 
           </label> 
 
           <label class="radio default-ask-me"> 
 
            <input type="radio" color="#CDE5f9" name="default-date" id="default-date-2" value="2" > 
 
            <span class="color-ask-me small">Demandez moi</span> 
 
            Mes dates sont flexibles 
 
           </label> 
 
           <label class="radio default-unavailable"> 
 
            <input type="radio" color="#E7E7E7" name="default-date" id="default-date-0" value="0"> 
 
            <span class="color-unavailable small">Indisponible</span> 
 
            Ma maison est habituellement indisponible 
 
           </label> 
 
           <label class="default-guestwanted"> 
 
            <span class="color-wanted small">test</span> 
 
            Je recherche activement des Invités <br> 
 
            <small><em>(période non disponible par défaut)</em></small> 
 
           </label> 
 
          </div> 
 

 
          <div class="clearfix"></div> 
 

 
          <div id="return-message"></div> 
 

 
         </div>