123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 |
- <template>
- <div class="container">
- <div class="review-main">
- <div class="condition-wrap">
- <div class="condition-wrap-left">
- <Button type="primary">新媒体新技术</Button>
- <Button type="success">创新实验室</Button>
- </div>
- <div class="condition-wrap-right">
- <Select v-model="yearDefault" size="large" style="width:100px">
- <Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
- </Select>
- <Select v-model="monthDefault" size="large" style="width:100px">
- <Option v-for="item in monthes" :value="item" :key="item">{{ item }}</Option>
- </Select>
- <Button size="large">返回今天</Button>
- </div>
- </div>
- <full-calendar :events="fcEvents" lang="zh" @dayClick ="getDay" :config="config" ></full-calendar>
- </div>
- </div>
- </template>
- <script>
- import FullCalendar from 'vue-fullcalendar'
- export default {
- components: {
- FullCalendar
- },
- data() {
- return {
- yearDefault:'2019年',
- years: [
- "2012年",
- "2013年",
- "2014年",
- "2015年",
- "2016年",
- "2017年",
- "2018年",
- "2019年",
- "2020年",
- "2021年",
- "2022年",
- "2023年",
- "2024年",
- ],
- monthDefault: '1月',
- monthes: [
- '1月',
- '2月',
- '3月',
- '4月',
- '5月',
- '6月',
- '7月',
- '8月',
- '9月',
- '11月',
- '12月',
- ],
- fcEvents: [
- ],
- config: {
- firstDay: '0',//以周日为每周的第一天
- // weekends: true,//是否在日历中显示周末
- locale: 'zh-cn',//语言
- defaultView: 'month',//默认按月显示
- height: 'auto',//高度
- fixedWeekCount: false,//是否固定显示六周
- // weekMode:"liquid",//周数不定,每周的高度可变,整个日历高度不变
- allDaySlot: false,
- // allDay:true,
- header: {//表头信息
- left: 'prev, next, today',
- center: 'title',
- right: 'hide, custom'
- },
- },
- lessonList:[]
- }
- },
- methods: {
- getDay(day, jsEvent) {
- console.log(day);
- console.log(jsEvent);
- }
- },
- mounted() {
- this.lessonList = require("@/static/lessonList.json");
- for (let i = 0; i < this.lessonList.length; i++) {
- var sdate = new Date(this.lessonList[i].startTime.time);
- let sY = sdate.getFullYear() + '-';
- let sM = (sdate.getMonth() + 1 < 10 ? '0' + (sdate.getMonth() + 1) : sdate.getMonth() + 1) + '-';
- let sD = sdate.getDate() + ' ';
- var edate = new Date(this.lessonList[i].endTime.time);
- let eY = edate.getFullYear() + '-';
- let eM = (edate.getMonth() + 1 < 10 ? '0' + (edate.getMonth() + 1) : edate.getMonth() + 1) + '-';
- let eD = edate.getDate() + ' ';
- this.fcEvents.push({
- title:'名称:'+this.lessonList[i].viwActivityTypeTip,
- start: sY + sM + sD,
- end: eY + eM + eD
- });
- this.fcEvents.push({
- title:'学校:'+this.lessonList[i].schoolName,
- start: sY + sM + sD,
- end: eY + eM + eD
- });
- this.fcEvents.push({
- title:'主讲人:'+this.lessonList[i].employeeName,
- start: sY + sM + sD,
- end: eY + eM + eD
- });
- this.fcEvents.push({
- title:'学科:'+this.lessonList[i].parentCategoryName,
- start: sY + sM + sD,
- end: eY + eM + eD
- });
- this.fcEvents.push({
- title:'课题:'+this.lessonList[i].parentProjectName,
- start: sY + sM + sD,
- end: eY + eM + eD
- });
- this.fcEvents.push({
- title:'时间:'+this.lessonList[i].timeRangeTipHHmm,
- start: sY + sM + sD,
- end: eY + eM + eD
- });
- }
- console.log(this.lessonList);
- }
- }
- </script>
- <style scoped>
- html, body, #app {
- height: 100% !important;
- user-select: none;
- }
-
- .main-content {
- background:rgb(248,248,248) !important;
- }
- .container {
- width: 1200px;
- margin: 100px auto;
- display:flex;
- flex-direction:row;
- justify-content:space-between;
- }
- .review-main {
- background:#fff;
- width:100%;
- padding:10px 25px;
- }
- .review-main /deep/ .full-calendar-header {
- display:none;
- }
- .review-main /deep/ .comp-full-calendar {
- padding:0px;
- max-width:1200px;
- }
- .review-main /deep/ .weeks {
- background: -webkit-linear-gradient(#E1E7EC, #B9C6D1); /* Safari 5.1 - 6.0 */
- background: -o-linear-gradient(#E1E7EC, #B9C6D1); /* Opera 11.1 - 12.0 */
- background: -moz-linear-gradient(#E1E7EC, #B9C6D1); /* Firefox 3.6 - 15 */
- background: linear-gradient(#E1E7EC, #B9C6D1); /* 标准的语法 */
- height: 40px;
- line-height: 40px;
- }
- .review-main /deep/ .full-calendar-body .dates .week-row .day-cell.today {
- background:#dfe6ec;
- }
- .review-main /deep/ .week-row > .not-cur-month {
- background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法(必须放在最后) */
- background-size: 20px 20px;
- }
- .review-main /deep/ .week-row {
- height:140px;
- }
- .review-main /deep/ .events-week {
- height:140px;
- }
- .review-main /deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item {
- background:none;
- }
- /*.review-main /deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .more-link {
- display:none;
- }*/
- .condition-wrap {
- display:flex;
- flex-direction:row;
- justify-content : space-between;
- }
- </style>
|