149 lines
3.7 KiB
Vue
149 lines
3.7 KiB
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"
|
|
@click-date="clickDate"
|
|
: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 = computed(() => {
|
|
let arr: any = [];
|
|
props.list.forEach((item: any) => {
|
|
arr.push({
|
|
id: item.id,
|
|
title: item.template_name,
|
|
startDate: new Date(item.start_time),
|
|
endDate: new Date(item.end_time),
|
|
});
|
|
});
|
|
return arr;
|
|
});
|
|
|
|
const emits = defineEmits(["clickItem", "initShowDate"]);
|
|
|
|
const clickItems = (e) => {
|
|
emits("clickItem", e.id);
|
|
};
|
|
|
|
const clickDate = (e) => {
|
|
console.log(e);
|
|
};
|
|
|
|
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;
|
|
cursor: pointer;
|
|
}
|
|
/* #example-simple .cv-day {
|
|
&:hover {
|
|
background-color: rgba($color: #000000, $alpha: 0.1);
|
|
}
|
|
} */
|
|
|
|
#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;
|
|
border: 1px solid #ccc;
|
|
text-align: center !important;
|
|
margin-left: 10px;
|
|
border-radius: 5px;
|
|
padding-right: 0 !important;
|
|
font-size: 1.8em;
|
|
}
|
|
.theme-gcal .cv-header button.previousYear,
|
|
.theme-gcal .cv-header button.previousPeriod,
|
|
.theme-gcal .cv-header button.nextPeriod,
|
|
.theme-gcal .cv-header button.nextYear {
|
|
letter-spacing: 0;
|
|
}
|
|
</style>
|
|
|