完整的日曆不是通過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您的規格進行修改，以及風格的你的喜好，但它應該工作。讓我知道這是否有幫助