Display header elsewhere - fullcalendar

Question

I would like to sperate fullcalendar body from the header. I want to show the header inside this div <div class="box-tools pull-right">
Can i do that?
Here is my code :
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">User Vacation</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body no-padding">
<div class="row">
<div class="col-md-8">
<div class="pad">
<!-- Map will be created here -->
<div id="world-map-markers">
<?php
Modal::begin([
'id' => "modifyEvent",
'size' => 'modal-lg'
]);
echo "<div id='modalContent'> </div>";
Modal::end();
?>
<div class='row'>
<?= \yii2fullcalendar\yii2fullcalendar::widget(array(
'events'=>$model->getVacationDays(),
'options' => [
'id' => 'DashBoardCalendar',
'class' => 'DashboardCalendarClass'
],
'header' => 'false',
'clientOptions' => [
'firstDay' => '1',
'selectable' => true,
'selectHelper' => true,
'editable' => true,
'dayRender' => new JsExpression("function(date, cell) {
$.get('index.php?r=user-vacation-special-days/get-date', { date: date.format('YYYY-MM-DD')}, function(data){
cell.addClass(data);
});
}"),
'select' => new JsExpression("function(start, end) {
// $('#newEventModal').find('#startDate').val(start.format('YYYY-MM-DD'));
// $('#newEventModal').find('#endDate').val(end.format('YYYY-MM-DD'));
//$('#newEventModal').find('#user').val('".Yii::$app->user->username ."');
$('#modifyEvent').modal('show').find('#modalContent').load('index.php?r=user-vacation-days/create-with-attributes&start='+start.format('YYYY-MM-DD')+'&end='+end.format('YYYY-MM-DD'));
// $('#newEventModal').modal('show');
}"),
'eventDrop' => new JsExpression("function(event, delta, revertFunc) {
$.get('index.php?r=user-vacation-days/update-partion', { id: event.id , start : event.start.format(), end : event.end.format()}, function(data){
});
}"),
'eventResize' => new JsExpression("function(event, delta, revertFunc) {
$.get('index.php?r=user-vacation-days/update-partion', { id: event.id , start : event.start.format(), end : event.end.format()}, function(data){
});
}"),
'eventClick' => new JsExpression("function(calEvent, jsEvent, view) {
$('#modifyEvent').modal('show').find('#modalContent').load('index.php?r=user-vacation-days/update&id='+calEvent.id);
}"),
'defaultDate' => date('Y-m-d') //"2015-04-01"
],
));?>
</div>
</div>
</div>
</div><!-- /.col -->
<div class="col-md-4 calendarBoxRight">
<div class="row">
<div class="col-md-11 bg-green">
<div class="description-block margin-bottom">
<div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
<h5 class="description-header">8390</h5>
<span class="description-text">Visits</span>
</div><!-- /.description-block -->
<div class="description-block margin-bottom">
<div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
<h5 class="description-header">8390</h5>
<span class="description-text">Visits</span>
</div><!-- /.description-block -->
<div class="description-block margin-bottom">
<div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
<h5 class="description-header">8390</h5>
<span class="description-text">Visits</span>
</div><!-- /.description-block -->
<div class="description-block margin-bottom">
<div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
<h5 class="description-header">8390</h5>
<span class="description-text">Visits</span>
</div><!-- /.description-block -->
</div>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.box-body -->
</div><!-- /.box -->