How Can I Use Fullcalendar.io As A Type="date" Picker?

Fullcalendar.io is quickly becoming the top-choice library for calendar applications. Is it possible to use it as a picker? Something like the jQuery UI '

Solution 1:

I was able to get something like I wanted with the following,

$(document).ready(function() {

    $('#foo').click( function () {
        var $input = $(this);
        alert('bar');
        console.log({sibs: $input.siblings().length });
        if ( $input.siblings('.minical').length == 0 ) {

        var $cal = $("<div>", {class:"minical"});
        $input.parent().append($cal);
        $cal.fullCalendar({
          theme: true,
          aspectRatio:1,

          dayRender: function ( date, cell ) {
              $(cell).parent().parent().addClass('hello');
          },

          header: {
              left: 'prevYear,prev,today',
              center: 'title',
              right: 'next,nextYear'            
          },
          dayClick: function ( date, jsEvent, view ) {
              $input.val( date.format() );
              $cal.remove();
          },
          contentHeight: 'auto',
          defaultView: 'month',
          editable: false,
        });
        }
    });

});

And, css

.minical {
    width:200px;
    border: 1px solid black;
    font-size:8px;
}
.minical.fc-row {
    min-height:20px!important;
    height:10px;
    margin:0;
    padding:0!important;
}
.minicalh2 {
    font-size: .8em;
    text-align: center; 
}
.minicalbutton { padding: 0; margin:0; }
.minical.fc-past { color:lightgray }
.minical.fc-day-number { font-size: .8em }
.minical.fc-day-header { font-size: .9em }

Find an example here