eta_front/src/views/toolBox_manage/components/BaseCalendar.vue

<template>
    <div class="base-calendar-wrap">
        <FullCalendar class="full-calendar-wrap"
            ref="fullCalendar"
            :options="calendarOptions"
        >
            <template #eventContent="arg">
                <div class="popper-content"
                    :style="{fontWeight:arg.event.extendedProps.FontBold?'bold':'normal'}"
                >
                   {{arg.event.title||''}}
                </div>
            </template>
        </FullCalendar>
        <div class="water-mark" v-if="showMark">
            <p>{{ markText.date }}</p>
            <p>{{ markText.type }}</p>
        </div>
    </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
    components: {FullCalendar},
    props:{
        showMark:{
            type:Boolean,
            default:true
        },
        markText:{
            type:Object,
            default:()=>{
                return {
                    date:'当前日期',
                    type:'当前品种'
                }
            }
        },
        options:{
            type:Object,
            default:{}
        }
    },
    data() {
        return {
            calendarOptions:{
                height:'100%',
                locale: "zh-cn",
                plugins: [ dayGridPlugin, interactionPlugin ],
                initialView:'dayGridMonth',
                headerToolbar:false,//不显示头部信息
                weekNumberCalculation:'ISO',//从周一开始
                dayHeaderFormat:{ //https://fullcalendar.io/docs/v5/date-formatting
                    weekday:'narrow', //头部星期显示为一 二 三...
                },
                dayCellContent:function(arg){ //单元格日期显示为 1 2 3...
                    return arg.date.getDate()
                },
                fixedWeekCount:false,//是否固定6周
                eventOrder:'Sort', //指定事项排序字段
                /* dayMaxEventRows:6,//一天最多展示6条
                moreLinkClick:(info)=>{this.handleDateClick(info)},//点击more时触发 */
                events:[
                    /* {
                        id:1,
                        title:'我是默认事件', //事件名称
                        start:'2024-03-26',//日期,默认是全天事件
                        textColor:'#000',//字体颜色
                        backgroundColor:'#ffc0cb',//背景色
                        borderColor:'#ffc0cb',//边框色
                        //↑此外的属性会被FullCalendar插件放到extendedProps属性中
                        //extendedProps
                        isTextBold:true,//是否加粗
                    }, */
                ],
                dateClick:this.handleDateClick,
                eventClick:this.handleEventClick
            }
        };
    },
    methods: {
        handleDateClick(info){
            this.$emit("dateClick",info)
        },
        handleEventClick(info){
            this.$emit("eventClick",info)
        }
    },
};
</script>

<style lang="scss">
.base-calendar-wrap{
    .full-calendar-wrap{
        .fc-daygrid-day-top{ //日期偏左显示
            flex-direction: row;
        }
        .fc-daygrid-event{
            border-radius: 0;
            margin:0 !important;
        }
        .fc-scrollgrid{
            border:none;
            .fc-scrollgrid-section-header{
                th{
                    border:none !important;
                }
                .fc-col-header-cell{
                    text-align: left;
                    //font-weight: 500;
                }
            }
            .fc-scrollgrid-section-body{
                td{
                    border: none !important;
                    border-left:2px solid #002D78 !important;
                }
            }
        }
        .fc-more-popover{
            display:none !important;
        }
    }
}
</style>
<style scoped lang="scss">
.base-calendar-wrap{
    flex: 1;
    display: flex;
    flex-direction: column;
    position:relative;
    .full-calendar-wrap{
        flex:1;
        .popper-content{
            cursor: pointer;
        }
    }
    .water-mark{
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 64px;
        opacity: 0.3;
    }
}
</style>