Multi-days event on Week View

[KalaTheMother]

Hi,

To avoid to flood QCalendar Discussions, I ask my question here :

I'm stucked about Multi-days event on week view however i used day slot :

     <template #day-header="{ timestamp }">
        <div class="row justify-center">
          <template v-for="(event, index) in eventsMap[timestamp.date]">
            <q-badge
              v-if="(!event.time && event.displayed)"
              :key="index"
              style="width: 100%; cursor: pointer;"
              :class="badgeClasses(event, 'header')"
              :style="badgeStyles(event, 'header')"
            >
              <q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon><span class="ellipsis">{{ event.title }}</span>
            </q-badge>
            <q-badge
              v-else
              :key="index"
              class="q-ma-xs"
              :class="badgeClasses(event, 'header')"
              :style="badgeStyles(event, 'header')"
              style="width: 10px; max-width: 10px; height: 10px; max-height: 10px"
            />
          </template>
        </div>
      </template>
   <template #day-body="{ timestamp, timeStartPos, timeDurationHeight }" >
        <template v-for="(event, index) in getEvents(timestamp.date)">
            <q-badge
            v-if="(event.time && event.displayed)"
            :key="index"
            @click.stop.prevent="showEvent(event)"
            :draggable="true"
            @dragstart="(e) => onDragStart(e, event)"
            @dragend="(e) => onDragEnd(e, event)"
            @dragenter="(e) => onDragEnter(e, event)"
            @touchmove="(e) => {}"
            class="my-event justify-center ellipsis"
            :class="badgeClasses(event, 'body')"
            :style="badgeStyles(event, 'body', timeStartPos, timeDurationHeight)"
              >
          </q-badge>
        </template>
      </template>
    </q-calendar>

badgeStyles CSS class :

badgeStyles (event, type, timeStartPos, timeDurationHeight) {
const s = {}
if (this.isCssColor(event.bgcolor)) {
s['background-color'] = event.bgcolor
s.color = luminosity(event.bgcolor) > 0.5 ? 'black' : 'white'
}
if (timeStartPos) {
s.top = timeStartPos(event.time) + 'px'
}
if (timeDurationHeight) {
s.height = timeDurationHeight(event.duration) + 'px'
}
s['align-items'] = 'flex-start'
}

Am I totally silly ? Because I don't figure out how to put this part : s.height = timeDurationHeight(event.duration) + 'px' on two days.

Thanks for your help.

[hawkeye64]

@KalaTheMother Can you make a codepen so I can help you better?

[KalaTheMother]

Thanks for the codepen link, it still not rendering like mine.
I hope the codepen issue is temporary

[KalaTheMother]

Still not rendering... But codepen support told me to Fork an existant project to test. And it's working, the rendering is OK : https://codepen.io/KalaTM/pen/LYxdpoX

In the meantime, I read your answer here : [quasarframework/quasar-ui-qcalendar] Beginner Question: How to add events?! (#247) and I think where i'm wrong.... Given that the Slot day is drawn, if my event was at 10pm and this duration was 4 hours, it does not go to drawn automatically the next day / slot.

Should I cut my event in two events : One for the start date event and another for the next day (night shift use case) ? Or I missed the point completely ?

P.S. : Through the ML, I saw all your answers this week-end and I am impressed for your commitment ! I think it deserved to be underlined.

Thanks a lot

[hawkeye64]

P.S. : Through the ML, I saw all your answers this week-end and I am impressed for your commitment ! I think it deserved to be underlined.

Thanks, I appreciate that. Yes, if you are using the week slot, which is very advanced, then you need to create as many events as overlapped weeks (for the same event). Not only that, but you have to create a pseudo-event, which is not visible, that pushes your event to the correct position. Multiple events on the same virtual row, is a bit more difficult. But the last event, should create a pseudo-event that pushes to the end of the week (unless you have an event on the last day), so a new row is created for the same week.

[hawkeye64]

Just looked at your codepen. That's using the day slot. Which one do you want to use? day or week? Week is the one to use for multi-day events, but much, much harder for people to understand how to make it work.

[KalaTheMother]

I think the difference between week and day slot into the week view is the missed point... I checked in the point this morning and you're right, the week slot is a "little bit" harder ^^. I try to cut my event in two parts with same ID before attack week slot. I think it will be work like that :)