Vue Calendar

Example 1

 
      <template>
  <VueCalendar
    :events="events"
    :ranges="ranges"
  />
</template>

<script>
import VueCalendar from '@glhrmoura/vue-calendar';

const DAY_MILLISECONDS = 86400000;

export default {
  components: {
    VueCalendar,
  },

  data: () => ({
    events: [
      {
        all: true,
        interval: { from: '05:00', to: '06:00' },
      },
      {
        date: new Date(),
        interval: { from: '06:00', to: '08:45' },
      },
    ],

    ranges: [
      {
        start: new Date(),
        end: new Date(Date.now() + (DAY_MILLISECONDS * 8)),
      },
    ],
  })
}
</script>
      

Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
June Sunday 29 05:00 - 06:00	June Monday 30 05:00 - 06:00	July Tuesday 1 05:00 - 06:00	July Wednesday 2 05:00 - 06:00	July Thursday 3 (Today) 05:00 - 06:00 06:00 - 08:45	July Friday 4 05:00 - 06:00	July Saturday 5 05:00 - 06:00
July Sunday 6 05:00 - 06:00	July Monday 7 05:00 - 06:00	July Tuesday 8 05:00 - 06:00	July Wednesday 9 05:00 - 06:00	July Thursday 10 05:00 - 06:00	July Friday 11 05:00 - 06:00	July Saturday 12 05:00 - 06:00
July Sunday 13 05:00 - 06:00	July Monday 14 05:00 - 06:00	July Tuesday 15 05:00 - 06:00	July Wednesday 16 05:00 - 06:00	July Thursday 17 05:00 - 06:00	July Friday 18 05:00 - 06:00	July Saturday 19 05:00 - 06:00
July Sunday 20 05:00 - 06:00	July Monday 21 05:00 - 06:00	July Tuesday 22 05:00 - 06:00	July Wednesday 23 05:00 - 06:00	July Thursday 24 05:00 - 06:00	July Friday 25 05:00 - 06:00	July Saturday 26 05:00 - 06:00
July Sunday 27 05:00 - 06:00	July Monday 28 05:00 - 06:00	July Tuesday 29 05:00 - 06:00	July Wednesday 30 05:00 - 06:00	July Thursday 31 05:00 - 06:00	August Friday 1 05:00 - 06:00	August Saturday 2 05:00 - 06:00

Example 2

 
      <template>
  <VueCalendar
    :events="events"
    :ranges="ranges"
  />
</template>

<script>
import VueCalendar from '@glhrmoura/vue-calendar';

const DAY_MILLISECONDS = 86400000;

export default {
  components: {
    VueCalendar,
  },

  data: () => ({
    events: [
      {
        wday: ['monday', 'wednesday', 'thursday', 'friday'],
        interval: { from: '09:00', to: '11:00' },
      },
      {
        wday: 'thursday',
        interval: { from: '11:00', to: '12:00' },
      },
    ],

    ranges: [
      {
        start: new Date(Date.now() + (DAY_MILLISECONDS * 40)),
        end: new Date(Date.now() + (DAY_MILLISECONDS * 51)),
      },
      {
        start: new Date(Date.now() + (DAY_MILLISECONDS * 75)),
      },
    ],
  })
}
</script>
      

Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
June Sunday 29	June Monday 30 09:00 - 11:00	July Tuesday 1	July Wednesday 2 09:00 - 11:00	July Thursday 3 (Today) 09:00 - 11:00 11:00 - 12:00	July Friday 4 09:00 - 11:00	July Saturday 5
July Sunday 6	July Monday 7 09:00 - 11:00	July Tuesday 8	July Wednesday 9 09:00 - 11:00	July Thursday 10 09:00 - 11:00 11:00 - 12:00	July Friday 11 09:00 - 11:00	July Saturday 12
July Sunday 13	July Monday 14 09:00 - 11:00	July Tuesday 15	July Wednesday 16 09:00 - 11:00	July Thursday 17 09:00 - 11:00 11:00 - 12:00	July Friday 18 09:00 - 11:00	July Saturday 19
July Sunday 20	July Monday 21 09:00 - 11:00	July Tuesday 22	July Wednesday 23 09:00 - 11:00	July Thursday 24 09:00 - 11:00 11:00 - 12:00	July Friday 25 09:00 - 11:00	July Saturday 26
July Sunday 27	July Monday 28 09:00 - 11:00	July Tuesday 29	July Wednesday 30 09:00 - 11:00	July Thursday 31 09:00 - 11:00 11:00 - 12:00	August Friday 1 09:00 - 11:00	August Saturday 2

Example 3

 
      <template>
  <VueCalendar :events="events" />
</template>

<script>
import VueCalendar from '@glhrmoura/vue-calendar';

export default {
  components: {
    VueCalendar,
  },

  data: () => ({
    events: [
      {
        wday: 'thursday',
        interval: { from: '14:00', to: '17:00' },
      },
      {
        wday: 'monday',
        interval: { from: '18:00', to: '19:00' },
      },
    ],
  }),
};
</script>
      

Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
June Sunday 29	June Monday 30 18:00 - 19:00	July Tuesday 1	July Wednesday 2	July Thursday 3 (Today) 14:00 - 17:00	July Friday 4	July Saturday 5
July Sunday 6	July Monday 7 18:00 - 19:00	July Tuesday 8	July Wednesday 9	July Thursday 10 14:00 - 17:00	July Friday 11	July Saturday 12
July Sunday 13	July Monday 14 18:00 - 19:00	July Tuesday 15	July Wednesday 16	July Thursday 17 14:00 - 17:00	July Friday 18	July Saturday 19
July Sunday 20	July Monday 21 18:00 - 19:00	July Tuesday 22	July Wednesday 23	July Thursday 24 14:00 - 17:00	July Friday 25	July Saturday 26
July Sunday 27	July Monday 28 18:00 - 19:00	July Tuesday 29	July Wednesday 30	July Thursday 31 14:00 - 17:00	August Friday 1	August Saturday 2