2016-06-09 6 views
1

Ich versuche, den Cursor auf "No-Drop" für Tage vor dem aktuellen Tag und auf "Zeiger" für Tage nach dem aktuellen Tag.Set-Cursor-Stil funktioniert nicht gut

Ich versuchte mit css: fc-Vergangenheit, fc-heute, fc-Zukunft und funktioniert gut, auch ich versuchte aus jquery Plugin-Konfiguration und funktioniert auch gut.

Das funktioniert gut, wenn es keine Ereignisse gibt, das Problem erscheint, wenn ich ein Ereignis im Kalender habe. Fullcalendar erstellt eine Reihe von leeren für Tage ohne Ereignisse, die auf Zellen sind und der Cursor-Stil verloren ist. In fc-content-skeleton gibt es eine Tabelle mit z-index 4, diese div ist über fc-bg, die den Cursor css haben. Dieses fc-content-skeleton hat fc-event-container für jedes Event (ich kann das css setzen) aber in Tagen, die keine Events haben, lege ein leeres, das ich nicht stil setzen kann. Dies bewirkt, dass der Mauszeiger nicht in diesen Bereich gesetzt werden kann. Das Ergebnis ist, dass am selben Tag (ohne Ereignisse), wenn Sie den Cursor bewegen, ändert sich von meinem Stil (in fc-bg eingestellt) zu Standard wenn der Cursor wenn über einen leeren. Sie können dies in der Vitrine auf http://fullcalendar.io/ zu Hause sehen.

<div class="fc-content-skeleton"> 
    <table> 
     <thead> 
      <tr> 
       <td class="fc-day-number fc-sun fc-past" data-date="2016-05-08">8</td> 
       <td class="fc-day-number fc-mon fc-past" data-date="2016-05-09">9</td> 
       <td class="fc-day-number fc-tue fc-past" data-date="2016-05-10">10</td> 
       <td class="fc-day-number fc-wed fc-past" data-date="2016-05-11">11</td> 
       <td class="fc-day-number fc-thu fc-past" data-date="2016-05-12">12</td> 
       <td class="fc-day-number fc-fri fc-past" data-date="2016-05-13">13</td> 
       <td class="fc-day-number fc-sat fc-past" data-date="2016-05-14">14</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="fc-event-container" colspan="2"> 
        <a class="fc-day-grid-event fc-h-event fc-event fc-not-start fc-end fc-draggable fc-resizable"> 
         <div class="fc-content"> 
          <span class="fc-title">Long Event</span> 
         </div> 
         <div class="fc-resizer fc-end-resizer"/> 
        </a> 
       </td> 
       <!-- here comes the empty td for days that haven't have events --> 
       <td rowspan="6"/>    
       <td rowspan="6"/> 
      </tr> 
      ... 
      ... 
     </tbody> 
    </table> 
</div> 

Ich habe viel Zeit damit verbracht, den Cursor auf diese td zu setzen, aber ohne Ergebnisse. Dieses Verhalten macht mich verrückt. Danke für die Hilfe.

eine examble von JS Bin hinzufügen: http://jsbin.com/qekajezepu/1/edit?js,output

Antwort

0

Dies ist eine schwierige Sache ist. Das Problem besteht darin, dass die Vollkalender-Benutzeroberfläche so aufgebaut ist, dass die Tageszelle keine Einheit ist, sondern gleichgeordnete DIVs, die überlagerte Tabellen enthalten.

Das cell Objekt, das Sie den Cursor no-drop setzen, setzt es nur auf eine der Tabellen. Sie können es also nicht einmal mit dem Setzen einer Klasse austricksen und auf alle Kinder anwenden, denn sie sind keine Kinder, sie sind geschachtelte Geschwister.

So können Sie es austricksen, indem Sie eine Klasse auf die Zelle legen, wenn es gerendert wird und nach dem gesamten Kalender können Sie alle überlappenden Elemente (TDs in Ihrem Fall) suchen und sie auch auf cursor: 'no-drop' setzen.

Fügen Sie diese Klasse zu Ihrem CSS:

.cell-no-drop { 
    cursor: 'no-drop' 
} 

Und gesetzt dayRender und eventAfterAllRender in vollen Kalender zu sein:

dayRender: function(date, cell) { 
    var yesterday = moment(); 
    if (date <= yesterday) { 
     $(cell).css('background', '#F1F1FF'); 
     $(cell).addClass('cell-no-drop'); 

    }else{ 
     cell.css('cursor', 'pointer'); 
    }       
}, 
eventAfterAllRender: function(view, element){ 
    var dts = $("#calendar").find('td'); 

    $($(".cell-no-drop")).each(function(){ 
     var self = this; 
     $(dts).each(function(){  
      var pos = $(self).offset(); 
      var w = pos.left + $(self).width(); 
      var h = pos.top + $(self).height(); 

      if (pos.top <= $(this).offset().top && $(this).offset().top <= h && pos.left <= $(this).offset().left && $(this).offset().left <= w){ 
       $(this).css('cursor', 'no-drop'); 
      } 
     }); 
    }); 
}, 
+0

funktioniert super! Danke, dass ich auf diese Weise nicht wusste, um das Problem zu lösen. –

Verwandte Themen