完整的日历不是通过promot添加事件

Question

想知道我怎么可以允许用户填写表格，而不是这似乎弹出promot框，当用户点击fullcalendar

这是一个黑色部分基本上是我迄今为止所做的。正如你所看到的，我已经将数据发送到一个正在工作的PHP页面，但是我只是对提示框感到不满意，反而希望它成为一个很好的表单，以便他们能够添加注释。

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'); 
       }, 

Answer 1

您需要先创建一个带有标题和其他所有要提交的表单。然后将其包装在一个隐藏的div中。像这样...（简单示例）

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

每次做出选择时都会显示.show（）表示隐藏的div。填写表格并提交.click（）表单提交它将发送信息并再次隐藏div。

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(); 
    }); 
} 

再次，这是非常简单的ADN一般会有ATO您的规格进行修改，以及风格的你的喜好，但它应该工作。让我知道这是否有帮助