日历插件Fullcalendar使用

俊人呀

于 2019-11-18 13:30:14 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/wangjunren1/article/details/103120832

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何利用FullCalendar插件在网页中创建交互式的日程管理界面，包括加载和展示从服务器获取的日程数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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




});