search

quasarframework / quasar-ui-qcalendar

QCalendar - Quasar App Extension, Vue CLI plug-in and UMD distributions available
https://quasarframework.github.io/quasar-ui-qcalendar
MIT License
421 stars 116 forks source link

Slots for Cells in Monthly view #401

Open carlosarmentac opened 1 year ago

carlosarmentac commented 1 year ago

Slots for Cells in Monthly view Actually im using fullcalendar, I hope to migrate to quasar-ui-qcalendar. My requests are so simple:

  1. Divide the day Cell in three sections, Title, Body and Footer and make Slots for each one.
  2. Permit to change Background Color of entire Cell using an All Day event.

This is what im trying to reproduce with :

MoneyCalendar

Thank you in advance!!!

Bruno17 commented 1 year ago

here is an example, how to use the day - slot: https://qcalendar.netlify.app/examples/month-slot-day

adding some buttons to the first line, is possible by using the day-of-year slot for example like that:

 <q-calendar-month 
  date-align="left"
  showDayOfYearLabel
  showMonthLabel="false"
  ......other options
  >
  <template #day-of-year="{ scope: { timestamp } }">
      <q-btn flat round padding="none" color="primary" icon="info" :to="'/events/day/' + timestamp.year + '/' + timestamp.month + '/' + timestamp.day"/>
  </template>

</q-calendar-month>