Different color for date cell on month view using Vue Cal?

Question

I'm pretty new on Vue Cal VueJS 3. I need help on this.

I have these events data which have boolean condition. if true, display green color otherwise red color.

I refer to Vue Cal documentation, and right now I don't have idea how can I set different background color to date cell on month view calendar.

In inspect element, I can see that I need to adjust the class of .vuecal__cell--selected to achieve my goal . But I'm not sure how to add it inside <vue-cal><vue-cal> component.

This is what I achieve so far.

Component.vue

<template>
  <vue-cal
    class="vuecal--blue-theme"
    selected-date="2022-08-25"
    xsmall
    :disable-views="['years', 'year', 'week', 'day']"
    active-view="month"
    :events-on-month-views="true"
    :events="calendarEvents"
    hide-view-selector
    :time="false" 
    style="width: 300px; height: 262px"
  >
    <template #events-count="{ events }"> 
      <span :style="{ backgroundColor: '#00FF00' }" v-if="eventWorkingDay(events) === true"
        >1
        <span :style="{ backgroundColor: '#00FF00' }" v-if="eventIsAvailable(events) === true">1</span>
        <span :style="{ backgroundColor: '#FF0000' }" v-else>1</span>
      </span>
      <span :style="{ backgroundColor: '#FF0000' }" v-else>1</span>
    </template> 
  </vue-cal>
</template>

<script>
import vuecal from 'vue-cal';
import 'vue-cal/dist/vuecal.css';
import { defineComponent, ref } from 'vue'; 

export default defineComponent({
  name: 'Calendar',
  components: {
    'vue-cal': vuecal,
  }, 
  setup() { 

    const calendarEvents = ref([
      {
        id: '01',
        start: '2022-08-01',
        end: '2022-08-01',
        name: 'Event Name 01',
        isWorkingDay: false,
        isAvailable: false,
      },
      {
        id: '02',
        start: '2022-08-02',
        end: '2022-08-02',
        name: 'Event Name 02',
        isWorkingDay: false,
        isAvailable: false,
      },
      {
        id: '03',
        start: '2022-08-03',
        end: '2022-08-03',
        name: 'Event Name 03',
        isWorkingDay: false,
        isAvailable: false,
      }
    ]);

    const eventCount = (calendarEvents) => {
      for (let i = 0; i < calendarEvents.length; i++) {
        let cond = calendarEvents[i].isWorkingDay;

        if (cond === true) {
          return 0;
        } else {
          return 1;
        }
      }
    };

    const eventWorkingDay = (calendarEvents) => {
      for (let i = 0; i < calendarEvents.length; i++) {
        let cond = calendarEvents[i].isWorkingDay;

        if (cond === true) {
          return true;
        } else {
          return false;
        }
      }
    };

    const eventIsAvailable = (calendarEvents) => {
      for (let i = 0; i < calendarEvents.length; i++) {
        let cond = calendarEvents[i].isAvailable;

        if (cond === true) {
          return true;
        } else {
          return false;
        }
      }
    };

    return {
      inputs, 
      eventCount,
      eventWorkingDay,
      eventIsAvailable,
      calendarEvents,
    };
  },
});
</script>

<style scoped>
.vuecal__cell-events-count {
  background: transparent;
}
</style>

Current Output :

Expected Output : I want to fill date cell to background-color like this.

Appreciate if someone can help me on this. Thanks.

score 1 · Accepted Answer · answered Aug 29 '22 at 04:27

Change template events count into cell content. After that, you can control cell content color in setup function and pass it back into template

Component.vue

<template>
  <vue-cal
    class="vuecal--blue-theme"
    selected-date="2022-08-25"
    xsmall
    :disable-views="['years', 'year', 'week', 'day']"
    active-view="month"
    :events-on-month-views="true"
    :events="calendarEvents"
    hide-view-selector
    :time="false" 
    style="width: 300px; height: 262px"
  >
    <template #cell-content="{ cell, view }">
            <div class="vuecal__cell-date full-height column justify-center" :class="[view.id, getColorClass(cell)]" v-if="view.id === 'month'">
                {{ cell.content }}
            </div>
        </template> 
  </vue-cal>
