MediaLab Booking Calendar

Include jQuery if not present

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

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>

Create a wrapper in the page where place the calendar

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

Call the plugin before </body>

<script>
    $("#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)
    maxPax: 2, // max guests combo select
    pax: 2, // selected guests
    year: 2017, // selected view year
    month: 1, // selected month view
    calNumber: 3, // number of calendar
    resourceID: 8762, // resource id
    realGroupID: 51, // 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: 2015, // 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: 0, // 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"
    },
    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: 2017,
    month: 5,
    calNumber: 4,
    resourceID: 8762,
    realGroupID: 51,
    startDay: 1,
    scrollMonths: 4,
    minMonth: 8,
    minYear: 2017,
    maxMonth: 12,
    maxYear: 2019,
    submitSelector: ".myButton",
    legend: 1,
    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) {
                
            }
});
</script>