如何將fullcalendar.io用作type =「date」選擇器？

Question

Fullcalendar.io正在迅速成爲日曆應用程序的首選庫。是否可以使用它作爲<input type="date">選擇器？像jQuery UI "Datepicker"？

我想有像...

<form> 
<input type="date"> 
</form> 

<script type="text/javascript"> 
$('input[type=date]').fullCalendar() 
</script> 

Answer 1

我能得到像我下面想，

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

}); 

而且，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; 
} 
.minical h2 { 
    font-size: .8em; 
    text-align: center; 
} 
.minical button { padding: 0; margin:0; } 
.minical .fc-past { color:lightgray } 
.minical .fc-day-number { font-size: .8em } 
.minical .fc-day-header { font-size: .9em } 

找到一個example here