Search code examples
javascriptjqueryfullcalendarfullcalendar-scheduler

Event click show the selected data with FullCalendar function

I have a problem for event click show the selected data with FullCalendar function in the popup modal. I just can show the start date data in the popup modal.

Below is my sample coding:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<script>
//suppose this is array
var arrays = [{
  "title": "All Day Event",
  "start": "2021-04-01 00:00:00",
  "color": "#40E0D0"
}, {
  "title": "Long Event",
  "start": "2016-01-07 00:00:00",
  "color": "#FF0000"
}, {
  "title": "Repeating Event",
  "start": "2016-01-09 16:00:00",
  "color": "#0071c5"
}, {
  "title": "Conference",
  "start": "2016-01-11 00:00:00",
  "color": "#40E0D0"
}, {
  "title": "Meeting",
  "start": "2016-01-12 10:30:00",
  "color": "#000"
}, {
  "title": "Lunch",
  "start": "2016-01-12 12:00:00",
  "color": "#0071c5"
}, {
  "title": "Happy Hour",
  "start": "2016-01-12 17:30:00",
  "color": "#0071c5"
}, {
  "title": "Dinner",
  "start": "2016-01-12 20:00:00",
  "color": "#0071c5"
}, {
  "title": "Birthday Party",
  "start": "2016-01-14 07:00:00",
  "color": "#FFD700"
}, {
  "title": "Double click to change",
  "start": "2016-01-28 00:00:00",
  "color": "#008000"
}, {
  "title": "512",
  "start": "2021-04-04 00:00:00",
  "color": "#FF0000"
}, {
  "title": "21512",
  "start": "2021-04-06 00:00:00",
  "color": "#FF0000"
}, {
  "title": "236234",
  "start": "2021-04-07 00:00:00",
  "color": "#FF0000"
}, {
  "title": "3521",
  "start": "2021-04-03 00:00:00",
  "color": "#00FF00"
}, {
  "title": "HHH",
  "start": "2021-04-02 00:00:00",
  "color": "#FFFF00"
}]

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    initialDate: '2021-04-25',
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectMirror: true,
    eventDidMount: function(view) {
      //loop through json array
      $(arrays).each(function(i, val) {
        //find td->check if the title has same value-> get closest daygird ..change color there
        $("td[data-date=" + moment(val.start).format("YYYY-MM-DD") + "] .fc-event-title:contains(" + val.title + ")").closest(".fc-daygrid-event-harness").css("background-color", val.color);
      })
    },
    select: function(arg) {
      $('#createEventModal #startTime').val(arg.start);
      $('#createEventModal #endTime').val(arg.end);
      $('#createEventModal #when').text(arg.start);
      $('#createEventModal').modal('toggle');
    },
    eventClick:  function(arg) {
                // endtime = $.fullCalendar.moment(event.end).format('h:mm');
                // starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
                // var mywhen = starttime + ' - ' + endtime;
                $('#title').html(arg.event.title);
                $('#modalWhen').text(arg.event.start);
                $('#eventID').val(arg.event.id);
                $('#calendarModal').modal();
            },
    editable: true,
    dayMaxEvents: true,
    events: arrays //pass array here
  });

  calendar.render();
});
</script>
<div id='calendar'></div>

    <!-- Modal -->
<div id="createEventModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Event</h4>
      </div>
      <div class="modal-body">
            <div class="control-group">
                <label class="control-label" for="inputPatient">Event:</label>
                <div class="field desc">
                    <input class="form-control" id="title" name="title" placeholder="Event" type="text" value="">
                </div>
            </div><br>
            <div class="control-group">
                <label class="control-label" for="inputPatient">Color:</label>
                <div class="field desc">
                <select class="form-control" id="color" name="color" placeholder="Color" type="text" value="">
                <option value="#FF0000">Red</option>
                <option value="#800000">Maroon</option>
                <option value="#FFFF00">Yellow</option>
                <option value="#008000">Green</option>
                <option value="#00FF00">Light Green</option>
                <option value="#00FFFF">Aqua</option>
                <option value="#0000FF">Blue</option>
                <option value="#000080">Navy</option>
                <option value="#FF00FF">Fuchsia</option>
                <option value="#800080">Purple</option>
                </select>
                </div>
            </div>
            
            <input type="hidden" id="startTime"/>
            <input type="hidden" id="endTime"/>           
                   
        <div class="control-group" style="display:none;">
            <label class="control-label" for="when">When:</label>
            <div class="controls controls-row" id="when" style="margin-top:5px;">
            </div>
        </div>
        
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button type="submit" class="btn btn-primary" id="submitButton">Save</button>
    </div>
    </div>

  </div>
</div>


<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Event Details</h4>
        </div>
        <div id="modalBody" class="modal-body">
        <h4 id="title" class="modal-title"></h4>
        <div id="modalWhen" style="margin-top:5px;"></div>
        </div>
        <input id="eventID"/>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
        </div>
    </div>
</div>
</div>

Now my result when I've clicked 2021-04-01 All Day Event like below the picture:

output1

Actually, I want the expected result like below the picture:

output2

Hope someone can guide me on how to solve it. Thanks.

Solution

  • It error because you select wrong elements, eventClick should be like

           eventClick:  function(arg) {
             $('#modalBody > #title').text(arg.event.title);
             $('#modalWhen').text(arg.event.start);
             $('.modal-content > #eventID').val(arg.event._def.defId);
             $('#calendarModal').modal();
         },
        editable: true,
        dayMaxEvents: true,
        events: arrays //pass array here
      });