Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

20200523-zlp-1

Browse Source 
园历样式
This commit is contained in:
paidaxing444
2020-05-23 11:45:10 +08:00
parent 9180d882fd
commit 89d61dd1f7
12 changed files with 245 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
ruoyi-ui/src/views/benyi/calendarshow/index.vue
View File

@ -2,14 +2,15 @@
<div class="app-container">
<el-row :gutter="24">
<el-col :span="4" :xs="24">
<el-button type="primary">日常活动</el-button>
<el-button type="success">教学活动</el-button>
<el-button type="info">大型活动</el-button>
<el-button type="warning">家长参与</el-button>
<el-button type="danger">节假日</el-button>
<!-- <Tag type="dot" :color="NORMAL_COLOR">未预约</Tag>
<Tag type="dot" :color="USED_COLOR">已预约</Tag>
<Tag type="dot" :color="DISABLED_COLOR">已停用</Tag> -->
<el-row class="xs-btns-style" :gutter="10">
<el-col v-for="item in btns" :key="item.title">
<el-button
type="primary"
class="btn no-border-btn"
:style="{background: `${item.color}`}"
>{{item.title}}</el-button>
</el-col>
</el-row>
</el-col>
<el-col :span="20" :xs="24">
<div>
@ -26,9 +27,8 @@
:eventLimit="true"
:displayEventEnd="true"
eventLimitText="更多"
@dateClick="handleDateClick"
@eventClick="handleEventClick"
/>
/>
</div>
</el-col>
</el-row>
@ -36,47 +36,64 @@
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list';
import { getAllSchoolCalendars } from "@/api/benyi/calendar"
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import { getAllSchoolCalendars } from "@/api/benyi/calendar";
export default {
name: 'fullcalendar_page',
name: "fullcalendar_page",
components: {
FullCalendar
},
data () {
data() {
return {
// DISABLED_COLOR: '#c5c8ce',
// USED_COLOR: '#19be6b',
// NORMAL_COLOR: '#2db7f5',
btns: [
{
color: "#52c41a",
title: "家长参与"
},
{
color: "#135200",
title: "大型活动"
},
{
color: "#1890ff",
title: "教学活动"
},
{
color: "#eb2f96",
title: "节假日"
}
],
views: {
list: {
noEventsMessage: '暂无日程'
}
list: {
noEventsMessage: "暂无日程"
}
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay listWeek'
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay listWeek"
},
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日',
list: '周列表'
today: "今天",
month: "月",
week: "周",
day: "日",
list: "周列表"
},
calendarPlugins: [ // plugins must be defined in the JS
calendarPlugins: [
// plugins must be defined in the JS
dayGridPlugin,
timeGridPlugin,
interactionPlugin,// needed for dateClick
listPlugin
interactionPlugin, // needed for dateClick
listPlugin
],
calendarWeekends: true,
calendarEvents: [ // initial event data
calendarEvents: [
// initial event data
// {
// title: 'Event Now',
// start: new Date(),
@ -86,15 +103,15 @@ export default {
calendarApi: null,
calendarData: [],
queryParams: {}
}
};
},
created() {
getAllSchoolCalendars(this.queryParams).then(response => {
this.calendarEvents = response.calendarData;
});
this.calendarEvents = response.calendarData;
});
},
methods: {
getCalendarEvents (info, successCallback, failureCallback) {
getCalendarEvents(info, successCallback, failureCallback) {
// const events = this.getSchoolCalendarList();
console.log("ceshi11111111");
getAllSchoolCalendars(this.queryParams).then(response => {
@ -119,46 +136,64 @@ export default {
// color:'green'
// }
// ]
successCallback(events)
successCallback(events);
},
toggleWeekends () {
this.calendarWeekends = !this.calendarWeekends // update a property
toggleWeekends() {
this.calendarWeekends = !this.calendarWeekends; // update a property
},
gotoPast () {
this.calendarApi.gotoDate('2019-08-01') // call a method on the Calendar object
gotoPast() {
this.calendarApi.gotoDate("2019-08-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',
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
})
});
}
this.calendarApi.refetchEvents()
this.calendarApi.refetchEvents();
},
handleEventClick (info) {
alert('Event: ' + info.event.title)
handleEventClick(info) {
alert("活动: " + info.event.title);
}
},
mounted () {
this.calendarApi = this.$refs.fullCalendar.getApi()
mounted() {
this.calendarApi = this.$refs.fullCalendar.getApi();
}
}
};
</script>
<style lang="scss" scope>
// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';
.panel {
padding-top: 64px;
color: deeppink;
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
@import "~@fullcalendar/list/main.css";
.calendar {
width: 820px;
}
.xs-btns-style {
@media screen and (max-width: 768px) {
display: flex;
flex-wrap: wrap;
.el-col {
width: auto;
}
}
.calendar {
width: 820px;
@media screen and (min-width: 769px) {
}
.el-col {
margin-bottom: 10px;
text-align: center;
}
}
.btn {
width: 96px;
}
.no-border-btn {
border: none;
}
</style>