fullcalendar实现日历坐标系

fullcalendar 是一个基于 jQuery 的日历插件，它可以用来显示事件、任务和其他日期相关的信息。如果你想在 fullcalendar 中实现一个日历坐标系，可以通过以下步骤来操作：

1. 在 fullcalendar 中创建一个日历。

$('#calendar').fullCalendar({
    // 设置日历的配置参数
    // ...
});

2. 通过 fullcalendar 提供的 API，创建一个坐标系。

$('#calendar').fullCalendar({

    // 设置日历的配置参数
    // ...

    // 在日历上添加一个坐标系
    viewRender: function(view, element) {
        // 获取日历的容器元素
        var calendarEl = element.find('.fc-view-container');

        // 创建一个坐标系容器元素
        var coordEl = $('<div class="coord-container"></div>');

        // 将坐标系容器元素添加到日历容器元素中
        calendarEl.prepend(coordEl);

        // 在坐标系容器元素中添加坐标系
        for (var i = 0; i < 24; i++) {
            var coordItem = $('<div class="coord-item">' + i + ':00</div>');
            coordEl.append(coordItem);
        }
    }
});

3. 通过 CSS 样式调整坐标系的位置和样式。

.coord-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50px;
    background-color: #f2f2f2;
}

.coord-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

这样，就可以在 fullcalendar 中实现一个简单的日历坐标系了。