vue-trb-calendar

Unstyled Calendar

Tailwind example

<div class="flex">
  <input
    class="p-1 m-1 border border-blue rounded w-1/2"
    type="number"
    v-model.number="month"
  />
  <input
    class="p-1 m-1 border border-blue rounded w-1/2"
    type="number"
    v-model.number="day"
  />
</div>
<trb-calendar class="pt-4" :month="month" :year="2001" gap="0.25rem">
  <template #date="{ dd,d,mm,m,dw }">
    <div
      class="p-1 rounded border-8 bg-white text-center"
      :class="{ 
        'bg-green-lighter': dw > 4, 
        'border-teal shadow-md': month == m && day == d,
        'text-blue-light': month != m
      }"
      @click="day = d ; month = m"
    >
      <strong>{{ dd }}</strong>
    </div>
  </template>
</trb-calendar>

import TrbCalendar from 'vue-trb-calendar'

// ? main.js
// Vue.component('trb-calendar', TrbCalendar)

export default {
  components: {
    TrbCalendar,
  },
  data: () => ({
    month: 5,
    day: 2,
  }),
}