So machen Sie festen Header in voller Kalender

Question

Wie kann ich eine feste Überschrift in vollem Kalender machen.

Bitte schauen Sie auf die Geige, So, Mo, Di, Mi, Do, Fr, Sa ist meine Kopfzeile. Ich möchte diesen Sonntag bis Samstag Header muss behoben werden. Wenn ich vertikal blättere, sollte die Kopfzeile nicht ausblenden.

jsfiddle

$(document).ready(function() { 
 

 
    var date = new Date(); 
 
    var d = date.getDate(); 
 
    var m = date.getMonth(); 
 
    var y = date.getFullYear(); 
 

 
    var events_array = [ 
 
     { 
 
     title: 'Test1', 
 
     start: new Date(2012, 8, 20), 
 
     tip: 'Personal tip 1'}, 
 
    { 
 
     title: 'Test2', 
 
     start: new Date(2012, 8, 21), 
 
     tip: 'Personal tip 2'} 
 
    ]; 
 

 
    $('#calendar').fullCalendar({ 
 
     header: { 
 
      left: 'prev,next today', 
 
      center: 'title', 
 
      right: 'month,agendaWeek,agendaDay' 
 
     }, 
 
     selectable: true, 
 
     events: events_array, 
 
     eventRender: function(event, element) { 
 
      element.attr('title', event.tip); 
 
     } 
 
    }); 
 
}); 
 

 
$(document).on('hover', '.fc-day-number', function(){ 
 
    $('#cal-info').addClass('hide'); 
 
\t var data = $(this).html(); 
 
    var offset = $(this).offset(); 
 
    $('#cal-info').css('left', offset.left); 
 
    $('#cal-info').css('top', (offset.top - 40)); 
 
    $('#cal-info').html('information about: '+$(this).html()+'<br>Link to google: <a href="http://google.com" target="_blank">Google</a>'); 
 
\t //p.html("left: " + offset.left + ", top: " + offset.top); 
 
    $('#cal-info').removeClass('hide'); 
 
});

.tag{ 
 
    background-color:#000; 
 
    color:#fff; 
 
    padding:3px; 
 
    max-height:60px; 
 
    overflow: visible; 
 
    position: fixed; 
 
    z-index:999; 
 
} 
 
.tag:after { 
 
    content: ""; 
 
    border-top: 16px solid red; 
 
    border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    position: absolute; 
 
    bottom: -16px; 
 
    left: calc(50% - 8px); 
 
}

<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script> 
 
<div style="border:solid 2px red;"> 
 
     <div id='calendar'></div> 
 
</div> 
 
<div class="tag hide" id="cal-info"> 
 

 
</div>

Answer 1

Fügen Sie diese in Ihrem Stil.

.calendar { 
    position:relative; 
} 

.fc-header { 
    position:fixed; 
} 

.fc-content { 
    padding-top:50px; 
} 

Answer 2

siehe hier: jsfiddle

Code:

var headerHeight = $(".fc-header").height() 


$(window).scroll(function(){ 
    if($(window).scrollTop() > headerHeight){ 
     $("thead").addClass("fixed") 

    }else{ 
     $("thead").removeClass("fixed") 
    } 
});  

CSS:

thead.fixed { position:fixed;width:100%;top:0;display:table;} 

eine JQ hinzugefügt, in dem Sie die Höhe des .fc-header berechnen und so, nur nachdem du über diese Höhe gerollt bist, Die thead wird behoben.

für die thead-fixed zu werden hinzugefügt ich eine Klasse fixed im JQ und dann in CSS gestylt, dass Klasse

lassen Sie mich wissen, ob es

hilft

EDIT: interessant downvote. hmm

Answer 3

Hallo hier ist aktualisierte Geige. überprüfen Sie am Ende CSS aktualisiert.

http://jsfiddle.net/v98sb2a0/3/

.fc-border-separate thead tr 
{ 
position: fixed; 
margin-bottom: 20px; 
width: 100%; 
} 
.fc-border-separate thead tr th 
{ 
    width:80px; 
} 
.fc-border-separate th.fc-last, .fc-border-separate td.fc-last 
{ 
    border-right-width: 0px; 
} 

Answer 4

Ich glaube, Sie für diese suchen -

jsfiddle

Sie müssen eine Klasse auf dem Kopf

.fc-border-separate thead.sticky{ 
    width: 100%; 
    position: fixed; 
    top:0px; 
    left:0px; 
    display:table; 
    background: #fff; 
} 

Und hinzufügen und entfernen auf hinzufügen Fenster scroll mit jquery

$(window).scroll(function() { 
    if ($(this).scrollTop() > 1){ 
     $('.fc-border-separate thead').addClass("sticky"); 
    } 
    else{ 
     $('.fc-border-separate thead').removeClass("sticky"); 
    } 
}); 

Ich hoffe, es wird Ihnen helfen.

Answer 5

.fc-widget-header { 
    position: sticky; 
    z-index: 100; 
    top: 0; 
    background-color: white; 
}