TaskSystem-admin/src/views/task/calendar.vue

<template>
  <div id="example-simple">
    <calendar-view
      :show-date="showDate"
      class="holiday-us-traditional holiday-us-official holiday-ue theme-gcal"
      :enable-drag-drop="false"
      :item-top="themeOptions.top"
      :item-content-height="themeOptions.height"
      :item-border-height="themeOptions.border"
      @click-item="clickItems"
      :items="taskList"
      :current-period-label="'今日'"
    >
      <template #header="{ headerProps }">
        <calendar-view-header
          :header-props="headerProps"
          :previous-year-label="themeOptions.previousYearLabel"
          :previous-period-label="themeOptions.previousPeriodLabel"
          :next-period-label="themeOptions.nextPeriodLabel"
          :next-year-label="themeOptions.nextYearLabel"
          @input="setShowDate"
        />
      </template>
    </calendar-view>
  </div>
</template>
  
<script lang="ts" setup name="task">
// 日历组件
import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";

const showDate = ref(new Date());
const setShowDate = (d) => {
  showDate.value = d;
  emits("initShowDate", d);
};

const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const taskList = ref([]);
onUpdated(() => {
  taskList.value = [];
  props.list.forEach((item) => {
    taskList.value.push({
      id: item.id,
      title: item.template_name,
      startDate: new Date(item.start_time),
      endDate: new Date(item.end_time),
    });
  });
});

const emits = defineEmits(["clickItem", "initShowDate"]);

const clickItems = (e) => {
  emits("clickItem", e.id);
};

const themeOptions = computed((): any => {
  return {
    top: "2.6em",
    height: "2.1em",
    border: "0px",
    previousYearLabel: "<<",
    previousPeriodLabel: "<",
    nextPeriodLabel: ">",
    nextYearLabel: ">>",
    currentPeriodLabel: "今天",
  };
});
</script>
  
  <style lang="scss">
@import "../../../node_modules/vue-simple-calendar/dist/style.css";
@import "../../../node_modules/vue-simple-calendar/dist/css/default.css";
@import "../../../node_modules/vue-simple-calendar/dist/css/holidays-us.css";
/* @import "../../../node_modules/vue-simple-calendar/dist/css/holidays-ue.css"; */
@import "../../../node_modules/vue-simple-calendar/dist/css/gcal.css";

#example-simple {
  font-family: Avenir, Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  height: 85vh !important;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

.theme-gcal .cv-day.today .cv-day-number {
  background-color: #4a5dff;
}

#example-simple .cv-item {
  /* background-color: #f56c6c; */
  background-color: rgba($color: #4a5dff, $alpha: 0.8) !important;
  color: #fff;
}

#example-simple .cv-item.custom-date-class-red {
  background-color: #f66;
  color: #fff;
}
.cv-wrapper.holiday-us-traditional .d05-05 .cv-day-number::before {
  content: "" !important;
}

.theme-gcal .periodLabel {
  font-size: 16px !important;
}
.theme-gcal .cv-header button.previousYear,
.theme-gcal .cv-header button.previousPeriod,
.theme-gcal .cv-header button.nextPeriod,
.theme-gcal .cv-header button.nextYear {
  width: 2em;
}
</style>