</template>

<script>
import vuecal from 'vue-cal';
import 'vue-cal/dist/vuecal.css';
import { defineComponent, ref } from 'vue'; 

export default defineComponent({
  name: 'Calendar',
  components: {
    'vue-cal': vuecal,
  }, 
  setup() { 

    const calendarEvents = ref([
      {
        id: '01',
        start: '2022-08-01',
        end: '2022-08-01',
        name: 'Event Name 01',
        isWorkingDay: false,
        isAvailable: false,
      },
      {
        id: '02',
        start: '2022-08-02',
        end: '2022-08-02',
        name: 'Event Name 02',
        isWorkingDay: false,
        isAvailable: false,
      },
      {
        id: '03',
        start: '2022-08-03',
        end: '2022-08-03',
        name: 'Event Name 03',
        isWorkingDay: false,
        isAvailable: false,
      }
    ]);

    const eventCount = (calendarEvents) => {
      for (let i = 0; i < calendarEvents.length; i++) {
        let cond = calendarEvents[i].isWorkingDay;

        if (cond === true) {
          return 0;
        } else {
          return 1;
        }
      }
    };

    const eventWorkingDay = (calendarEvents) => {
      for (let i = 0; i < calendarEvents.length; i++) {
        let cond = calendarEvents[i].isWorkingDay;

        if (cond === true) {
          return true;
        } else {
          return false;
        }
      }
    };

    const eventIsAvailable = (calendarEvents) => {
      for (let i = 0; i < calendarEvents.length; i++) {
        let cond = calendarEvents[i].isAvailable;

        if (cond === true) {
          return true;
        } else {
          return false;
        }
      }
    };
    
    const getColorClass = (cell) => {
        if (!cell.outOfScope) {
            const res = props.calendarEvents;
            for (let i = 0; i < res.length; i++) {
                if (cell.formattedDate === res[i].start && res[i].isWorkingDay == true) {
                    if (cell.formattedDate === res[i].start && res[i].isAvailable == true) {
                        return 'bg-green-2';
                    } else {
                        return 'bg-red-2';
                    }
                } else if (cell.formattedDate === res[i].start && res[i].isWorkingDay == false) {
                    return 'bg-red-2';
                }

                if (cell.today) {
                    return 'bg-orange text-white';
                }
            }

            return 'bg-grey-3';
        }

        return '';
    };

    return {
      inputs, 
      eventCount,
      eventWorkingDay,
      eventIsAvailable,
      calendarEvents,
      getColorClass,
    };
  },
});
</script>

<style scoped>
</style>

score 0 · Answer 2 · answered Aug 25 '22 at 08:15

0

Usually, you need to find out the concerned class (as you did). Then, go to the closest component you have access to and use a deep selector to mutate it deep down. Sometimes, an !important may also be required of course.

Depending of your Vue version and if you're using SASS or not, you may need to write it like that

>>> .vuecal__cell--selected {
  background-color: green;
}

answered Aug 25 '22 at 08:15

kissu

40,416
14
65
133

Tq for the reply. I tried it (deep selector) but none of it working so far. – Rzj EM Aug 25 '22 at 08:26
@RzjEM this is the way to go if there is nothing in the documentation of the package specific to customizing styles. Do you have a [repro] or alike? Because it should work pretty well overall. – kissu Aug 25 '22 at 08:28
yea . I just found out the solution after few days trying . Thanks ! – Rzj EM Aug 26 '22 at 14:37
@RzjEM so, what was it? – kissu Aug 26 '22 at 15:03

Different color for date cell on month view using Vue Cal?

2 Answers2