Calendarcomponent

This component requires: metro-global.js, metro-locale.js and metro-calendar.js.

<div class="calendar"></div>
<div class="calendar" data-start-mode="month"></div>
<div class="calendar" data-start-mode="year"></div>

Using

You can activate calendar manually (with javascript) or auto with data-role.

Auto

<div class="calendar" data-role="calendar" data-locale='en'></div>

Manually

$("component_id").calendar();

Manually with options

$("component_id").calendar({
    format: string,             //default 'yyyy-mm-dd'
    multiSelect: boolean,       //default true (multi select date)
    startMode: 'day',           //year, month, day
    date: string,               //the init calendar date (example: '2013-01-01' or '2012-01')
    locale: 'en',               // 'ru', 'ua', 'fr' or 'en', default is $.Metro.currentLocale
    otherDays: false,           // show days for previous and next months,
    weekStart: 0,               //start week from sunday - 0 or monday - 1
    getDates: function(d){...}, // see example below
    click: function(d){...},    // fired when user clicked on day, date stored in "d"
});

Events & Methods

$(function(){
    var cal = $(".calendar").calendar({
        multiSelect: true,
        getDates: function(data){
            var r = "", out = $("#calendar-output").html("");
            $.each(data, function(i, d){
                r += d + "<br />";
            });
            out.html(r);
        },
        click: function(d){
            var out = $("#calendar-output2").html("");
            out.html(d);
        }
    });

    // Add date
    cal.calendar('setDate', '2013-7-21');
    cal.calendar('setDate', '2013-07-2');

    // Remove date
    cal.calendar('unsetDate', '2013-07-2');
})

Start from Monday, display other days

<div class="calendar small" data-role="calendar" data-week-start="0"></div>
<div class="calendar small" data-role="calendar" data-other-days="1"></div>

Languages

<div class="calendar small" data-role="calendar" data-locale="en"></div>
<div class="calendar small" data-role="calendar" data-locale="fr"></div>
<div class="calendar small" data-role="calendar" data-locale="de"></div>