2016-11-18 126 views
0

我正在使用fullcalendar,並想知道是否有辦法讓某些日期無法點擊。我迄今爲止的功能將日曆上的所有「日方格」日期與我之前定義的最大日期進行比較。如果日期超出了最大日期,我會添加一個班級將其灰化。他們仍然可以點擊。隱藏他們與日曆的佈局螺絲,看起來很糟糕。被點擊的jQueryFullCalendar - 使日期不可點擊

  // Grey out the dates that go beyond the maximum availability date 
      var maxParsed = Date.parse(maxDate.toString()); 
      $("td[data-date]").each(function(){ 
       var date = $(this).data('date'); 
       var dateParsed = Date.parse(date); 
       if(!isNaN(dateParsed) && dateParsed > maxParsed){ 
        $(this).addClass('fc-other-month'); 
       } 
      }); 

回答

0

採取的幫助和return falseclick事件(我猜你分配它不同的類)上的日期,你不希望。所以他們不採取行動點擊...

1

與CSS只有你可以處理,我認爲。在你的CSS這樣做:

.fc-other-month { 
    pointer-events: none; 
    cursor: default; 
} 

CSS屬性指針事件允許作者在什麼情況下 (如果有的話)一個特定的圖形元素可以成爲鼠標事件的目標 控制。當此屬性未指定時,visiblePainted值的相同 特性適用於SVG內容。

你可以多瞭解一下這裏:https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

如果它不工作,也許是防止默認可以做的伎倆。

$('.fc-other-month').on('click', function(e) { 
    e.preventDefault(); 
    $(this).css({'pointer-events' : 'none'}); 
}); 

===編輯====

我看着文件,他們有eventClick。你可以在那個函數裏面檢查它是否是一個「好日子」,如果你不想被點擊就返回false。

$('#calendar').fullCalendar({ 
    eventClick: function(calEvent, jsEvent, view) { 

     if (1==1 || "this is a day without click feature") { //dummy code 
      return false; //prevent clickable function 
     } 

    } 
}); 

https://fullcalendar.io/docs/mouse/eventClick/

+0

這些沒有工作。我甚至嘗試從day square中刪除所有類(據我所知,他們只是控制顏色/位置等),並調用.unbind()來解除所有事件。仍可點擊。 – sdg91

+0

你確定嗎?我直接在demo(devtools)'pointer-events:none'上添加,並且數字停止點擊。我也強迫js添加該CSS。再試一次 –

+0

我確定。無論如何,我反正給了你一個投票。 – sdg91