Calendarcomponent

This component required 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"></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')
    months: array, // array of month names from Jan to Dec
    weekDays: array, // array of week day names from Sun to Sat
    getDates: function(d){...}, // see example below
    click: function(d){...}, // fired when user clicked on day, in "d" stored date
});

Events & Methods

Output for getDates



Output for click


$(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');
})