How can I use fullcalendar.io as a type=“date” pic

问题:

Fullcalendar.io is quickly becoming the top-choice library for calendar applications. Is it possible to use it as a <input type="date"> picker? Something like the jQuery UI "Datepicker"?

I'd like to have something like...

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

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

回答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;
}
.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 }

Find an example here