title: How to make fixed header in full Calendar
body: <p>How can I make a fixed header in full Calendar.</p>
  
  <p>Please look at the fiddle, Sun, mon,Tue,Wed,Thur,Fri,Sat is my header.
  I want this sunday to saturday header has to be fixed. If I scroll vertically, the header should not hide.</p>
  
  <p><a href="http://jsfiddle.net/v98sb2a0/1/" rel="nofollow">jsfiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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');
   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()+'&lt;br&gt;Link to google: &lt;a href="http://google.com" target="_blank"&gt;Google&lt;/a&gt;');
   //p.html( "left: " + offset.left + ", top: " + offset.top );
    $('#cal-info').removeClass('hide');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"&gt;&lt;/script&gt;
  &lt;div style="border:solid 2px red;"&gt;
          &lt;div id='calendar'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tag hide" id="cal-info"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>