FullCalendarのポップアップ・オン・デイ・クリック

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を呼び出すことになっています。以下$('.dayClickWindow').show();

デモに$(this).show('.dayClickWindow');を変更します。

$(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を制限することは可能ですか？