1 css
#calendar {
max-width: 1100px;
margin: 20px auto;
}
.fc-license-message {
display: none;
}
.fc .fc-toolbar-title {
font-size: 16px;
}
.fc table {
border-collapse: collapse;
border-spacing: 0;
font-size: 16px;
}
.fc .fc-toolbar.fc-header-toolbar {
margin-bottom: 35px;
}
.fc .fc-button-group {
width: 140px !important;
}
.fc .fc-myPrev-button {
font-weight: 800 !important;
font-size: 18px !important;
padding: 0 0 0 0 !important;
color: #3f4a5f;
}
.fc .fc-myNext-button {
font-weight: 800 !important;
font-size: 18px !important;
padding: 0 0 0 0 !important;
color: #3f4a5f;
}
.fc .fc-myCurDate-button {
background-color: #fff !important;
border-top: 1px solid #d5dadf;
border-bottom: 1px solid #d5dadf;
border-left: none;
border-right: none;
padding: 0 0 0 0 !important;
width: 92px;
color: #111d34;
pointer-events: none;
}
.fc .fc-myToday-button {
border: none !important;
color: #218df8 !important;
background-color: #fff !important;
}
.fc .fc-button:not(:disabled) {
background-color: #ecedee;
color: #3f4a5f;
border: 1px solid #d5dadf;
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
color: #218df8;
border: none;
background-color: #ecedee;
box-shadow: none;
}
.fc .fc-button-primary:not(:disabled):active:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus {
box-shadow: none;
}
.fc .fc-button-primary:focus {
box-shadow: none;
}
.fc .fc-daygrid-day.fc-day-today {
background-color: #fff !important;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
background-color: #218df8;
border-radius: 4px;
width: 28px;
height: 28px;
overflow: hidden;
color: #ffffff;
}
.fc .fc-highlight {
background: #e6f4ff !important;
}
.fc-theme-standard td, .fc-theme-standard th {
vertical-align: center !important;
border: 1px solid #ddd;
}
.fc th {
height: 48px;
text-align: center;
vertical-align: center !important;
font-weight: normal;
}
.fc .fc-daygrid-day-top {
float: left;
display: flex;
flex-direction: row-reverse;
padding-left: 10px;
padding-top: 10px;
}
.fc .fc-daygrid-day-events {
margin-top: 1px;
padding-left: 10px;
}
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
position: relative;
min-height: 2em;
padding-top: 49%;
font-size: 15px;
}
.fc .fc-event-time {
display: none;
}
.fc-daygrid-dot-event .fc-event-title {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
font-weight: normal !important;
}
.fc .fc-daygrid-dot-event:hover {
background-color: rgba(255, 255, 255, 0);
}
.fc .fc-daygrid-dot-event:focus {
background-color: rgba(255, 255, 255, 0);
}
View Code
2 html
<div class="layui-col-xs7">
<div class="layui-card">
<div class="layui-card-body" id="calendarDiv" style="height: calc(100vh - 50px);overflow: auto">
<div id='calendar'></div>
<button id="btn_date_click" style="display:none;"></button>
</div>
</div>
</div>
View Code
3 js
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
height: 875,
aspectRatio: 1,
selectable: true,
//当点击页面日历以外的位置时，是否自动取消当前的选中状态。
unselectAuto: false,
customButtons: {
myPrev: {
text: '﹤',
click: function () {
calendar.prev();
$('.fc .fc-myCurDate-button').text(formatDateByDate(calendar.getDate()))
}
},
myCurDate: {
text: '-',
},
myNext: {
text: '﹥',
click: function () {
calendar.next();
$('.fc .fc-myCurDate-button').text(formatDateByDate(calendar.getDate()))
}
},
myToday: {
text: '查看今天',
click: function () {
calendar.today();
let dateStr = formatDateByDate(calendar.getDate());
$('.fc .fc-myCurDate-button').text(dateStr);
let date = calendar.getDate().getDate();
if (date < 10) {
date = '0' + date;
}
funcDateClick(dateStr + "-" + date);
calendar.select(dateStr + "-" + date);
}
}
},
headerToolbar: {
left: '',
center: 'myPrev,myCurDate,myNext myToday',
right: ''
},
buttonText: {
//prev:'上个月',
today: '查看今天',
//next: '下个月'
},
locale: "zh-cn",
titleFormat: function (obj) {
if ((obj.date.month + 1) < 10) {
return obj.date.year + '-' + '0' + (obj.date.month + 1);
}
return obj.date.year + '-' + (obj.date.month + 1);
},
dayCellContent: function (obj) {
let content = obj.dayNumberText.substr(0, obj.dayNumberText.length - 1);
let length = obj.dayNumberText.substr(0, obj.dayNumberText.length - 1).length;
if (length < 2) {
return '0' + content;
}
return content;
},
dateClick: function (info) {
funcDateClick(info.dateStr);
},
select: function (info) {
},
events: { // 请求数据库数据，获取json数据
url: compileUrl('${rc.contextPath}/appointment/queryAppointList'),
method: 'POST',
extraParams: {
custom_param1: '1',
},
failure: function () {
alert('加载失败!');
},
textColor: '#111d34'
},
eventOverlap: function (stillEvent, movingEvent) {
return stillEvent.allDay && movingEvent.allDay;
},
eventClick: function (calEvent) {
calendar.select(calEvent.event.startStr);
funcDateClick(calEvent.event.startStr);
}
});
calendar.render();
$('.fc .fc-myCurDate-button').text(formatDateByDate(calendar.getDate()))
});
//获取yyyy-mm的日期
function formatDateByDate(value) {
let year = value.getFullYear();
let month = '' + (value.getMonth() + 1);
if (month < 10) {
month = '0' + month;
}
return year + '-' + month;
}
//日历天点击事件
function funcDateClick(id) {
if (id == null || id === '' || id === 'undefined') {
return;
}
clickDate = id.substring(0, 10);
$('#btn_date_click').click();
}
//修改某个event的css
function updateCalendarEventCss(event) {
if (event === null) {
return;
}
event.setProp('backgroundColor', 'rgba(230, 244, 255, 0)!important');
event.setProp('borderColor', 'none!important');
}
View Code
注：event请求返回的数据格式为json串；
4 实现效果
参考博文：https://www.cnblogs.com/czk1634798848/p/13386178.html
https://blog.51cto.com/u_15230485/2822983
标签：function,控件,日程,color,FullCalendar,button,fc,important,calendar From： https://www.cnblogs.com/daytoy105/p/16710922.html