|
@@ -6,7 +6,7 @@
|
|
<Button type="primary">新媒体新技术</Button>
|
|
<Button type="primary">新媒体新技术</Button>
|
|
<Button type="success">创新实验室</Button>
|
|
<Button type="success">创新实验室</Button>
|
|
</div>
|
|
</div>
|
|
- <div class="condition-wrap-right">
|
|
|
|
|
|
+ <div class="condition-wrap-right" style="display:none;">
|
|
<Select v-model="yearDefault" size="large" style="width:100px">
|
|
<Select v-model="yearDefault" size="large" style="width:100px">
|
|
<Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
|
|
<Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
|
|
</Select>
|
|
</Select>
|
|
@@ -16,23 +16,31 @@
|
|
<Button size="large">返回今天</Button>
|
|
<Button size="large">返回今天</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <full-calendar :config="config"
|
|
|
|
- :events="fcEvents"
|
|
|
|
- ref="calendar">
|
|
|
|
- </full-calendar>
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <Tooltip :content="eventContent" placement="right" transfer max-width="300px">
|
|
|
|
+ <full-calendar :config="config"
|
|
|
|
+ :events="fcEvents"
|
|
|
|
+ ref="calendar"
|
|
|
|
+ @dayClick="getDay">
|
|
|
|
+ </full-calendar>
|
|
|
|
+ </Tooltip>
|
|
|
|
+ <br><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
- import FullCalendar from 'vue-full-calendar'
|
|
|
|
- //import 'fullcalendar/dist/fullcalendar.css'
|
|
|
|
|
|
+ import { FullCalendar } from 'vue-full-calendar'
|
|
|
|
+ import 'fullcalendar/dist/fullcalendar.css'
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
FullCalendar
|
|
FullCalendar
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
|
|
+ const self = this;
|
|
return {
|
|
return {
|
|
- yearDefault:'2019年',
|
|
|
|
|
|
+ eventContent: "",
|
|
|
|
+ yearDefault: '2019年',
|
|
years: [
|
|
years: [
|
|
"2012年",
|
|
"2012年",
|
|
"2013年",
|
|
"2013年",
|
|
@@ -62,36 +70,48 @@
|
|
'11月',
|
|
'11月',
|
|
'12月',
|
|
'12月',
|
|
],
|
|
],
|
|
- fcEvents: [
|
|
|
|
- ],
|
|
|
|
- config: {
|
|
|
|
- firstDay:'1',//以周日为每周的第一天
|
|
|
|
- // 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:[]
|
|
|
|
|
|
+ _this:null,
|
|
|
|
+ fcEvents: [],
|
|
|
|
+ config: {
|
|
|
|
+ firstDay: '7',//以周日为每周的第一天
|
|
|
|
+ // weekends: true,//是否在日历中显示周末
|
|
|
|
+ locale: 'zh-cn',//语言
|
|
|
|
+ defaultView: 'month',//默认按月显示
|
|
|
|
+ height: 'auto',//高度
|
|
|
|
+ fixedWeekCount: false,//是否固定显示六周
|
|
|
|
+ // weekMode:"liquid",//周数不定,每周的高度可变,整个日历高度不变
|
|
|
|
+ allDaySlot: false,
|
|
|
|
+ eventLimit: 1,
|
|
|
|
+ // allDay:true,
|
|
|
|
+ header: {//表头信息
|
|
|
|
+ left: 'prev, next, today',
|
|
|
|
+ center: 'title',
|
|
|
|
+ right: 'hide, custom'
|
|
|
|
+ },
|
|
|
|
+ dayClick: function getDay(day, jsEvent) {
|
|
|
|
+ console.log(day);
|
|
|
|
+ console.log(jsEvent);
|
|
|
|
+ },
|
|
|
|
+ eventClick:(day, jsEvent)=> {
|
|
|
|
+ this.$router.push( { path: 'lessonDetails' } );
|
|
|
|
+ },
|
|
|
|
+ eventMouseover: function (event, jsEvent, view) {
|
|
|
|
+ self.eventContent = event.title;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ lessonList: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+
|
|
methods: {
|
|
methods: {
|
|
- getDay(day, jsEvent) {
|
|
|
|
- console.log(day);
|
|
|
|
- console.log(jsEvent);
|
|
|
|
- }
|
|
|
|
|
|
+ getDay(event, jsEvent, view) {
|
|
|
|
+ },
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+ this._this = this;
|
|
this.lessonList = require("@/static/lessonList.json");
|
|
this.lessonList = require("@/static/lessonList.json");
|
|
for (let i = 0; i < this.lessonList.length; i++) {
|
|
for (let i = 0; i < this.lessonList.length; i++) {
|
|
|
|
+
|
|
var sdate = new Date(this.lessonList[i].startTime.time);
|
|
var sdate = new Date(this.lessonList[i].startTime.time);
|
|
let sY = sdate.getFullYear() + '-';
|
|
let sY = sdate.getFullYear() + '-';
|
|
let sM = (sdate.getMonth() + 1 < 10 ? '0' + (sdate.getMonth() + 1) : sdate.getMonth() + 1) + '-';
|
|
let sM = (sdate.getMonth() + 1 < 10 ? '0' + (sdate.getMonth() + 1) : sdate.getMonth() + 1) + '-';
|
|
@@ -100,38 +120,54 @@
|
|
let eY = edate.getFullYear() + '-';
|
|
let eY = edate.getFullYear() + '-';
|
|
let eM = (edate.getMonth() + 1 < 10 ? '0' + (edate.getMonth() + 1) : edate.getMonth() + 1) + '-';
|
|
let eM = (edate.getMonth() + 1 < 10 ? '0' + (edate.getMonth() + 1) : edate.getMonth() + 1) + '-';
|
|
let eD = edate.getDate() + ' ';
|
|
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
|
|
|
|
- });
|
|
|
|
|
|
+
|
|
|
|
+ let dateArr = this.fcEvents.map(item => item.start);
|
|
|
|
+
|
|
|
|
+ //如果已存在
|
|
|
|
+ if (dateArr.indexOf(sY + sM + sD) == -1) {
|
|
|
|
+ this.fcEvents.push({
|
|
|
|
+ title: '名称:' + this.lessonList[i].name
|
|
|
|
+ + ' \n 学校:' + this.lessonList[i].schoolName
|
|
|
|
+ + ' \n 主讲人:' + this.lessonList[i].employeeName
|
|
|
|
+ + ' \n 学科:' + this.lessonList[i].parentCategoryName
|
|
|
|
+ + ' \n 课题:' + this.lessonList[i].parentProjectName
|
|
|
|
+ + ' \n 时间:' + this.lessonList[i].timeRangeTipHHmm
|
|
|
|
+ + ' \n ',
|
|
|
|
+ start: sY + sM + sD,
|
|
|
|
+ end: eY + eM + eD
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ let index = dateArr.indexOf(sY + sM + sD);
|
|
|
|
+ let newEvent = {
|
|
|
|
+ title: this.lessonList[i].name + ' \n\n 等多个活动',
|
|
|
|
+ start: sY + sM + sD,
|
|
|
|
+ end: eY + eM + eD,
|
|
|
|
+ renderHeader: (h, params) => {
|
|
|
|
+ return h('div', [
|
|
|
|
+ h('span', params.column.title),
|
|
|
|
+ h('Tooltip', {
|
|
|
|
+ props: {
|
|
|
|
+ content: '您希望展示的提示语',
|
|
|
|
+ transfer: true,
|
|
|
|
+ maxWidth: '220',
|
|
|
|
+ theme: 'light'
|
|
|
|
+ }
|
|
|
|
+ }, [
|
|
|
|
+ h('Icon', {
|
|
|
|
+ props: {
|
|
|
|
+ type: 'md-help-circle',
|
|
|
|
+ color: "#c8c8c8",
|
|
|
|
+ size: "20"
|
|
|
|
+ },
|
|
|
|
+ class: {iconClass: true}
|
|
|
|
+ })
|
|
|
|
+ ]),
|
|
|
|
+ ])
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.fcEvents.splice(index, 1,newEvent);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- console.log(this.lessonList);
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -191,7 +227,46 @@
|
|
/*.review-main /deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .more-link {
|
|
/*.review-main /deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .more-link {
|
|
display:none;
|
|
display:none;
|
|
}*/
|
|
}*/
|
|
-
|
|
|
|
|
|
+ .review-main /deep/ .fc-event, .fc-event:hover {
|
|
|
|
+ color:black;
|
|
|
|
+ }
|
|
|
|
+ .review-main /deep/ .fc-day-grid-event .fc-time{
|
|
|
|
+ display:none;
|
|
|
|
+ }
|
|
|
|
+ .review-main /deep/ .fc-event, .fc-event-dot {
|
|
|
|
+ background:none;
|
|
|
|
+ }
|
|
|
|
+ .review-main /deep/ .fc-event {
|
|
|
|
+ border:none;
|
|
|
|
+ }
|
|
|
|
+ .review-main /deep/ .fc-content {
|
|
|
|
+ padding-left:5px;
|
|
|
|
+ }
|
|
|
|
+ .review-main /deep/ .fc-title {
|
|
|
|
+ width: 140px;
|
|
|
|
+ display: block;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ }
|
|
|
|
+ .review-main /deep/ .fc-day-header {
|
|
|
|
+ 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/ .fc-other-month {
|
|
|
|
+ background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法(必须放在最后) */
|
|
|
|
+ background-size: 20px 20px;
|
|
|
|
+ }
|
|
|
|
+ .review-main /deep/ .fc-left {
|
|
|
|
+ float:right;
|
|
|
|
+ }
|
|
|
|
+ .review-main /deep/ .fc-widget-content:hover {
|
|
|
|
+ /*background:#eee;*/
|
|
|
|
+ }
|
|
.condition-wrap {
|
|
.condition-wrap {
|
|
display:flex;
|
|
display:flex;
|
|
flex-direction:row;
|
|
flex-direction:row;
|