PiotrS PiotrS - 1 month ago 23
Javascript Question

FullCalendar pop up div on dayClick

I have little problem with FullCalendar dayClick. Is this possible to show my window (div with my css style) to add new event in calendar?

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

You're supposed to call show on the element you want to show. Change $(this).show('.dayClickWindow'); to $('.dayClickWindow').show();

Demo below:

$(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>