thoth-frontend-test/src/views/workbench/person/components/myFullCalendar.vue

<template>
  <div :style="type+'-calendar-container'">
    <div :class="type+ '-calendar-header'">
      <article class="calender-top">
        <div class="calender-top-control">
          <el-button-group>
            <el-button icon="el-icon-arrow-left" size="small" @click="callCalendarApi('prev')" />
            <el-button icon="el-icon-arrow-right" size="small" @click="callCalendarApi('next')" />
          </el-button-group>
          <el-button-group v-if="weekMonYear">
            <el-button type="primary" size="small" @click="callCalendarApi('changeView','dayGridMonth')">月</el-button>
            <el-button type="primary" size="small" @click="callCalendarApi('changeView','timeGridWeek')">周</el-button>
            <el-button type="primary" size="small" @click="callCalendarApi('changeView','timeGridDay')">日</el-button>
          </el-button-group>
          <el-button-group>
            <el-button type="primary" size="small" :class="todayClassName" @click="callCalendarApi('today')">今天</el-button>
          </el-button-group>
        </div>
        <div class="calender-top-title">{{ calendarTitle }}</div>
        <slot />
      </article>
    </div>
    <FullCalendar
      v-show="activeName === '1'"
      :id="type + '-calendar'"
      ref="fullCalendar"
      height="auto"
      :class="type + '-calendar'"
      default-view="dayGridMonth"
      theme-system="bootstrap"
      :header="false"
      :event-time-format="evnetTime"
      :custom-buttons="customButtons"
      :button-text="buttonText"
      locale="zh-cn"
      editable="false"
      droppable="false"
      selectable="true"
      event-color="rgba(64,157,254,0.6)"
      :display-event-time="false"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="events"
      @select="select"
      @dateClick="dateClick"
      @eventClick="eventClick"
      @eventDrop="eventDrop"
      @datesRender="datesRender"
    />
    <!-- <calendar-dialog
      :title="calendarDialogProperty.title"
      :visible="calendarDialogProperty.visible"
      :data="calendarDialogProperty.data"
      @cancel="calendarDialogProperty.visible = false"
      @confirm="calendarDialogProperty.visible = false"
    />
    <delete-dialog
      :content="'是否删除当前日程'"
      :visible="deleteDialogVisible"
      @cancel="deleteDialogVisible = false"
      @confirm="deleteDialogVisible= false"
    /> -->
  </div>
</template>

<script>
// import moment from 'moment'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import bootstrapPlugin from '@fullcalendar/bootstrap'
import listPlugin from '@fullcalendar/list'
import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css'
import '@fullcalendar/timegrid/main.css'
import '@fullcalendar/bootstrap/main.css'
import '@fullcalendar/list/main.css'
// import CalendarDialog from './calendarFormDialog'
// import DeleteDialog from '@/components/dialog/delete.vue'

export default {
  components: {
    FullCalendar
    // CalendarDialog,
    // DeleteDialog
  },
  props: {
    type: {
      type: String,
      default: 'small',
      required: false
    },
    events: {
      type: Array,
      default: () => [],
      required: false
    },
    weekMonYear: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      activeName: '1',
      today: new Date(),
      todayClassName: 'today',
      evnetTime: {
        hour: 'numeric',
        minute: '2-digit',
        hour12: false
      },
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay amplify'
      },
      buttonText: {
        today: '今天',
        month: '月',
        week: '周',
        day: '日'
      },
      customButtons: {
        amplify: {
          text: '放大',
          bootstrapFontAwesome: 'fa-expand',
          click: function() {
            alert('点击了自定义按钮!')
          }
        }
      },
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin, // needed for dateClick
        bootstrapPlugin,
        listPlugin
      ],
      calendarWeekends: true,
      deleteDialogVisible: false,
      calendarDialogProperty: {
        title: '新建日程',
        visible: false,
        data: null
      },
      calendarTitle: ''
    }
  },
  mounted() {
    this.callCalendarApi()
  },
  methods: {
    expand() {
      this.$emit('expand', true)
    },
    callCalendarApi(methods, viewName) {
      const calendarApi = this.$refs.fullCalendar.getApi()
      if (methods) {
        if (viewName) {
          calendarApi[methods](viewName)
        } else {
          calendarApi[methods]()
        }
      }
      this.$nextTick(() => {
        setTimeout(() => {
          this.setIcon()
        }, 2000)
        this.$emit('change', calendarApi.view)
      })
      this.calendarTitle = calendarApi.view.title
      if (calendarApi.view.activeStart.getTime() < this.today.getTime() && this.today.getTime() < calendarApi.view.activeEnd.getTime()) {
        this.todayClassName = 'today selected'
      } else {
        this.todayClassName = 'today'
      }
    },
    setIcon() {
      const eleList = document.getElementsByClassName('fc-title')
      Array.prototype.forEach.call(eleList, item => {
        // const grandParent = item.parentElement.parentElement
        // const color = grandParent.style.color
        const div = document.createElement('div')
        div.style.display = 'inline-block'
        div.style.paddingTop = '0'
        const icon = document.createElement('i')
        if (item.innerText.match(/排期/)) {
          item.innerText = item.innerText.replace(/排期：/, '')
          icon.className = 'el-icon-document'
        } else {
          item.innerText = item.innerText.replace(/日程：/, '')
          icon.className = 'el-icon-date'
        }
        div.appendChild(icon)
        item.parentElement.insertBefore(div, item)
      })
    },
    select(selectionInfo) { // 滑动多选时候返回的数据
      this.$emit('select', selectionInfo)
    },
    datesRender(arg) {
      // console.log(arg)
    },
    eventDrop(info) {
      this.$emit('eventDrop', info)
    },
    dateClick(arg) {
      this.$emit('dateClick', arg)
      // this.calendarDialogProperty.visible = true
      // this.calendarEvents.push({
      //   title: '新增事件', start: arg.date, allDay: arg.allDay
      // })
    },
    eventClick(info) {
      this.$emit('eventClick', info)
      // alert('Event: ' + info.event.title)
      // info.el.style.borderColor = 'red'
      // info.el.style.backgroundColor = 'red'
      // this.deleteDialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
>>>.el-tabs__nav-scroll{
  margin: 0 35px;
}
>>>.el-tabs__nav-wrap::after{
  height: 1px;
}
.calender-top {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  margin: 0 35px;
  .calender-top-title {
    font-size:16px;
    font-family:PingFangSC-Medium;
    color:rgba(51,59,74,1);
  }
}
>>>.fc-content {
  height: auto !important;
  display: flex;
  padding-top: 2px;
}
>>>.fc-title {
  line-height: 15px;
  padding-left: 4px;
  font-weight: bold !important;
}
>>>.fc-event-container .fc-content {
  text-overflow: inherit;
}
>>>.fc-day-grid-event .fc-content{
  white-space: normal;
}
>>>.fc-event {
  line-height: auto !important;
}
>>>.fc-day-header {
  height: 52px;
  line-height: 52px;
}
>>>#small-calendar .fc-dayGridMonth-view .table-bordered .fc-body .fc-day-number {
  transform: scale(1);
  font-size: 14px;
}
>>>#small-calendar .fc-view-container .table-bordered .fc-head .fc-day-header {
  transform: scale(1);
  font-size: 14px;
}
>>>.fc-scroller::-webkit-scrollbar {
  display:none !important;
}
>>>.fc-today {
  background-color: rgba(235,172,0,0.1);
}
>>>.fc th{
  border-color: #D8D8D8;
}
>>>.fc td {
  border-color: #D8D8D8;
}
</style>

