Building a new site for a company hiring out boats. They want to use Planyo booking system – http://planyo.com.
I´ve done my first try to integrate one of Planyos widgets (nervous what will happen with all the others).
I´ve placed the code for the ”Availability search box” in a code block (first page http://new.gotakanacharter.se ) and in a text widget ( http://new.gotakanalcharter.se/planera-din-resa/ ).
In the first case the calender doesn´t appear, in the text widget case there are some ugly text boxes witch also appears on a booking page:

The code that I have placed both in the code box and in the widget i as below (yes, it´s possible to change the css i planyos system, but I don´t know how….)

<script type=’text/javascript’ src=’https://www.planyo.com/utils.js’></script&gt;
<script type=’text/javascript’ src=’https://www.planyo.com/wrappers.js’></script&gt;

<link rel=’stylesheet’ href=’https://www.planyo.com/schemes/?calendar=24466&detect_mobile=auto&sel=scheme_css&#8217; type=’text/css’ />
<div id=’planyo_search_widget’ class=’planyo ‘>
<style type=’text/css’>
#search_form label {display:block;float:none;width:100%}
form#search_form li.planyo_static_help {margin-left:0px;}
</style>
<form id=’box_search_form’ name=’search_form’ class=’left title_inside multi_column’ action=’http://new.gotakanalcharter.se/batar/&#8217; method=’get’><fieldset >

<input type=’hidden’ value=”24466″ id=’calendar’ name=’calendar’ /><input type=’hidden’ value=”1″ id=’submitted’ name=’submitted’ /><input type=’hidden’ value=”http://new.gotakanalcharter.se/batar/&#8221; id=’feedback_url’ name=’feedback_url’ /> <div style=’position:absolute;visibility:hidden;z-index:1000;’ class=’picker_dropdown title_inside’ id=’box_start_datecal’ onmousedown=’var e=arguments[0] || window.event;e.stopPropagation();’ onclick=’var e=arguments[0] || window.event;e.stopPropagation();’ ></div>
<script type=’text/javascript’>
js_set_event(document.getElementById(‘box_start_datecal’), ‘click’, ‘js_dummy’,false);
document.first_weekday=1;
</script>
<script type=’text/javascript’>
document.new_scheme=1;
document.s_prev = “tidigare”;
document.s_next = “nästa”;
document.s_today = “idag”;
document.s_day = “dag”;
document.s_days = “dagar”;
document.s_week = “vecka”;
document.s_weeks = “veckor”;
document.s_weekday = “veckodag”;
document.s_month = “månad”;
document.s_single_res = “single resource”;
document.s_weekdays_short = eval(‘[\”M\”, \”T\”, \”O\”, \”T\”, \”F\”, \”L\”, \”S\”]’);
document.s_weekdays_med = eval(‘[\”Mån\”, \”Tis\”, \”Ons\”, \”Tor\”, \”Fre\”, \”Lör\”, \”Sön\”]’);
document.s_weekdays_long = [“Måndag”,”Tisdag”,”Onsdag”,”Torsdag”,”Fredag”,”Lördag”,”Söndag”];
document.s_months_short = eval(‘[\”Jan\”, \”Feb\”, \”Mar\”, \”Apr\”, \”Maj\”, \”Jun\”, \”Jul\”, \”Aug\”, \”Sep\”, \”Okt\”, \”Nov\”, \”Dec\”]’);
document.s_months_long = eval(‘[\”Januari\”, \”Februari\”, \”Mars\”, \”April\”, \”Maj\”, \”Juni\”, \”Juli\”, \”Augusti\”, \”September\”, \”Oktober\”, \”November\”, \”December\”]’);
document.s_all = “Alla”;
document.s_showall = “Show all”;
document.s_areav = “är tillgängliga.”;
document.s_clickres = “Klicka för att boka.”;
document.s_partav = “Endast tillgänglig för uthyrning mindre än ett dygn. Klicka på datumet ovan för detaljer.”;
document.s_outof = “utanför”;
document.s_unav = “Upptagen”;
document.s_av = “Ledig”;
document.s_vacation = “Vacations”;
document.s_allday = “All day”;
document.s_day_view = “dag”;
document.s_month_view = “månad”;
document.s_more = “mer”;
if (!document.date_format) document.date_format = “d M Y”;

js_set_event(document, ‘mousedown’, ‘js_close_calendar’,false);

</script>
<li id=’row_box_start_date’ class=’fld_single’><div id=’par_box_start_date’ class=’with-status-border float-label-parent float-label-text-parent par_box_start_date’><label id=’lab_box_start_date’ style=’visibility:hidden’ for=’box_start_date’>Datum*</label><input type=’text’ id=’box_start_date’ name=’box_start_date’ value=”” onfocus=”js_close_calendar();document.active_float_date=’box_start_date’;js_show_calendar(‘box_start_date’,’planyo_float_date_changed();’);” onmousedown=”var e=arguments[0] || window.event;e.stopPropagation();” onclick=”var e=arguments[0] || window.event;e.stopPropagation();” placeholder=”Datum*” onfocus=”update_float_label_focus(‘box_start_date’,1);” onblur=”update_float_label_focus(‘box_start_date’,0);” onkeyup=”update_float_label(‘box_start_date’);” /></div><script type=’text/javascript’>
function planyo_float_date_changed() {
if(document.active_float_date)update_float_label(document.active_float_date);
if(window.planyo_dates_changed)planyo_dates_changed(); else if(window.on_planyo_date_picked) on_planyo_date_picked();
}

function update_float_label(item_name) {
var item=document.getElementById(item_name);
var label=document.getElementById(‘lab_’+item_name);
if(item && label) {
label.style.visibility = item.value && item.value.length>0 ? ‘visible’ : ‘hidden’;
}
}

function update_float_label_focus(item_name,f) {
var item=document.getElementById(‘par_’+item_name);
if(item) {
item.style.borderColor = f ? ‘#3D83A8’ : ‘#c0c0c0′;
}
if(item_name==’phone’||item_name==’mobile_number_param’) {
var countryit=(item_name==’phone’?’phone_country_param’:’mobile_country_param’);
if(document.getElementById(countryit) && document.getElementById(countryit).value==’-1′)
float_country_clicked(countryit);
}
}

</script>
<div class=’float-date-icon’ onmousedown=”js_close_calendar();var e=arguments[0] || window.event;e.stopPropagation();” onclick=”var e=arguments[0] || window.event;e.stopPropagation();” onmouseup=”document.active_float_date=’box_start_date’;js_show_calendar(‘box_start_date’,’planyo_float_date_changed();’);” id=”box_start_datecalref”></div><div style=’clear:both’></div><li id=’row_rental_time_value’ class=’fld_single’><div id=’par_rental_time_value’ class=’with-status-border float-label-parent float-label-select-parent’><label for=’rental_time_value’>Hyrestyp</label><select name=’rental_time_value’ id=’box_rental_time_value’ onfocus=”update_float_label_focus(‘rental_time_value’,1);” onblur=”update_float_label_focus(‘rental_time_value’,0);” onkeyup=”update_float_label(‘rental_time_value’);”>
<option selected=’selected’ value=”168″ >One week</option>
<option value=”336″ >Two weeks </option>
</select>
</div><input type=’hidden’ value=”name” id=’sort_fields’ name=’sort_fields’ /><input type=’hidden’ value=”name” id=’sort’ name=’sort’ /><input type=’hidden’ value=”1″ id=’is_night’ name=’is_night’ /><input type=’hidden’ value=”1440″ id=’granulation’ name=’granulation’ /><input type=’hidden’ value=”search” id=’mode’ name=’mode’ /><input type=’hidden’ value=”0″ id=’presentation_mode’ name=’presentation_mode’ />

</fieldset><div id=’res_form_buttons’ >
<label for=’submit_button’> </label><input class=’button’ id=’box_submit_button’ name=’submit_button’ type=’submit’ value=”Sök” /> </div>
<input type=’hidden’ value=’true’ id=’submitted_field’ name=’submitted’ /></form>
</div>