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

如何将fullcalendar.io用作类型=＆＃34; date＆＃34;选择对话框？

1 个答案: