日历插件Fullcalendar使用

<div class="layui-body-header">
    <div id='calendar'></div>
</div>

$(function() {
    var data_ri = [];
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        defaultDate: '2019-11-12',
        navLinks: true,
        businessHours: true,
        editable: true,
        locale:'zh-cn',
    });
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "xxxxxxxxx",
        data: "",
        success: function(data) {
            data_ri = [];
            for (var i = 0; i < data.data.length; i++) {

                var obj = {
                    title: data.data[i].TITLE,
                    start: data.data[i].STARTD,
                    end: data.data[i].END,
                };
                data_ri.push(obj);
            }
            // console.log(data_ri);
            calendar.addEventSource(data_ri);
            calendar.render();
        }
    });




});

猜你喜欢

转载自blog.csdn.net/wangjunren1/article/details/103120832