Question

我对FullCalendar dayClick没什么问题。这可以显示我的窗口（带有我的CSS样式的div）在日历中添加新事件吗？

HTML

 <div class="Calendar">
    </div>
    <div class="dayClickWindow">
    </div>`

CSS

  .dayClickWindow
    {
    width:500px;
    height:500px;
    border-radius:15px;
    background-color:#000;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-250px;
    margin-left:-250px;
    display:none;
    z-index:1;
}

JQ

    $(document).ready(function() {

    $('.Calendar').fullCalendar({   

             dayClick: function (data, event, view) {
           $(this).show('.dayClickWindow');
        }           
    }); 
});

Answer 1

您应该在要显示的元素上调用show。将$(this).show('.dayClickWindow');更改为$('.dayClickWindow').show();

演示如下：

$(document).ready(function() {

  $('.Calendar').fullCalendar({

    dayClick: function(data, event, view) {
      $('.dayClickWindow').show();
     }
  });

});

.dayClickWindow {
  width: 500px;
  height: 500px;
  border-radius: 15px;
  background-color: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -250px;
  margin-left: -250px;
  display: none;
  z-index: 1;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css">

<div class="Calendar"></div>
<div class="dayClickWindow"></div>

Answer 2

是否可以限制dayClick仅用于周视图或日视图？

FullCalendar在dayClick上弹出div

2 个答案: