Bonjour,
-wordpress - wp job manager- woo commerce booking - jquery fullcalendar
Je realise un calendrier avec fullcalendar en php que je cherche à intégrer dans un formulaire de disponibilté wp job. Pour l'instant je cherche dans un premier temps à faire fonctionner le calendrier en fonction des disponibilites selectionnés si qelqun peut m'apporter son soutien j'ai un manque de compréhension pour le réaliser.
-wordpress - wp job manager- woo commerce booking - jquery fullcalendar
Je realise un calendrier avec fullcalendar en php que je cherche à intégrer dans un formulaire de disponibilté wp job. Pour l'instant je cherche dans un premier temps à faire fonctionner le calendrier en fonction des disponibilites selectionnés si qelqun peut m'apporter son soutien j'ai un manque de compréhension pour le réaliser.
<?php
/**
* The template for displaying the WP Job Manager frontend listing submission form
*
* @package Listable
*/
if ( ! defined( 'ABSPATH' ) ) exit;
global $job_manager;
?>
<form action="<?php echo esc_url( $action ); ?>" method="post" id="submit-job-form" class="job-manager-form" enctype="multipart/form-data">
<?php if ( apply_filters( 'submit_job_form_show_signin', true ) ) : ?>
<?php get_job_manager_template( 'account-signin.php' ); ?>
<?php endif; ?>
<?php
add_action('get_header', function() {
if ( is_page( '11281')){
add_filter( 'submit_job_form_fields', 'frontend_add_salary_field' );
}
});
?>
<?php if ( job_manager_user_can_post_job() ) : ?>
<!-- Job Information Fields -->
<?php do_action( 'submit_job_form_job_fields_start' );
$all_fields = $job_fields;
if ( $company_fields ) {
$all_fields = $job_fields + $company_fields;
}
uasort( $all_fields, 'listable_sort_array_by_priority' ); ?>
<?php foreach ( $all_fields as $key => $field ) : ?>
<fieldset class="fieldset-<?php echo esc_attr( $key ); ?>">
<label for="<?php echo esc_attr( $key ); ?>">
<?php
if ( isset( $field['label'] ) ) {
echo $field['label'];
}
echo apply_filters( 'submit_job_form_required_label', (isset($field['required'])&&$field['required']) ? '' : ' <small>' . esc_html__( '(optional)', 'listable' ) . '</small>', $field );
?>
</label>
<div class="field <?php echo ( isset($field['required']) && $field['required'] ) ? 'required-field' : ''; ?>">
<?php
if ( isset( $field['type'] ) ) {
get_job_manager_template( 'form-fields/' . $field['type'] . '-field.php', array( 'key' => $key, 'field' => $field ) );
} ?>
</div>
</fieldset>
<?php endforeach; ?>
<?php do_action( 'submit_job_form_job_fields_end' ); ?>
<!-- Company Information Fields -->
<?php if ( $company_fields ) : ?>
<?php do_action( 'submit_job_form_company_fields_start' ); ?>
<?php do_action( 'submit_job_form_company_fields_end' ); ?>
<?php endif; ?>
<p>
<input type="hidden" name="job_manager_form" value="<?php echo $form; ?>" />
<input type="hidden" name="job_id" value="<?php echo esc_attr( $job_id ); ?>" />
<input type="hidden" name="step" value="<?php echo esc_attr( $step ); ?>" />
<input type="submit" name="submit_job" class="button" value="<?php echo esc_attr( $submit_button_text ); ?>" />
</p>
<?php else : ?>
<?php do_action( 'submit_job_form_disabled' ); ?>
<?php endif; ?>
</form>
<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.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
// 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 = jQuery("#datepicker-start"),
endField = jQuery("#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
jQuery("#datepicker-start").closest('form').append('<input type="hidden" name="date_format" id="date_format" value="'+ dateFormat +'">');
jQuery("#datepicker-start")
.datepicker({
dateFormat: dateFormat,
minDate: 0,
showButtonPanel: true,
beforeShow: function () {
setTimeout(function () {
jQuery(".ui-datepicker-buttonpane")
.html('')
.append("<button onclick='clearDates()'>" + jQuery('#datepicker-start').attr('data-clear-text') + "</button>");
}, 1);
},
onClose: function (selectedDate) {
jQuery("#datepicker-end").datepicker("option", "minDate", selectedDate);
jQuery("#datepicker-end").focus();
}
});
jQuery("#datepicker-end")
.datepicker({
dateFormat: dateFormat,
minDate: 0,
showButtonPanel: true,
beforeShow: function () {
setTimeout(function () {
jQuery(".ui-datepicker-buttonpane")
.html('')
.append("<button onclick='clearDates()'>" + jQuery('#datepicker-end').attr('data-clear-text') + "</button>");
}, 1);
},
onClose: function (selectedDate) {
jQuery("#datepicker-start").datepicker("option", "maxDate", selectedDate);
}
});
function clearDates() {
jQuery("#datepicker-start").val("");
jQuery("#startOn").val("");
jQuery("#datepicker-end").val("");
jQuery("#endOn").val("");
jQuery("#datepicker-end").datepicker("hide");
}
jQuery('#add_date').click(function() {
var jQuerydateStartField = jQuery("#datepicker-event #datepicker-start");
var jQuerydateEndField = jQuery("#datepicker-event #datepicker-end");
// check if starting date is not empty
if (!jQuerydateStartField.val()) {
jQuerydateStartField.closest('.form-group').addClass('has-error');
return;
} else {
jQuerydateStartField.closest('.form-group').removeClass('has-error');
}
// check if ending date is not empty
if (!jQuerydateEndField.val()) {
jQuerydateEndField.closest('.form-group').addClass('has-error');
return;
} else {
jQuerydateEndField.closest('.form-group').removeClass('has-error');
}
// check if availability type selected
// if avaibility type is not selected : "Avaibility type" on select
if (jQuery("#datepicker-event option:selected").val() < 1) {
jQuery("#datepicker-event select").closest('.form-group').addClass('has-error');
return;
} else {
jQuery("#datepicker-event select").closest('.form-group').removeClass('has-error');
}
// Get events dates on calendar
var pulledEvents = jQuery('#calendar').fullCalendar( 'clientEvents');
// get date options
// format dates with Momentjs
var start = moment(jQuerydateStartField.val(), dateFormat).format('YYYY-MM-DD');
var end = moment(jQuerydateEndField.val(), dateFormat).format('YYYY-MM-DD');
var type = jQuery("#datepicker-event option:selected").val();
var color = jQuery("#datepicker-event option:selected").attr("color");
var title = jQuery("#datepicker-event option:selected").text();
// update calendar
var newEvent = new Object();
newEvent.title = title;
newEvent.start = start;
newEvent.end = end;
newEvent.color = color;
newEvent.type = type;
newEvent._id = "picker"+Math.floor((Math.random()*1000)+1);
// update others dates
startCurrent = newEvent.start;
endCurrent = newEvent.end;
// Compare to events dates
var nbEventCheck = pulledEvents.length;
for (var i = 0; i < nbEventCheck; i++) {
// avoid to compare to the same copy element
if (newEvent._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));
jQuery('#calendar').fullCalendar('updateEvent', pulledEvents[i]);
// if same remove
if (endCurrent.getTime() == endPulled.getTime()) {
jQuery('#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));
jQuery('#calendar').fullCalendar('updateEvent', pulledEvents[i]);
}
// contain
else {
// copy pulledEvent to the end
var copiedpulledEvent = jQuery.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;
jQuery('#calendar').fullCalendar('renderEvent', copiedpulledEvent, true);
// cut beginning pulledEvent
pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 24 * -1));
jQuery('#calendar').fullCalendar('addEventSource', pulledEvents[i]);
jQuery('#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 * 12 * 1));
jQuery('#calendar').fullCalendar('updateEvent', pulledEvents[i]);
// if same remove
if (endCurrent.getTime() == endPulled.getTime()) {
jQuery('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id)
}
}
// right
else if (startCurrent >= startPulled) {
//pulledEvents[i].end = new Date(startCurrent.getTime() + (1000 * 60 * 60 * 12 * 1));
newEvent.start = new Date(newEvent.start.getTime() + (1000 * 60 * 60 * 12 * 1));
/*$('#calendar').fullCalendar('updateEvent', pulledEvents[i]);
if (startCurrent.getTime() == startPulled.getTime()) {
$('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id)
}*/
}
// surround
else
{
jQuery('#calendar').fullCalendar('removeEvents',pulledEvents[i]._id);
}
}
}
jQuery('#calendar').fullCalendar('renderEvent', newEvent, true);
jQuery('#calendar').fullCalendar('gotoDate', newEvent.start);
var color = jQuery("#default-events label.active input").attr("color");
jQuery('td.fc-day').css('background-color', color);
// empty date
jQuery('#datepicker-start').val('');
jQuery('#datepicker-end').val('');
// reset bounds dates
jQuery('#datepicker-start').datepicker("option", "maxDate", null);
jQuery('#datepicker-end').datepicker("option", "minDate", null);
saveDates();
});
// function convertMomentToPHPFormat(format)
// {
// return format
// .replace('DD', 'd')
// .replace('D', 'j')
// .replace('MM', 'm')
// .replace('M', 'n')
// .replace('YYYY', 'Y')
// .replace('YY', 'y');
// }
// function convertPHPFormatMoment(format)
// {
// return format
// .replace('d', 'DD')
// .replace('j', 'D')
// .replace('m', 'MM')
// .replace('n', 'M')
// .replace('Y', 'YYYY')
// .replace('y', 'YY');
// }
// function getUrlParameter(sParam) {
// var sPageURL = decodeURIComponent(window.location.search.substring(1)),
// sURLVariables = sPageURL.split('&'),
// sParameterName,
// i;
//
// for (i = 0; i < sURLVariables.length; i++) {
// sParameterName = sURLVariables[i].split('=');
// if (sParameterName[0] === sParam) {
// return sParameterName[1] === undefined ? true : sParameterName[1];
// }
// }
//};
});
</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">
<script>
jQuery(document).ready(function() {
jQuery("#datepicker-start").datepicker();
dateFormat: dateFormat,
minDate: 0,
showButtonPanel: true,
beforeShow: function () {
setTimeout(function () {
jQuery(".ui-datepicker-buttonpane")
.html('')
.append("<button onclick='clearDates()'>" + jQuery('#datepicker-end').attr('data-clear-text') + "</button>");
}, 1);
},
onClose: function (selectedDate) {
jQuery("#datepicker-start").datepicker("option", "maxDate", selectedDate);
}
jQuery("#datepicker-end").datepicker();
header: {
left: "prev,next today",
}
jQuery("#add_date").datepicker();
});
</script>
<input id="datepicker-start" class="form-control " type="text" placeholder="Du" data-clear-text="">
</div>
<div class="form-group calendar-edition">
<input class="form-control " type="text" id="datepicker-end" placeholder="jusqu'au" data-clear-text="Vider les dates">
</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 -->
<!-- popup period delete -->
<div class="modal fade" id="deletePeriod" idevent="picker886" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" 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">
<table class="fc-header" style="width:100%"><tbody><tr><td class="fc-header-left">
<span class="fc-header-title"><h2>octobre 2016</h2></span></td><td class="fc-header-center"></td>
<td class="fc-header-right">
<span class="fc-button fc-button-today fc-state-default fc-corner-left fc-state-disabled" unselectable="on">aujourd’hui</span>
<span class="fc-button fc-button-prev fc-state-default" unselectable="on"><span class="fc-text-arrow">‹</span>
</span><span class="fc-button fc-button-next fc-state-default fc-corner-right" unselectable="on">
<span class="fc-text-arrow">›</span></span></td></tr></tbody></table>
<div class="fc-content" style="position: relative;"><div class="fc-view fc-view-month fc-grid" style="position:relative" unselectable="on">
<div class="fc-event-container" style="position:absolute;z-index:8;top:0;left:0">
<div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end ui-draggable" style="position: absolute; left: 214px; background-color: rgb(212, 242, 230); border-color: rgb(212, 242, 230); width: 101px; top: 126px;" unselectable="on"><div class="fc-event-inner"><span class="fc-event-title">Disponible</span></div><div class="ui-resizable-handle ui-resizable-e"> </div></div></div><table class="fc-border-separate" style="width:100%" cellspacing="0"><thead><tr class="fc-first fc-last"><th class="fc-day-header fc-sun fc-widget-header fc-first" style="width: 53px;">dim.</th><th class="fc-day-header fc-mon fc-widget-header" style="width: 53px;">lun.</th><th class="fc-day-header fc-tue fc-widget-header" style="width: 53px;">mar.</th><th class="fc-day-header fc-wed fc-widget-header" style="width: 53px;">mer.</th><th class="fc-day-header fc-thu fc-widget-header" style="width: 53px;">jeu.</th><th class="fc-day-header fc-fri fc-widget-header" style="width: 53px;">ven.</th><th class="fc-day-header fc-sat fc-widget-header fc-last">sam.</th></tr></thead><tbody><tr class="fc-week fc-first"><td class="fc-day fc-sun fc-widget-content fc-other-month fc-past fc-first" data-date="2016-09-25" style="background-color: rgb(212, 242, 230);"><div style="min-height: 27px;"><div class="fc-day-number">25</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-mon fc-widget-content fc-other-month fc-past" data-date="2016-09-26" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">26</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-other-month fc-past" data-date="2016-09-27" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">27</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-other-month fc-past" data-date="2016-09-28" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">28</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-other-month fc-past" data-date="2016-09-29" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">29</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-other-month fc-past" data-date="2016-09-30" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">30</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-past fc-last" data-date="2016-10-01" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">1</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-sun fc-widget-content fc-past fc-first" data-date="2016-10-02" style="background-color: rgb(212, 242, 230);"><div style="min-height: 26px;"><div class="fc-day-number">2</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-mon fc-widget-content fc-past" data-date="2016-10-03" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">3</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-past" data-date="2016-10-04" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">4</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-past" data-date="2016-10-05" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">5</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-past" data-date="2016-10-06" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">6</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-past" data-date="2016-10-07" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">7</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-past fc-last" data-date="2016-10-08" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">8</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-sun fc-widget-content fc-past fc-first" data-date="2016-10-09" style="background-color: rgb(212, 242, 230);"><div style="min-height: 26px;"><div class="fc-day-number">9</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-mon fc-widget-content fc-past" data-date="2016-10-10" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">10</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-today fc-state-highlight" data-date="2016-10-11" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">11</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-future" data-date="2016-10-12" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">12</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-future" data-date="2016-10-13" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">13</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-future" data-date="2016-10-14" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">14</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-future fc-last" data-date="2016-10-15" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">15</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-sun fc-widget-content fc-future fc-first" data-date="2016-10-16" style="background-color: rgb(212, 242, 230);"><div style="min-height: 26px;"><div class="fc-day-number">16</div><div class="fc-day-content"><div style="position: relative; height: 4px;"> </div></div></div></td><td class="fc-day fc-mon fc-widget-content fc-future" data-date="2016-10-17" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">17</div><div class="fc-day-content"><div style="position: relative; height: 4px;"> </div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-future" data-date="2016-10-18" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">18</div><div class="fc-day-content"><div style="position: relative; height: 4px;"> </div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-future" data-date="2016-10-19" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">19</div><div class="fc-day-content"><div style="position: relative; height: 4px;"> </div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-future" data-date="2016-10-20" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">20</div><div class="fc-day-content"><div style="position: relative; height: 4px;"> </div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-future" data-date="2016-10-21" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">21</div><div class="fc-day-content"><div style="position: relative; height: 4px;"> </div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-future fc-last" data-date="2016-10-22" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">22</div><div class="fc-day-content"><div style="position: relative; height: 4px;"> </div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-sun fc-widget-content fc-future fc-first" data-date="2016-10-23" style="background-color: rgb(212, 242, 230);"><div style="min-height: 26px;"><div class="fc-day-number">23</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-mon fc-widget-content fc-future" data-date="2016-10-24" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">24</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-future" data-date="2016-10-25" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">25</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-future" data-date="2016-10-26" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">26</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-future" data-date="2016-10-27" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">27</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-future" data-date="2016-10-28" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">28</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-future fc-last" data-date="2016-10-29" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">29</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td></tr><tr class="fc-week fc-last"><td class="fc-day fc-sun fc-widget-content fc-future fc-first" data-date="2016-10-30" style="background-color: rgb(212, 242, 230);"><div style="min-height: 28px;"><div class="fc-day-number">30</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-mon fc-widget-content fc-future" data-date="2016-10-31" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">31</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-other-month fc-future" data-date="2016-11-01" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">1</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-other-month fc-future" data-date="2016-11-02" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">2</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-other-month fc-future" data-date="2016-11-03" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">3</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-other-month fc-future" data-date="2016-11-04" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">4</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-other-month fc-future fc-last" data-date="2016-11-05" style="background-color: rgb(212, 242, 230);"><div><div class="fc-day-number">5</div><div class="fc-day-content"><div style="position: relative; height: 0px;"> </div></div></div></td></tr></tbody></table></div></div></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" checked="checked">
<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>