完整日曆視圖中的單日事件

我正在使用fullCalendar庫添加事件。默認視圖是month，我正在從database加載數據。此外，無論用戶選擇什麼都存儲在數據庫中。我在這裏有兩個問題。首先，當頁面加載時，庫在同一天爲同一個event添加兩行。其次，我想限制用戶在一天內添加single event。因此，沒有一天會有多個事件。我已經使用下面的代碼來加載數據，並且還有點擊事件。完整日曆視圖中的單日事件

$('#calendar').fullCalendar({ 

     header: { 
       left : 'prev,next', 
       center : 'title', 

         }, 

     defaultView: 'month', 
     defaultDate: today, 
     selectable: true, 
     navLinks: true, // can click day/week names to navigate views 
     selectHelper: true,/*Load all the events from the database on page load*/  
      events: { 

        //Don't have to make an ajax call because full calendar will make the call 
        //Error and success functions are available. 
        //On success we will populate the data which is the temp's Availability. 
        url: loadDataUrl, 

        error: function(error) { 
         console.log("error == "+JSON.stringify(error)); 
        }, 

        success: function(data){ 


         var title = 'Availability'; 
         var eventData; 

          for(var j=0;j<data.length;j++) 
          { 
           // $('#calendar').fullCalendar('removeEvent', data[j]._id); 



           var startDate = data[j].date; 
             if (title) { 
              eventData = { 

               title: title, 
               start: startDate 

              }; 
              $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
             } 
             $('#calendar').fullCalendar('unselect'); 
            } 


        } 
       }, select: function(start, end,jsEvent,view) { 


          var check = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD'); 
          var today = moment(new Date(), 'DD.MM.YYYY').format('YYYY-MM-DD'); 

          if(check < today) 
           { 
            // Previous Day. show message if you want otherwise do nothing. 
              // So it will be unselectable 
              alert("cant select previous dates!"); 
              $('#calendar').fullCalendar('unselect'); 
           } 
          else 
           { 
             var title = 'Availability'; 
             var eventData; 

             if (title) { 
              eventData = { 

               title: title, 
               start: start 

              }; 
              $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
              sendData(start); 


             } 
             $('#calendar').fullCalendar('unselect'); 

           }    
     }  });

請幫助我這個問題，因爲我不能夠弄清楚我要去的地方錯了。如果您檢查圖片，則會創建two rows。但我不知道這是怎麼回事。此外，只有當我嘗試加載動態數據時纔會發生這種情況。它適用於靜態數據。

這是的jsfiddle鏈接

http://jsfiddle.net/1fda25g1/10/

來源

2016-11-16 Rajeev

你可以在像jsfiddle這樣的在線代碼編輯器中顯示你的項目或你的項目的樣本嗎？ – kdyz

我無法在JSFiddle上發佈示例，因爲我正在調用ajax來從數據庫中獲取數據。它適用於靜態數據。只有當我試圖從數據庫中獲取數據時，纔會出現問題。 – Rajeev

讓你看到圖片。這是一個月視圖，用戶應該可以在每一天添加一個事件。另外，當頁面加載時，我使用renderEvent函數，該函數不會在一天中呈現單行。相反，它會在可用性下創建一行，這是我需要避免的。 – Rajeev

好吧，我終於得到了回答我的問題。我必須在ajax的成功函數中調用fullCalendar function。我在下面提到：

var eventArr = []; 
    var eventData1 ; 

    $.ajax({ 
     url: loadDataUrl, 
     datatype: 'json', 
     type: 'GET', 

     success: function(data) 
     { 
      eventArr = data; 
      eventData1 = eventArr; 

      console.log("event data == == "+eventData1); 


    //Full calendar library. 
    $('#calendar').fullCalendar({ 

       header: { 
         left : 'prev,next', 
         center : 'title', 

         }, 

       defaultView: 'month', 
       defaultDate: today, 
       selectable: true, 
       selectOverlap : false, 
       navLinks: true, // can click day/week names to navigate views 
       selectHelper: true, 
       events: eventData1, //This will load the events 

       select: function(start, end,jsEvent,view) { 
        console.log("View == = = ="+view); 
        var check = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD'); 
        var today = moment(new Date(), 'DD.MM.YYYY').format('YYYY-MM-DD'); 


        alert('Current view: ' + view.name); 
         if(check < today) 
          { 
             // Previous Day. show message if you want otherwise do nothing. 
             // So it will be unselectable 
             alert("cant select previous dates!"); 
             $('#calendar').fullCalendar('unselect'); 
          } 
          else { 


             var title = 'Availability'; 
             var eventData; 

             if (title) { 
              eventData = { 
               title: title, 
               start: start              
              }; 
              $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 


              sendData(start); 


             } 
             $('#calendar').fullCalendar('unselect'); 


          } 

     }, 
       eventClick: function(calEvent, jsEvent, view) { 
           /** 
           * calEvent is the event object, so you can access it's properties 
           */ 
           if(confirm("Are you sure you want to delete the event " + calEvent.title + " ?")) { 
            // deleteTempAvailability(calEvent.start._d,calEvent.end._d); 
            deleteTempAvailability(calEvent.start._d); 
            // delete in frontend 
            $('#calendar').fullCalendar('removeEvents', calEvent._id); 
           } 
         }, 

       editable: false, 
       eventLimit: true, // allow "more" link when too many events 
     }); 


       }, 

       failure: function(err) 
       { 
        alert("error == "+err); 

       } 
    });

並確保用戶每天只能添加一個事件。我所做的只是將selectOverlap設置爲false。

來源

2016-11-17 11:08:28 Rajeev

完整日曆視圖中的單日事件

回答

相關問題