From http://www.gistboxapp.com/clipper-tutorial/

calendar.html

@extends ('layouts.master')

@section ('head.title')
  {{trans('messages.list_group')}}
@stop

@section ('head.css')
  <link href="plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
@stop
@section('body.content')

<div class="content-wrapper">
<section class="content-header">
  <h1>
    {{trans('messages.group_management')}}
  </h1>
  <ol class="breadcrumb">
    <li><a href="{{ route('index') }}"><i class="fa fa-dashboard"></i> {{trans('messages.dashboard')}}</a></li>
    <li><a href="{{ route('groups.index') }}">{{trans('messages.group')}}</a></li>
    <li class="active">{{trans('messages.list_group')}}</li>
  </ol>
</section>

<section class="content">
      <div class="row">
            <div class="col-xs-12">
              <div class="box box-primary">
                <div class="box-header">
                  <h3 class="box-title">{{trans('messages.list_group')}}</h3>
                </div>
                <div class="box-body">
                  <div class="inner-box-body">
                      <div class="row">
                        <div class="filter-fullname col-md-2">
                          <label>Search name:</label>
                          <input id="search-name"/>  
                        </div>
                      </div>
                      <div id="calendar">
                        <div id="datafullname" style="display:none"></div>
                        <div class="sidebar-calendar">
                          <table>
                            <thead>
                              <tr><th><div class="nameitem">Fullname</div></th></tr>
                            </thead>
                            <tbody>
                                <tr class="itemblank">
                                  <td><div class="nameitem"></div></td>
                                </tr>
                              @foreach($employees as $key => $value)
                                <tr>
                                  <!-- <td><div class="nameitem">{{ $value->id }}</div></td> -->
                                  <td><div class="nameitem">{{ $value->lastname }} {{ $value->firstname }}</div></td>
                                </tr>
                              @endforeach
                            </tbody>
                          </table>
                        </div>
                        <div class="content-calendar">
                          <div id="datacalendar" style="display:none"></div>
                          <table>
                            <thead>
                              <tr>
                                
                                  <?php
                                    for ($i=1;$i<=31;$i++) 
                                    {
                                      echo "<th><div class='item'>Day ".$i."</div></th>";
                                    }
                                  ?>
                                
                              </tr>
                            </thead>
                            <tbody>
                                <tr class="itemblank">
                                  <td><div class="item"></div></td>
                                </tr>
                              <?php 
                                foreach($employees as $key => $value) 
                                {
                                  $calendar = $value->calendar;
                              ?>
                                  <tr>
                                    <?php
                                    for ($i=1;$i<=31;$i++) 
                                    {
                                    ?>
                                      <td><div class="item"><?php echo $calendar->{'n'.$i};?></div></td>
                                    <?php
                                    }  
                                    ?>
                                  </tr>
                              <?php
                                }
                              ?>     
                             
                            </tbody>
                          </table>
                        </div>
                      </div>
                  </div>
                </div><!-- /.box-body -->
              </div>
            </div>
          </div>
</section>
</div>


<style type="text/css">
  #calendar{
    display: block;
    width : 100%;
    height: 390px;
    position: relative;
  }
  #calendar .sidebar-calendar{
    display: block;
    width: 175px;
    height: 390px;
    position: absolute;
    left : 0px;
    top : 0px;
    overflow: scroll;
  }
  #calendar .content-calendar{
    display: block;
    height: 390px;
    position: absolute;
    left : 176px;
    top : 0px;
    overflow: scroll;
  }
  .nameitem{
    display: block;
    height: 40px;
    min-width: 170px;
    border : 1px solid #c3c7c9;
  }
  .item{
    display: block;
    height: 40px;
    width: 40px;
    border : 1px solid #c3c7c9;
  }
/*  #calendar .content-calendar table{
    position: relative;
  }*/
  .content-calendar thead,.sidebar-calendar thead{
/*    position: fixed;
    top : 0px;*/
     position: absolute;
     background-color : #086ca5;
     color : white;
    /*  top: 0px;*/
  }
</style>

<script type="text/javascript">
    $(document).ready(function(){
      var width_content = $('#calendar').width()-175;
      $('.content-calendar').css('width',width_content);

      $( '.content-calendar' ).scroll(function(e) {
        $('.sidebar-calendar').scrollTop($(this).scrollTop());
        $('.content-calendar thead')
              .animate({"marginTop": $(this).scrollTop() + "px"},0);
        $('.sidebar-calendar thead')
              .animate({"marginTop": $(this).scrollTop() + "px"},0);      
      });

      $( '.sidebar-calendar' ).scroll(function(e) {
        $('.content-calendar').scrollTop($(this).scrollTop());
        $('.sidebar-calendar thead')
              .animate({"marginTop": $(this).scrollTop() + "px"},0);
        $('.content-calendar thead')
              .animate({"marginTop": $(this).scrollTop() + "px"},0);
      });

      $('.content-calendar').on('dblclick','.item',function(){
         var val = $(this).text();
         $(this).attr('class', 'item1');
         $(this).html('<input type="text" value="'+val+'" style="z-index:10000;"/>');
         $(this).children('input').focus();
         $(this).focusout(function() {
             console.log('focusout');
             $(this).html($(this).children('input').val());
             $(this).unbind( "focusout" );
             $(this).attr('class', 'item');
          });
      });

      $('#search-name').keyup(function(){
          var textsearch = $(this).val();
          var htmlbuild = '';
          var indexsearchs = [];
          $('#datafullname tr').each(function(key,value){
              var text = $(value).find('.nameitem').text();
              console.log(text.toLowerCase()+"|"+textsearch.toLowerCase());
              if (text.toLowerCase().indexOf(textsearch.toLowerCase()) >= 0)
              {
                 indexsearchs.push(key);    
                 htmlbuild += $("<div />").append($(this).clone()).html();  
              }
          });
          $('.sidebar-calendar table tbody').empty();
          $('.sidebar-calendar table tbody').append(htmlbuild);

          var htmlcalendar_build = '';
          $('#datacalendar tr').each(function(key,value){
              console.log(key);
                if(indexsearchs.indexOf(key)>=0)
                {
                  //console.log($(value).parent().clone().html());
                  htmlcalendar_build += $("<div />").append($(value).clone()).html();  
                }
          });
          $('.content-calendar table tbody').empty();
          $('.content-calendar table tbody').append(htmlcalendar_build);
      });

      $('#datafullname').append($('.sidebar-calendar table tbody').html());
      $('#datacalendar').append($('.content-calendar table tbody').html());
    });

</script>
@stop