Show-work-weeks title

[affablelochan]

Is your feature request related to a problem? Please describe. I am using "show-work-weeks" in the Qcalender. But work week is having the label or column title as "#". I would like to rename that to "work week"

Describe the solution you'd like Is there a way to rename the column header? If not i would like an option to rename column title of the work week.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

[danielwillms]

It is possible (at least using 4.0.0 beta 16) if using the slot head-workweek Though it has its limitations. The width is specified by the CSS-variable --calendar-work-week-width. You could increase it to like 40px, which would make "work week" fit in 2 rows, or around 80px, which would make it fit whole. Problem now is, that the day-columns have a fixed width (i guess calculated by the total width available) which breaks the layout and causes dates to overflow to the right.

[affablelochan]

Thanks @danielwillms for replying to this question.

I am using QCalender"4.0.0-beta.15". This means i should be able to use head-workweek

Here is how the qcalender-month is invoked in my code.

<div class="row justify-center">
      <div style="display: flex; max-width: 1100px; width: 100%;">
        <q-calendar-month
          ref="calendar"
          v-model="selectedDate"
          animated
          bordered
          focusable
          hoverable
          show-work-weeks
          no-active-date
          :day-min-height="60"
          :day-height="0"
          :locale="locale"
          @change="onChange"
          @moved="onMoved"
          @click-date="onClickDate"
          @click-day="onClickDay"
          @click-workweek="onClickWorkweek"
          @click-head-workweek="onClickHeadWorkweek"
          @click-head-day="onClickHeadDay"
        >

I tried doing following things but did not work. (i just used ww instead of work week)

head-workweek="ww" :head-workweek="ww" @head-workweek="ww" head-workweek='ww'

Can you please suggest how to write head-workweek in the qcalender-month above?

[danielwillms]

Hey @affablelochan ! You are trying to add it as a property, slots are used by using the <template> Tag inside the component tag like so:

<div class="row justify-center">
      <div style="display: flex; max-width: 1100px; width: 100%;">
        <q-calendar-month
          ref="calendar"
          v-model="selectedDate"
          animated
          bordered
          focusable
          hoverable
          show-work-weeks
          no-active-date
          :day-min-height="60"
          :day-height="0"
          :locale="locale"
          @change="onChange"
          @moved="onMoved"
          @click-date="onClickDate"
          @click-day="onClickDay"
          @click-workweek="onClickWorkweek"
          @click-head-workweek="onClickHeadWorkweek"
          @click-head-day="onClickHeadDay"
        >
           <template #head-workweek>
                 WW
           </template>
        </q-calendar-month>
      </div>
</div>

Hope this helps!

[affablelochan]

Great thanks for your suggestion. That worked!