测试了阴历组件，周六周日加了颜色
This commit is contained in:
muqing
parent
ab8c5ce083
commit
72ea08f6ca
@ -67,6 +67,7 @@
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-lunar-full-calendar": "^1.3.2",
|
||||
"vue-quill-editor": "3.0.6",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-simple-uploader": "^0.7.4",
|
||||
|
||||
@ -41,6 +41,12 @@ Vue.prototype.handleTree = handleTree
|
||||
Vue.prototype.$video = Video
|
||||
Vue.use(VideoPlayer);
|
||||
|
||||
|
||||
import LunarFullCalendar from "vue-lunar-full-calendar";
|
||||
Vue.use(LunarFullCalendar);
|
||||
|
||||
|
||||
|
||||
Vue.prototype.msgSuccess = function (msg) {
|
||||
this.$message({ showClose: true, message: msg, type: "success" });
|
||||
}
|
||||
|
||||
@ -97,8 +97,8 @@ export default {
|
||||
calendarPlugins: [
|
||||
// plugins must be defined in the JS
|
||||
dayGridPlugin,
|
||||
timeGridPlugin,
|
||||
interactionPlugin, // needed for dateClick
|
||||
//timeGridPlugin,
|
||||
//interactionPlugin, // needed for dateClick
|
||||
listPlugin
|
||||
],
|
||||
calendarWeekends: true,
|
||||
@ -140,7 +140,15 @@ export default {
|
||||
@import "~@fullcalendar/list/main.css";
|
||||
.calendar {
|
||||
width: 820px;
|
||||
height: 100%;
|
||||
}
|
||||
.fc-widget-content {
|
||||
.fc-sun,
|
||||
.fc-sat {
|
||||
background: rgba(245, 246, 248, 0.6);
|
||||
//background: rgba(109, 113, 121, 0.6);
|
||||
}
|
||||
}
|
||||
.xs-btns-style {
|
||||
@media screen and (max-width: 768px) {
|
||||
display: flex;
|
||||
|
||||
406
ruoyi-ui/src/views/benyi/calendarshow/index123.vue
Normal file
406
ruoyi-ui/src/views/benyi/calendarshow/index123.vue
Normal file
@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="4" :xs="24">
|
||||
<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 class="lunarFullCalendar">
|
||||
<div class="full-calendar">
|
||||
<lunar-full-calendar
|
||||
:events="events"
|
||||
ref="calendar"
|
||||
@event-selected="eventSelected"
|
||||
:config="config"
|
||||
@day-click="dayClick"
|
||||
></lunar-full-calendar>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LunarFullCalendar } from "vue-lunar-full-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 {
|
||||
components: {
|
||||
//name: "fullcalendar_page",
|
||||
LunarFullCalendar
|
||||
},
|
||||
data() {
|
||||
let self = this;
|
||||
return {
|
||||
btns: [
|
||||
{
|
||||
color: "#52c41a",
|
||||
title: "家长参与"
|
||||
},
|
||||
{
|
||||
color: "#135200",
|
||||
title: "大型活动"
|
||||
},
|
||||
{
|
||||
color: "#1890ff",
|
||||
title: "教学活动"
|
||||
},
|
||||
{
|
||||
color: "#eb2f96",
|
||||
title: "节假日"
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
title : 'event1',
|
||||
start : '2020-06-06',
|
||||
},
|
||||
{
|
||||
title : 'event2',
|
||||
start : '2020-06-08',
|
||||
end : '2020-06-12',
|
||||
},
|
||||
{
|
||||
title : 'event3',
|
||||
start : '2020-06-20T12:30:00',
|
||||
allDay : false,
|
||||
},{id: 6, title: "端午节", start: "2020-06-25", end: "2020-06-28", color: "#eb2f96"}
|
||||
],
|
||||
config: {
|
||||
lunarCalendar: true,//控制中文日历是否显示为真
|
||||
//eventLimitText: '更多',
|
||||
locale:'zh-cn',//中文
|
||||
//eventColor: 'white',
|
||||
buttonText: {
|
||||
today: '今天',
|
||||
month: '月',
|
||||
week: '周',
|
||||
day: '日',
|
||||
list: "周列表"
|
||||
},
|
||||
calendarEvents: [],
|
||||
header: {
|
||||
// left: 'prevYear,prev,next,nextYear',
|
||||
// center: 'title',
|
||||
// right: 'hide,custom,today,agendaWeek'
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "hide, custom, month,agendaWeek,agendaDay, listWeek"
|
||||
},
|
||||
eventLimit: true, // 一天中显示多少条事件，多了隐藏
|
||||
firstDay: 0, // 控制周一周日那个在前面
|
||||
defaultView: 'month',
|
||||
allDaySlot: true, // agenda视图下是否显示all-day
|
||||
allDayText: '全天', // agenda视图下all-day的显示文本
|
||||
timezone: 'local', // 时区默认本地的
|
||||
slotLabelFormat: 'HH:mm', // 周视图和日视同的左侧时间显示
|
||||
//分页方法
|
||||
viewRender(view, element) {
|
||||
self.viewRender(view, element);
|
||||
},
|
||||
customButtons: { // 新增按钮
|
||||
hide: {
|
||||
text: '隐藏农历',
|
||||
click: function () {
|
||||
self.$refs.calendar.fireMethod('option', {
|
||||
lunarCalendar: false
|
||||
})
|
||||
self.$refs.calendar.fireMethod('option', {
|
||||
header: {
|
||||
left: 'prevYear,prev,next,nextYear',
|
||||
center: 'title',
|
||||
right: 'show, custom, month,agendaWeek,agendaDay, listWeek'
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
show: {
|
||||
text: '显示农历',
|
||||
click: function () {
|
||||
self.$refs.calendar.fireMethod('option', {
|
||||
lunarCalendar: true
|
||||
})
|
||||
self.$refs.calendar.fireMethod('option', {
|
||||
header: {
|
||||
left: 'prevYear,prev,next,nextYear',
|
||||
center: 'title',
|
||||
right: 'hide, custom, month,agendaWeek,agendaDay, listWeek'
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
queryParams: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getAllSchoolCalendars(this.queryParams).then(response => {
|
||||
this.events = response.calendarData;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 注释的是功能是可以修改对应的功能值属性，比如设置 eventLimit为 false
|
||||
// this.$refs.calendar.fireMethod('option',{
|
||||
// eventLimit :false
|
||||
// })
|
||||
dayClick (date, jsEvent, view) {
|
||||
// 点击当天的事件
|
||||
alert('农历数据：' + JSON.stringify(window.lunar(date._d)))
|
||||
console.log(date, jsEvent, 'dayClick')
|
||||
},
|
||||
eventSelected (event, jsEvent, view) {
|
||||
// 选中事件
|
||||
console.log(event, jsEvent, 'eventSelected')
|
||||
},
|
||||
viewRender (view, element) {
|
||||
console.log(view, element, 'viewRender')
|
||||
},
|
||||
enter () {
|
||||
this.$router.push('/explain')
|
||||
}
|
||||
}
|
||||
};
|
||||
// export default {
|
||||
// name: "fullcalendar_page",
|
||||
// components: {
|
||||
// LunarFullCalendar
|
||||
// },
|
||||
// data() {
|
||||
// return {
|
||||
// events: [],
|
||||
// config: {
|
||||
// lunarCalendar: true //(Control whether the Chinese calendar shows true, unrealistic flase, default true.)
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
|
||||
// };
|
||||
// window.lunar(date)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$color: #45b984;
|
||||
.lunarFullCalendar {
|
||||
min-width: 900px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
// .top {
|
||||
// height: 100px;
|
||||
// h2 {
|
||||
// text-align: center;
|
||||
// font-size: 15px;
|
||||
// }
|
||||
// div {
|
||||
// font-size: 13px;
|
||||
// }
|
||||
// }
|
||||
.full-calendar {
|
||||
padding: 20px;
|
||||
height: calc(100% - 30px);
|
||||
/deep/ {
|
||||
.fc-unthemed thead,
|
||||
.fc-unthemed .fc-content,
|
||||
.fc-unthemed th,
|
||||
.fc-unthemed td,
|
||||
.fc-unthemed tbody,
|
||||
.fc-unthemed .fc-row,
|
||||
.fc-unthemed .fc-list-view,
|
||||
.fc-unthemed .fc-popover,
|
||||
.fc-unthemed .fc-divider,
|
||||
.fc-unthemed .fc-list-heading td {
|
||||
border-color: #eaecf1;
|
||||
}
|
||||
.fc-header-toolbar {
|
||||
height: 30px;
|
||||
margin-bottom: 0;
|
||||
line-height: 30px;
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.fc-button {
|
||||
height: 30px;
|
||||
background: #fff;
|
||||
border-color: #fff;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
.fc-today-button {
|
||||
font-size: 15px;
|
||||
color: $color;
|
||||
}
|
||||
.fc-show-button,
|
||||
.fc-hide-button {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
border: 1px solid #bbbfcd;
|
||||
border-radius: 20px;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
}
|
||||
.fc-next-button,
|
||||
.fc-prev-button {
|
||||
color: #7d8292;
|
||||
}
|
||||
.fc-button-group {
|
||||
margin-left: 20px;
|
||||
font-size: 15px;
|
||||
button {
|
||||
width: 80px;
|
||||
color: #000;
|
||||
border: 1px solid #bbbfcd;
|
||||
}
|
||||
button:first-child {
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
button:last-child {
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
.fc-state-active {
|
||||
background: $color;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
.fc-agendaDay-view,
|
||||
.fc-month-view,
|
||||
.fc-agendaWeek-view {
|
||||
.fc-widget-content {
|
||||
.fc-sun,
|
||||
.fc-sat {
|
||||
background: rgba(245, 246, 248, 0.6);
|
||||
}
|
||||
.fc-day-number {
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
line-height: 13px;
|
||||
float: left;
|
||||
}
|
||||
.fc-day-top {
|
||||
padding: 15px 12px 0 12px;
|
||||
}
|
||||
.fc-day-cnTerm,
|
||||
.fc-day-cnDate {
|
||||
font-size: 12px;
|
||||
color: #7d8292;
|
||||
float: right;
|
||||
}
|
||||
.fc-more {
|
||||
font-size: 12px;
|
||||
color: #7d8292;
|
||||
}
|
||||
.fc-event {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
background-color: rgba($color: $color, $alpha: 0.15) !important;
|
||||
border: 1px solid rgba($color: $color, $alpha: 0.15) !important;
|
||||
border-left: 2px solid rgba($color: $color, $alpha: 0.15) !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
.fc-day-grid-event {
|
||||
padding: 1px 0 1px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-agendaWeek-view,
|
||||
.fc-agendaDay-view {
|
||||
.fc-axis {
|
||||
font-size: 15px;
|
||||
}
|
||||
.fc-title {
|
||||
font-size: 15px;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.fc-month-view {
|
||||
.fc-event {
|
||||
&.fc-not-start {
|
||||
border-left: 1px solid rgba($color: $color, $alpha: 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-agendaDay-view {
|
||||
.fc-head {
|
||||
table {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.fc-day-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-head {
|
||||
.fc-day-header,
|
||||
.fc-widget-header,
|
||||
.fc-head-container {
|
||||
border-top-color: #fff;
|
||||
border-left-color: #fff;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
table {
|
||||
margin: 10px 0 15px 0;
|
||||
font-size: 15px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
color: $color;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//============================
|
||||
.calendar {
|
||||
width: 820px;
|
||||
}
|
||||
.xs-btns-style {
|
||||
@media screen and (max-width: 768px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.el-col {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
}
|
||||
.el-col {
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 96px;
|
||||
}
|
||||
.no-border-btn {
|
||||
border: none;
|
||||
}
|
||||
.fc-header-toolbar {
|
||||
@media screen and (max-width: 768px) {
|
||||
.fc-left > .fc-today-button, .fc-right > .fc-listWeek-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -63,26 +63,26 @@
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-web</artifactId>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- spring-boot-devtools -->
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-devtools</artifactId>
|
||||
<optional>true</optional> <!-- 表示依赖不会传递 -->
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- spring security 安全认证 -->
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-security</artifactId>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- redis 缓存操作 -->
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-data-redis</artifactId>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- pool 对象池 -->
|
||||
<dependency>
|
||||
<groupId>org.apache.commons</groupId>
|
||||
@ -102,7 +102,7 @@
|
||||
<artifactId>mybatis-spring-boot-starter</artifactId>
|
||||
<version>${mybatis.spring.boot.starter.version}</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- pagehelper 分页插件 -->
|
||||
<dependency>
|
||||
<groupId>com.github.pagehelper</groupId>
|
||||
@ -129,14 +129,14 @@
|
||||
<artifactId>commons-io</artifactId>
|
||||
<version>${commons.io.version}</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!--文件上传工具类 -->
|
||||
<dependency>
|
||||
<groupId>commons-fileupload</groupId>
|
||||
<artifactId>commons-fileupload</artifactId>
|
||||
<version>${commons.fileupload.version}</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- 解析客户端操作系统、浏览器等 -->
|
||||
<dependency>
|
||||
<groupId>eu.bitwalker</groupId>
|
||||
@ -156,14 +156,14 @@
|
||||
<groupId>org.springframework</groupId>
|
||||
<artifactId>spring-context-support</artifactId>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!--Token生成与解析-->
|
||||
<dependency>
|
||||
<groupId>io.jsonwebtoken</groupId>
|
||||
<artifactId>jjwt</artifactId>
|
||||
<version>${jwt.version}</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- swagger2-->
|
||||
<dependency>
|
||||
<groupId>io.springfox</groupId>
|
||||
@ -180,44 +180,44 @@
|
||||
</exclusion>
|
||||
</exclusions>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!--防止进入swagger页面报类型转换错误，排除2.9.2中的引用，手动增加1.5.21版本-->
|
||||
<dependency>
|
||||
<groupId>io.swagger</groupId>
|
||||
<artifactId>swagger-annotations</artifactId>
|
||||
<version>1.5.21</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<dependency>
|
||||
<groupId>io.swagger</groupId>
|
||||
<artifactId>swagger-models</artifactId>
|
||||
<version>1.5.21</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- swagger2-UI-->
|
||||
<dependency>
|
||||
<groupId>io.springfox</groupId>
|
||||
<artifactId>springfox-swagger-ui</artifactId>
|
||||
<version>${swagger.version}</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- 获取系统信息 -->
|
||||
<dependency>
|
||||
<groupId>com.github.oshi</groupId>
|
||||
<artifactId>oshi-core</artifactId>
|
||||
<version>${oshi.version}</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<dependency>
|
||||
<groupId>net.java.dev.jna</groupId>
|
||||
<artifactId>jna</artifactId>
|
||||
</dependency>
|
||||
|
||||
|
||||
<dependency>
|
||||
<groupId>net.java.dev.jna</groupId>
|
||||
<artifactId>jna-platform</artifactId>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- excel工具 -->
|
||||
<dependency>
|
||||
<groupId>org.apache.poi</groupId>
|
||||
@ -231,7 +231,7 @@
|
||||
<artifactId>velocity</artifactId>
|
||||
<version>${velocity.version}</version>
|
||||
</dependency>
|
||||
|
||||
|
||||
<!-- 定时任务 -->
|
||||
<dependency>
|
||||
<groupId>org.quartz-scheduler</groupId>
|
||||
@ -315,4 +315,4 @@
|
||||
</pluginRepository>
|
||||
</pluginRepositories>
|
||||
|
||||
</project>
|
||||
</project>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user