Alternative header layouts

[EdnaldoNeimeg]

First of all, sorry for my bad english.

I'm working in a scheduler app and I think that the default header layout is not optimized for good space usage.

I've made some changes that allow me to choose the header layout: (Here i'm using the default test page)

Default header (not changed)

Default header with title

<vue-cal
    v-model:selectedDate="selectedDate"
    class="ml2 mr1 vuecal--blue-theme"
    xsmall
    :events="events"
    editable-events
    cell-contextmenu
    today-button
    :time-from="7 * 60"
    :time-to="20 * 60"
    :special-hours="specialHours"
    :hide-view-selector="false"
    :cell-contextmenu="log"
  >
    <template #name>VueCal Test View</template>
  </vue-cal>

Defaultt header - reordered

<vue-cal
    ...
    :header-options="{
      order: ['title-bar','menu','name'],
    }"
  >
    <template #name>VueCal Test View</template>
  </vue-cal>

Alternative header - title at center

<vue-cal
    ...
    :header-options="{
      type:'row',
      order: ['title-bar','name', 'menu'],
    }"
  >
    <template #name>VueCal Test View</template>
  </vue-cal>

Alternative header - title at left

<vue-cal
    ...
    :header-options="{
      type:'row',
      order: ['name', 'title-bar', 'menu'],
    }"
  >
    <template #name>VueCal Test View</template>
  </vue-cal>

Alternative header responsivity

When the width is equal or below 1024px, the alternative header will change its layout to default header in order not to break its responsivity. (If you set the order of elements, the order will remain the same you set)

I'm using these changes in my personal project:

Please guys let me know what you think about these changes. If it's welcome, I can submit an PR.

[EdnaldoNeimeg]

@antoniandre