<!-- Content Wrapper. Contains page content -->
<div class="row">
  <!-- Content Header (Page header) -->
  

  <!-- Main content -->
  <section class="content"style="width:800px; height:800px; margin-right:auto; margin-left: auto;">
    <div class="row">
     <div class="col-md-12">
      <div class="box box-solid">
        <div class="box-header with-border">
          <h4 class="box-title">Clé des couleurs</h4>
        </div>
        <div class="box-body">
          <!-- the events -->
          <div id="external-events">
            <div class="row">
               <?php foreach($planning as $plan){ ?>
              <a class="invokecalendar col-md-2 btn btn-info" data-id="<?php echo $plan["id"]; ?>"><?php echo $plan["libelle"]; ?></a>
            <?php } ?>
            </div>
           
            
          </div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /. box -->
      
    </div>
    <!-- /.col -->
    <div class="col-md-12">
      <div class="box box-primary">
        <div class="box-body no-padding">
          <!-- THE CALENDAR -->
          <div id="calendar"></div>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /. box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->

<div class="row">
  <div class="col-md-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">
          
        </h3>
      </div>
    </div>
  </div>
</div>