<script src="https://bookingcalendar.mainapps.com/js/jquery-2.1.4.min.js"></script>
If you need mobile particularity include jQuery mobile after jQuery library inclusion but before noConflict (if present).
<script src="https://bookingcalendar.mainapps.com/js/jquery.mobile-1.4.5.js"></script> <link href="https://bookingcalendar.mainapps.com/css/jquery.mobile-1.4.5.css" rel="stylesheet" />
If you are in trouble with links after jQuery mobile inclusion, please add this portion of code in your index page (use $ or $jma if you are in safe mode). You can find more info here
$(document).ready(function() { $("a").each(function() { $(this).attr("rel","external"); }); });
<link href="https://bookingcalendar.mainapps.com/css/ml-calendar.css" rel="stylesheet" /> <script src="https://bookingcalendar.mainapps.com/js/ml-calendar.js"></script>
If your site already includes a version of jQuery other than 2.1.4 please insert this line after jQuery 2.1.4 script
<script>var $jma = jQuery.noConflict(true);</script>
Then replace this line
<script src="https://bookingcalendar.mainapps.com/js/ml-calendar.js"></script>
With the following
<script src="https://bookingcalendar.mainapps.com/js/safe/ml-calendar.js"></script>
Not sure about jQuery version?
Before proceeding further, insert the following code on your site and check the version (if you get an error means jQuery is not present)
<script> $(document).ready(function () { console.log($().jquery); }); </script>
<div id="calendar"></div>
<script> $("#calendar").mlCalendar(option) </script>
If you are following the Is jQuery already present? section, append 'jma' to $ symbol
<script> $jma("#calendar").mlCalendar(option) </script>
<script> var cal = $("#calendar").mlCalendar({ apikey: "aaa", // MediaLab apikey language: "it", // language (it or en) dataStart: null, // preselect check in date (yyyy-mm-dd) dataEnd: null, // preselect check out date (yyyy-mm-dd) minPax: null, // min guests combo select, if null sets combo to 1 maxPax: 2, // max guests combo select pax: 2, // selected guests year: , // selected view year month: 1, // selected month view calNumber: 3, // number of calendar resourceID: 8753, // resource id realGroupID: 49, // real group id startDay: 1, // start day of the week scrollMonths: 1, // months to scroll on next and prev button minMonth: 8, // min month date to go back minYear: , // min year date to go back cols: 3, // number of calendar in line dateFormat: "dd/mm/yyyy", // date format submitSelector: "#myButton", // custom button selector for submit legend: 1, // display legend toolbar: 1, // display toolbar monthTitle: 1, // display month name and year on every calendar clickable: 1, // if 0 not allow to select days on calendar (readonly calendar) labels: { // translations checkIn: "Arrivo", checkOut: "Partenza", nights: "Notti", book: "Prenota", pax: "Ospiti", selectable: "Libero", notSelectable: "Non selezionabile", notAvailable: "Occupato", legend: "Legenda" }, onChange: function (from,to,pax) { // callback on change date or guests number } }); </script>
<script> var cal2 = $("#calendar2").mlCalendar({ apikey: "aaa", language: "it", year: 2018, month: 5, calNumber: 4, resourceID: 8753, realGroupID: 49, startDay: 1, scrollMonths: 4, minMonth: 8, minYear: 2018, maxMonth: 12, submitSelector: ".myButton", legend: 0, toolbar: 0, cols: 4, calWrapper: "col-lg-3 col-md-4 col-sm-6 col-xs-12", labels: { selectable: "Libero", notSelectable: "Non selezionabile", notAvailable: "Occupato", legend: "Legenda" }, onChange: function (from, to, pax) { //check undefined on init! if (typeof (from) !== 'undefined') { console.log(from); } if (typeof (to) !== 'undefined') { console.log(to); } if (typeof (pax) !== 'undefined') { console.log(pax); } } }); </script>
<script> var calSafe = $jma("#calendarSafe").mlCalendar({ apikey: "aaa", language: "it", year: 2018, month: 5, calNumber: 4, resourceID: 8753, realGroupID: 49, startDay: 1, scrollMonths: 4, minMonth: 8, minYear: 2018, maxMonth: 12, submitSelector: "#myButtonSafe", legend: 0, toolbar: 0, cols: 4, calWrapper: "col-lg-3 col-md-4 col-sm-6 col-xs-12", labels: { selectable: "Libero", notSelectable: "Non selezionabile", notAvailable: "Occupato", legend: "Legenda" }, onChange: function (from, to, pax) { //check undefined on init! if (typeof (from) !== 'undefined') { console.log(from); } if (typeof (to) !== 'undefined') { console.log(to); } if (typeof (pax) !== 'undefined') { console.log(pax); } } }); </script>