0

I have a problem with the full calendar function, is possible to change prompt function var title = prompt("Enter Event Title"); to pop up modal box, because I need to add few inputs in the modal box, for example, I need to add an input field for the color value. I don't want a prompt, because it just only limits 1-time input. I refer to this website to create a full calendar function: https://www.webslesson.info/2017/12/jquery-fullcalandar-integration-with-php-and-mysql.html

<script>
$(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events: 'load.php',
    selectable:true,
    selectHelper:true,
    select: function(start, end, allDay)
    {
     var title = prompt("Enter Event Title");
     if(title)
     {
      var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
      $.ajax({
       url:"insert.php",
       type:"POST",
       data:{
           title:title, 
           start:start, 
           end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }
      })
     }
    },
}
</script>

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

output 2

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

POPUP MODAL EXAMPLE

<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>
            
            <input type="hidden" id="startTime"/>
            <input type="hidden" id="endTime"/>
            
            
       
        <div class="control-group">
            <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>
Pi Network Crytocurrency
  • 583
  • 1
  • 8
  • 25
  • `is possible to change prompt function var title = prompt("Enter Event Title"); to pop up modal box` ...yes of course it is. That's just a standard browser prompt anyway, it has nothing to do with fullCalendar. You can do absolutely anything you like within the `select` callback (or any of the other fullCalendar callbacks) - you're defining the function, so you can put whatever you want inside it. – ADyson Apr 23 '21 at 14:57
  • P.S. The version of fullCalendar you're using is quite old and not supported anymore. You should try to use the newest version instead, and find a more recent tutorial. – ADyson Apr 23 '21 at 14:58
  • @ADyson Can you suggest which one free fullcalendar plugin is best? – Pi Network Crytocurrency Apr 24 '21 at 14:54
  • Huh? I just said you should use the latest version of fullCalendar, I didn't suggest using a different product. You can find everything you need to know at https://fullcalendar.io/ – ADyson Apr 25 '21 at 07:42
  • Ok. How to change the popup modal based on my question? – Pi Network Crytocurrency Apr 25 '21 at 07:44
  • Write some code which displays whatever modal you want. I don't know how you want it to look. Just switch the prompt for something which displays your modal div, and populates the form within it with some data from the event, and then make sure you handle the "submit" button of the modal, and when the user submits you add the event to the calendar. I'm pretty sure you can already find examples of this on Stackoverflow, in fact - please search if you can't make it work yourself. – ADyson Apr 25 '21 at 07:48
  • @ADyson I have updated my question for popup. Do you know how to write it in javascript then make It popup? – Pi Network Crytocurrency Apr 25 '21 at 10:00
  • Is this a bootstrap modal? There are already examples in the bootstrap documentation showing how to make a modal open using JavaScript – ADyson Apr 25 '21 at 13:16
  • I just don't know how to change prompt replace to popup – Pi Network Crytocurrency Apr 25 '21 at 13:28
  • Just delete it and replace with code which opens the modal. Then do the other steps I mentioned. https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery . You need to _try_ something yourself at least – ADyson Apr 25 '21 at 13:42
  • @ADyson Can you help me with this question https://stackoverflow.com/questions/67293886/set-each-different-color-in-the-event-box-with-full-calendar-function for full calendar function? – Pi Network Crytocurrency Apr 28 '21 at 04:50

0 Answers0