CODEWITHSUNDEEP
javascriptfullcalendar
user10118681
user10118681

Reputation: 3

Javascript Fullcalendar

I am creating a web app that uses the Fullcalendar plugin. The part I am stuck on is trying to obtain the date is selected when a user clicks on a cell. For example a user clicks on 07/02/2018, a popup window appears and inside that window is the date (variable).

This is what I have gotten so far but for some reason I can get the date variable to appear in the popup window. Am I referencing it wrong?

This is the dayClick function:

$('#calendar').fullCalendar({
dayClick: function(date, jsEvent, view) {
    $('.dayClickWindow').show();
      var date=date.format('MM/DD/YYYY');
      alert(date)
},

This is the popup window contained in the body:

    <div class="dayClickWindow">
            <script>document.write(date.dayClick())</script>
           <a href="/test" class="btn" role="dayClickClose">Close</a>

    </div>

Upvotes: 0

Views: 134

Answers (1)

Andrew L
Andrew L

Reputation: 5486

The date from the dayClick callback function is only available inside the function. So your document.write won't know what date you are talking about.

What you can do is include a <span> in your div and populate the span with the date when the user clicks the day.

$(function() {
  $('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view) {
      var dateFormatted = date.format('MM/DD/YYYY');
      $('#dayClickDateSpan').text(dateFormatted);
      $('.dayClickWindow').show();
    }
  });
});
.hidden {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

<div class="dayClickWindow hidden">
  <span id="dayClickDateSpan"></span>
  <a href="/test" class="btn" role="dayClickClose">Close</a>
</div>

<div id='calendar'></div>

Upvotes: 1

Related Questions