MediaLab Booking Calendar

Include jQuery

<script src="https://bookingcalendar.mainapps.com/js/jquery-2.1.4.min.js"></script>

Include jQuery mobile

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");
    });
});

Include mlCalendar

<link href="https://bookingcalendar.mainapps.com/css/ml-calendar.css" rel="stylesheet" />
<script src="https://bookingcalendar.mainapps.com/js/ml-calendar.js"></script>

Is jQuery already present?

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>

Create a wrapper in the page where place the calendar

<div id="calendar"></div>

Call the plugin before </body>

<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>

Example 1

<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>

Example 2

<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>

Example Safe

<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>