时间戳

首页 > 解决方案 > 手风琴内的全日历

javascript - 手风琴内的全日历

问题描述

我正在尝试将 Fullcalendar 放入可折叠的手风琴中。出于某种原因，当我打开手风琴时，它只显示日历的顶部，而不显示整个对象。有时我想念简单的东西吗？

jQuery

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    //Load Full Calendar
    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },

      editable: true,
      events: [
        {
          title: 'All Day Event',
          start: new Date(y, m, 1)
        },
      {
          title: 'Click for Google',
          start: new Date(y, m, 28),
          end: new Date(y, m, 29),
          url: 'http://google.com/'

        }
      ]
    });
//Accordion
   $(".btn").on( "click", function() {
        $("#toggleDemo").collapse('toggle');
    });

  });

html

  <div class="container">
          <div class="row">
           <div class="col-xs-10">
             <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Calendar">

<!-- Collapsible Element HTML -->
<div id="toggleDemo" class="collapse collapse">
  <h1>In Here</h1>
    <div id="calendar"></div>
  </div>
</div>
</div>
</div>

标签： javascriptjqueryfullcalendar

解决方案

这是工作演示：https ://codepen.io/creativedev/pen/zaZjYN

它显示带有手风琴的完整日历。只是有一个时刻 js 版本的问题。包括这个版本文件

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js

它会工作的！

推荐阅读