// fullcalendar
<style lang='scss'>
#small-calendar {
  margin: 0 35px 50px 35px;
}
#small-calendar .btn-primary {
  background-color: #fff;
  color: #6f7c93;
  border: 0.5px solid #bfc6dc;
}
#small-calendar .btn-primary:hover {
  background-color: #409eff;
  color: #fff;
  border: 0.5px solid #409eff;
}
#small-calendar .fc-today-button,
.fc-dayGridMonth-button,
.fc-timeGridWeek-button,
.fc-timeGridDay-button {
  font-size: 10px !important;
  transform: scale(0.8333);
  padding: 5px !important;
}
#small-calendar .fc-timeGridWeek-button,
.fc-timeGridDay-button {
  margin-left: -4px !important;
}
#small-calendar .fc-next-button {
  margin-left: -5px !important;
}
#small-calendar .fc-amplify-button {
  margin-right: -3px !important;
}
#small-calendar .fc-prev-button,
.fc-next-button,
.fc-amplify-button {
  font-size: 10px !important;
  transform: scale(0.8333);
  padding: 8px !important;
}
#small-calendar .fc-center h2 {
  font-size: 14px;
  font-weight: 500;
}
#small-calendar .fc-view-container .table-bordered .fc-head .fc-day-header {
  font-size: 10px;
  transform: scale(0.8333);
}
#small-calendar .fc-dayGridMonth-view .table-bordered .fc-body .fc-day-number {
  font-size: 8px;
  transform: scale(0.6667);
}
#small-calendar
  .fc-dayGridMonth-view
  .table-bordered
  .fc-body
  .fc-event-container
  .fc-content {
  height: 12px;
  width: 200%;
  margin-left: -49%;
  transform: scale(0.5);
}
#small-calendar
  .fc-dayGridMonth-view
  .table-bordered
  .fc-body
  .fc-event-container
  .fc-content
  span {
  font-size: 6px;
  display: inline-block;
  position: relative;
  bottom: 3px;
}
#small-calendar
  .fc-dayGridMonth-view
  .table-bordered
  .fc-body
  .fc-more {
  width: 125%;
  display: inline-block;
  position: relative;
  font-size: 6px;
  transform: scale(0.8);
}
#small-calendar
 .fc-more-popover {
   margin-top: 9%;
   margin-left: -14%;
   border-radius: 8px 8px 0 0;
   font-size: 6px;
   transform: scale(0.5);
 }
 #small-calendar
  .fc-more-popover
  .fc-body {
   height: 100px;
   overflow-y: auto;
 }
  #small-calendar
  .fc-more-popover
  .fc-header {
   background-color: #D8D8D8;
 }
#small-calendar .fc-header-toolbar {
  margin-bottom: 10px;
}
#small-calendar .fc-timeGridWeek-view,
.fc-timeGridDay-view {
  font-size: 12px;
}
</style>

<style>
#big-calendar {
  margin: auto;
}
 #big-calendar
  .fc-more-popover
  .fc-header {
   background-color: #D8D8D8;
 }
 #big-calendar
  .fc-more-popover
  .fc-body {
   height: 222px;
   overflow-y: auto;
 }
</style>

<style>
.fc-event-container .fc-content {
    text-overflow: ellipsis;
  }
</style>