FullCalendar日程管理控件（一）

1 官网

https://fullcalendar.io/

2 参考文档

https://www.cnblogs.com/cnsyear/p/13915215.html    

注：参考文档的版本可能有问题，尽量使用官网中的英文文档，相对比较准确。

3 引入文件

<!--引入-->
<link rel="stylesheet" href="${rc.contextPath}/static/fullcalendar-scheduler/lib/main.css" type='text/css'/>
<script type="text/javascript" src="${rc.contextPath}/static/fullcalendar-scheduler/lib/main.js"></script>

4 css

#calendar {
     max-width: 1100px;
     margin: 20px auto;
}

.fc .fc-toolbar-title {
    font-size: 21px;
    margin: 0;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 12px;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #218df8;
    border: none;
}

.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
     margin-left: -1px;
     border-top-left-radius: 0;
     background-color: #218df8;
     border: none;
}

.fc .fc-button-primary:focus {
     box-shadow: none;
}

.fc .fc-button-primary:not(:disabled):active:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus {
     box-shadow: 0 0 0 0.1rem #218df8;
}

.fc table {
     border-collapse: collapse;
     border-spacing: 0;
     font-size: 21px;
}

.fc .fc-button:disabled {
    opacity: 0.80;
}

.fc .fc-col-header-cell-cushion {
    display: inline-block; /* x-browser for when sticky (when multi-tier header) */
    padding: 2px 4px;
    font-size: 16px;
    font-weight: bold;
}

.fc .fc-daygrid-day-events {
     margin-top: 13px;
     text-align: center;
}

.fc .fc-daygrid-day-top {
    padding-top: 15px;
    padding-right: 36%;
}

.fc-license-message {
    display: none;
}

5 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>

6 js

document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        calendar = new FullCalendar.Calendar(calendarEl, {
            selectable: true,
            //当点击页面日历以外的位置时，是否自动取消当前的选中状态。
            unselectAuto: false,
            headerToolbar: {
                left: 'title',
                center: '',
                right: 'prev,today,next'
            },
            buttonText: {
                //prev:'上个月',
                today: '今天',
                //next: '下个月'
            },
            locale: "zh-cn",
            titleFormat: function (obj) {
                return obj.date.year + '年' + (obj.date.month + 1) + '月';
            },
            dayCellContent: function (obj) {
                let value = new Date(obj.date)
                let year = value.getFullYear();
                let month = '' + (value.getMonth() + 1);
                if (month < 10) {
                    month = '0' + month;
                }
                let date = value.getDate();
                if (date < 10) {
                    date = '0' + date;
                }

                let para = year + '-' + month + '-' + date;

                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) {
            },
            eventSources: [
                {
                    url: compileUrl('${rc.contextPath}/appointment/queryAppointList'),
                    method: 'POST',
                    extraParams: {
                        custom_param1: '1',
                    },
                    failure: function () {
                        alert('加载失败!');
                    },
                    backgroundColor: 'rgba(255, 255,255, 0)',
                    borderColor: 'rgba(255, 255,255, 0)',
                    textColor: 'black'
                }
            ],

            eventClick: function (calEvent) {
                calendar.select(calEvent.event.startStr);
                funcDateClick(calEvent.event.startStr);
            }
        });
        calendar.render();
    });

    //日历天点击事件
    function funcDateClick(id) {
        clickDate = id;
        $('#btn_date_click').click();
        let event = calendar.getEventById(id);
        if (event === null) {
            return;
        }
        updateCalendarEventCss(event);
    }

    //修改某个event的css
    function updateCalendarEventCss(event) {
        event.setProp('backgroundColor', 'rgba(235,248,251,0)');
        event.setProp('borderColor', 'rgba(235,248,251,0)');
    }