给日历每月里面的日期添加背景不同颜色

//引用的日历组件  v-slot:dateCell="data"  data是每个月份里面的日期
  <Calendar v-model="calendarDate">

           <template v-slot:dateCell="data">

      <div style="width: 40px;height: 43px;text-align: center;line-height: 43px;" :style="getCellStyle(sgasj(data.date))">{{ wdufge(data.date) }}</div>

    </template>

        </Calendar>

判断条件
  statusData: [

        { date: '2023-11-01', status: '已做', colos: '#8EC736' },

        { date: '2023-11-02', status: '已做', colos: '#8EC736' },

        { date: '2023-11-03', status: '已做', colos: '#8EC736' },

        { date: '2023-11-04', status: '已做', colos: '#8EC736' },

        { date: '2023-11-05', status: '', colos: '' },

        { date: '2023-11-06', status: '已做', colos: '#8EC736' },

        { date: '2023-11-07', status: '已做', colos: '#8EC736' },

        { date: '2023-11-08', status: '已做', colos: '#8EC736' },

        { date: '2023-11-09', status: '已做', colos: '#8EC736' },

        { date: '2023-11-10', status: '已做', colos: '#8EC736' },

        { date: '2023-11-11', status: '已做', colos: '#8EC736' },

        { date: '2023-11-12', status: '', colos: '' },

        { date: '2023-11-13', status: '已做', colos: '#8EC736' },

        { date: '2023-11-14', status: '已做', colos: '#8EC736' },

        { date: '2023-11-15', status: '已做', colos: '#8EC736' },

        { date: '2023-11-16', status: '已做', colos: '#8EC736' },

        { date: '2023-11-17', status: '已做', colos: '#8EC736' },

        { date: '2023-11-18', status: '已做', colos: '#8EC736' },

        { date: '2023-11-19', status: '', colos: '' },

        { date: '2023-11-20', status: '已做', colos: '#8EC736' },

        { date: '2023-11-21', status: '已做', colos: '#8EC736' },

        { date: '2023-11-22', status: '已做', colos: '#8EC736' },

        { date: '2023-11-23', status: '已做', colos: '#8EC736' },

        { date: '2023-11-24', status: '已做', colos: '#8EC736' },

        { date: '2023-11-25', status: '已做', colos: '#8EC736' },

        { date: '2023-11-26', status: '', colos: '' },

        { date: '2023-11-27', status: '已做', colos: '#8EC736' },

        { date: '2023-11-28', status: '已做', colos: '#8EC736' }

      ],

日期转换方法
sgasj(i){

    const date = new Date(i);

const year = date.getFullYear();

const month = (date.getMonth() + 1).toString().padStart(2, '0');

const day = date.getDate().toString().padStart(2, '0');

const formattedDate = `${year}-${month}-${day}`;  

return formattedDate

    },

日期转换  只保留每天
 wdufge(i){

     const dateString = i;

const date = new Date(dateString);

const day = date.getDate();

return day;

    },

根据判断方法改变日期背景颜色
 getCellStyle(date) {

      // 在这个方法中根据日期和接口返回的参数逻辑判断，并返回对应状态的背景颜色

      const matchedStatus = this.statusData.find(item => item.date === date);

      if (matchedStatus) {

        return {

          backgroundColor: matchedStatus.colos

        };

      }

      return {};

    },