FullCalendar日程管理控件（二）

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);
        }

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>

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');
    }

注：event请求返回的数据格式为json串；

4 实现效果

 

 参考博文：https://www.cnblogs.com/czk1634798848/p/13386178.html

　　　　　 https://blog.51cto.com/u_15230485/2822983