html - 副本.html

<template>
  <a-config-provider :locale="zh_CN">
    <div id="app">
        <div class="leri-box">
          <a-row :gutter="16" type="flex">
            <a-col :sm="24" :md="5">
              <a-card class="jm-leri-left-card-box" :bordered="false">
                <div class="leri-left-btn"><a-button type="primary">确认</a-button></div>
                <a-checkbox-group
                    v-model="userList"
                    name="checkboxgroup"
                    :options="userNameList"
                  />
              </a-card>
            </a-col>
            <a-col :sm="24" :md="19">
              <a-card class="jm-leri-right-card-box" :bordered="false">
                <div class='demo-app'>
                  <FullCalendar
                    class='demo-app-calendar'
                    ref="fullCalendar"
                    defaultView="dayGridMonth"
                    :locale="esLocale"
                    :header="{
                      left: 'prev,next today',
                      center: 'title',
                      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    }"
                    :height="660"
                    :buttonText="{
                        today:    '今天',
                        month:    '月',
                        week:     '周',
                        day:      '日',
                        prev:'上月',
                        next:'下月'
                      }"
                    :plugins="calendarPlugins"
                    :weekends="calendarWeekends"
                    :eventLimit="true"
                    :events="calendarEvents"
                    
                    @dateClick="handleDateClick"
                    @eventClick="handleEventClick"
                    />
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
    </div>
  </a-config-provider>
</template>

<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
// import HelloWorld from './components/HelloWorld.vue'  :events="calendarEvents" :eventSources="eventSources"
import {setStates, eventTypes, frameFormats, isDataIds,dataIdLengths,dataIdBegins, pgnIds,
paramLengths,startStations,highBytes,beginCounts,scopes,values,distributes} from '@/constp.js';
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import esLocale from '@fullcalendar/core/locales/zh-cn';
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      zh_CN,
      other:'',
      userNameList: [],

      userList:[],
      esLocale,
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: [ // put the array in the `events` property
        {
          title  : 'event1',
          start  : '2020-11-21',
          color: 'blue',     // an option!
          textColor: 'yellow' // an option!
        },
        {
          title  : 'event2',
          start  : '2020-11-05',
          end    : '2020-11-27',
           color: 'red',     // an option!
          textColor: 'yellow' // an option!
        },
        {
          title  : 'event3',
          start  : '2020-11-24T12:30:00',
        },
        {
          title  : 'event2',
          start  : '2020-12-05',
          end    : '2020-12-27',
           color: '#ccc',     // an option!
          textColor: 'yellow' // an option!
        },
      ],
      eventSources:[

    // your event source
    {
      events: [ // put the array in the `events` property
        {
          title  : 'event1',
          start  : '2020-11-21',
          color: 'blue',     // an option!
          textColor: 'yellow' // an option!
        },
        {
          title  : 'event2',
          start  : '2020-11-05',
          end    : '2020-11-27',
           color: 'red',     // an option!
          textColor: 'yellow' // an option!
        },
        {
          title  : 'event3',
          start  : '2020-11-24T12:30:00',
        },
        {
          title  : 'event2',
          start  : '2020-12-05',
          end    : '2020-12-27',
           color: '#ccc',     // an option!
          textColor: 'yellow' // an option!
        },
      ],
      color: 'black',     // an option!
      textColor: 'yellow' // an option!
    }

    // any other event sources...

  ]
      
    };
  },
  created(){
    setTimeout(()=>{
      this.userNameList = [
        {value:1,label:"用户1"},
        {value:2,label:"用户2"},
        {value:3,label:"用户3"},
        {value:4,label:"用户4"},
        {value:5,label:"用户5"},
        {value:6,label:"用户6"},
        {value:7,label:"用户7"},
        {value:8,label:"用户8"},
        {value:9,label:"用户9"},
        {value:10,label:"用户10"},
        {value:11,label:"用户11"},
        {value:12,label:"用户12"},
        {value:13,label:"用户13"},
        {value:14,label:"用户14"},
      ]
    },3000)
  },
  methods: {
    toggleWeekends() {
      this.calendarWeekends = !this.calendarWeekends // update a property
    },
    gotoPast() {
      let calendarApi = this.$refs.fullCalendar.getApi() // from the ref="..."
      calendarApi.gotoDate('2000-01-01') // call a method on the Calendar object
    },
    handleDateClick(arg) {
      if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
        this.calendarEvents.push({ // add new event data
          title: 'New Event',
          start: arg.date,
          allDay: arg.allDay
        })
      }
    },
    handleEventClick(info){
      console.log(info,'info')
    },
    onChange(){
      console.log(this.value)
    }
  },
};
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  background: #ccc;
  padding: 20px;
}
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
.demo-app {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
.demo-app-top {
  margin: 0 0 3em;
}
.demo-app-calendar {
  margin: 0 auto;
}
.leri-box{
  .jm-leri-left-card-box{
    height: 660px;
    margin-right: 20px;
    background: #fff;
    .leri-left-btn{
        margin: 0 0 10px;
        overflow: hidden;
        button{
           float: right;
        }
    }
    .ant-checkbox-group{
      text-align: left;
      display:block;

    }
    .ant-checkbox-group-item{
      display: block;
      margin-bottom: 16px;
    }
  }
  .jm-leri-right-card-box{
    height: 660px;
    border: 1px solid #ccc;
    background: #fff;
    
  }
}
</style>