Question

我使用Semantic-ui v2.2.11和fullCalendar v3.4.0，我的问题是dayClick事件不适用于月份中日历的每一天，如果我从semantic-ui中删除import css日历工作正常。我对css了解不多，但为什么会这样呢？

My JsFiddle

HTML

<!DOCTYPE html>
 <html>
  <head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <title>#{get 'title' /}</title>
  <link rel="stylesheet" type="text/css" href="@{'/public/semantic-2.2.10/dist/semantic.css'}">
  <link rel="stylesheet"  href="@{'/public/fullcalendar 3.4.0/dist/fullcalendar.min.css'}">

  #{get 'moreStyles' /}

  <!-- Scripts -->
  <script src="@{'/public/jquery-3.2.1/dist/jquery.js'}"></script>
  <script src="@{'/public/moment/min/moment.min.js'}"></script>
  <script src="@{'/public/fullcalendar 3.4.0/dist/fullcalendar.min.js'}">   </script>
  <script src="@{'/public/fullcalendar 3.4.0/dist/locale/es.js'}"></script>
  <script src="@{'/public/semantic-2.2.10/dist/semantic.js'}"></script>

  #{get 'moreScripts' /}
  </head>
  <body>
  <div class="ui secondary pointing menu">
   <a class="active item">
    Home
   </a>
   <div class="right menu">
    <a class="ui item">
      Logout
    </a>
   </div>
  </div>
  <div class="ui vertical left aligned segment">
   <div class="ui container">
    <h1>My calendar</h1>
    <p><a href="@{testCalendarSemantic}">Refresh</a></p>
    <div id="calendar"></div>
   </div>
  </div>
 </body>
</html>

JS

$(function() {
    $('body #calendar').fullCalendar({
        navLinks: true,
        header:{
            left:'prev',
          center:'title',
          right:'next'
        },
        footer:{
            left:'today',
          center:'',
          right:'month,agendaDay,agendaWeek,list'
        },
        dayClick:function(){
            $(this).css('background-color','#cce6ff');
        },
        events:[
            {
                title:'first event',
                start: '2017-06-15 09:00',
                end:'2017-06-17 20:00',
            },
            {
                title:'first event',
                start: '2017-07-21 07:00',
                end:'2017-07-24 23:00',
            },
            {
                title:'first event',
                start: '2017-08-01 10:00',
                end:'2017-08-05 16:00',
            }
        ]
    });
});

Answer 1

您可以通过设置容器的css来解决此问题：

height: auto

完整日历与语义UI无法正常工作

1 个答案: