i need creat this calendar i use fullcalendar jquery but i have many problem for integrate on my php page. I need save data for update woo commerce booking or save with submit listing job (wp jobmanager). Thank you for your help
jQuery(document).ready(function($) {
/* 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
});
});
// inti calendar
$('#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);
}
});
$('#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">
<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="">
</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></div>
