Full Calendar Add event not via promot

问题

Am wondering how I can allow users to fill out a form instead of the promot box that seems to pop up, when a user clicks on a black part of the fullcalendar

this is basically what I have done so far. as you can see i have it sending the data to a PHP page that is working, but I am just not happy with the prompt box and instead would like it to be a nice form that they are able to add notes to as well.

select: function(start, end, allDay) {
                    var title = prompt('Event Title:');
                        if (title) {
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    allDay: allDay,

                                },
                                true // make the event "stick"
                            );
                             year = new Date(start).getFullYear();
                             month = new Date(start).getMonth()+1;
                             month = ((month < 10) ? '0' : '') + month;

                             day = ((new Date(start).getDate() < 10) ? '0' : '') + new Date(start).getDate();

                             hours = ((new Date(start).getHours() < 10) ? '0' : '') + new Date(start).getHours();

                             min = ((new Date(start).getMinutes() < 10) ? '0' : '') + new Date(start).getMinutes();

                             sec = ((new Date(start).getSeconds() < 10) ? '0' : '') + new Date(start).getSeconds();

                            start = year + '-' + month + '-' + day +' '+hours+':'+min+':'+sec;

                            year = new Date(end).getFullYear();
                             month = new Date(end).getMonth()+1;
                             month = ((month < 10) ? '0' : '') + month;

                             day = ((new Date(end).getDate() < 10) ? '0' : '') + new Date(end).getDate();

                             hours = ((new Date(end).getHours() < 10) ? '0' : '') + new Date(end).getHours();

                             min = ((new Date(end).getMinutes() < 10) ? '0' : '') + new Date(end).getMinutes();

                             sec = ((new Date(end).getSeconds() < 10) ? '0' : '') + new Date(end).getSeconds();

                            end = year + '-' + month + '-' + day +' '+hours+':'+min+':'+sec;
                            //alert(start+' - '+end);

                            $.get("system/classes/core.php?task=calendar&q=addnew&userid="+userid+"&title="+title+"&start="+start+"&end="+end+"&allDay="+allDay, function(data) {
                                alert(title + ' was created for '+ start +' '+ end);
                            });
                        }
                            calendar.fullCalendar('unselect');
                },

回答1:

You need to first create a form with a title and everything else you would like to submit. Then wrap it in a hidden div. Like so...(simple example)

<div class="popup" style="display:none; position:fixed; top:25%; left:25%; background-color:white;">
  <input class"title" type="text" size="26" />
  <a href="#" onclick="return false" class="submitFrom">submit</a>&emsp;
  <a href="#" onclick="return false" class="exit">cancel</a>
</div>

Every time a selection is made it will .show() that hidden div. Fill out the form and upon submission .click() of that form submit it will send the information and hide the div again.

select: function(start, end, allDay){
  $(".popup").show();
  var start = Date.parse(start) / 1000;
  var end = Date.parse(end) / 1000;
  var allDay = allDay;
  var wipit = // create a session id such as a random number that can be cleared later to prevent double submissio

  $(".submitForm").click(function(){
  var title = $(".title").val();

  if(title){
    $.post("/*page name*/", {title: title, start:start, end:end, allDay:allDay}, function(){
      $(".title").val("")
      title = "";
      wipit = "";
      start = '';
      end = '';
      allDay = '';
      calendar.fullCalendar('unselect');
      calendar.fullCalendar('refetchEvents');
    });
  } else {
    // clear all information, unselect events, and alert that a title needs to be entered
  }
  $(".popup").hide();
  });

  $(".exit").click(function(){
    // clear all info, unselect events and...
    $(".popup").hide();
  });
}

Again, this is very simple adn general and would have to be modified ato your specs as well as styled to your likings, but it should work. Let me know if this helps

来源：https://stackoverflow.com/questions/8827975/full-calendar-add-event-not-via-promot