<template>
<div style="position: relative">
<div class="color-box">
<div class="unplay-box">
<span></span>
<b>未开始</b>
</div>
<div class="warin-box">
<span></span>
<b>进行中</b>
</div>
<!-- <div class="gray-box">
<span></span>
<b>已取消</b>
</div>
<div class="success-box">
<span></span>
<b>已完成</b>
</div>-->
</div>
<FullCalendar ref="fullCalendar" class='demo-app-calendar' :options='calendarOptionsCheck'>
<template v-slot:eventContent='arg'>
<el-popover placement="top" :width="320" trigger="click" popper-class="popper-box" @show="changeState(arg.event)" @before-enter="hideModal()">
<template #reference>
<span
:class="[arg.event.extendedProps.status=='已取消' ? 'gray-box'
: (arg.event.extendedProps.status=='已完成' ? 'success-box'
: (arg.event.extendedProps.status=='未开始' ?'unplay-box'
:'') ),(arg.event.id == idx ? 'active' : '')]"
>
{
{ parseTime(arg.event.start,'{m}月{d}日') == parseTime(arg.event.end,'{m}月{d}日') ? parseTime(arg.event.start,'{h}:{i}') : parseTime(arg.event.start,'{m}月{d}日 {h}:{i}') }} -
{
{ parseTime(arg.event.end,'{m}月{d}日') == parseTime(arg.event.start,'{m}月{d}日') ? parseTime(arg.event.end,'{h}:{i}') : parseTime(arg.event.end,'{m}月{d}日 {h}:{i}')}}
&a
FullCalendar 日历查看已添加事件
于 2022-04-11 17:21:29 首次发布