如何为jquery.schedule添加随滚动同步的当前时间线指示器

问题核心 #

要实现当前时间线随时间轴滚动同步移动，关键是把时间线指示器放在插件的横向滚动容器内部，而非外层容器。原代码将时间线插入到#schedule外层，导致滚动时无法同步，需调整插入位置与计算逻辑。

解决方案 #

1. 将时间线插入到.sc_data（插件的滚动容器）中，使其随容器滚动同步位移
2. 替换硬编码的位置计算值，基于插件配置动态计算时间偏移
3. 调整CSS样式，确保时间线在日程区域内正确显示

修改后的代码 #

HTML（无需改动）

<div class="container">
    <div style="padding: 0 0 40px;">
        <div id="schedule"></div>
    </div>
</div>

CSS

body {
    padding-top: 60px;
    /* 60px让容器延伸到顶部导航栏下方 */
}

#schedule .sc_bar_insert {
    background-color: #ff678a;
}

#schedule .example2 {
    background-color: #3eb698;
}

#schedule .example3 {
    color: #2c0000;
    font-weight: bold;
    background-color: #c7ae50;
}

#schedule .sc_bar.sc_bar_photo .head,
#schedule .sc_bar.sc_bar_photo .text {
    padding-left: 60px;
}

#schedule .sc_bar.sc_bar_photo .photo {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 35px;
}

#schedule .sc_bar.sc_bar_photo .photo img {
    max-width: 100%;
    border-radius: 50px;
}

#current-time-line {
    position: absolute;
    top: 60px; /* 对应插件配置的timeLineY值 */
    bottom: 20px; /* 对应插件配置的verticalScrollbar值 */
    width: 2px;
    background-color: red;
    z-index: 1000;
}

JavaScript

$(function () {
    function updateTimeLine() {
        // 获取当前时间的总分钟数
        var now = new Date();
        var currentMinutes = now.getHours() * 60 + now.getMinutes();
        
        // 测试用：将时间提前1小时
        currentMinutes -= 60;

        // 插件配置的开始时间转总分钟数
        var startTime = "07:00";
        var startMinutes = parseInt(startTime.split(":")[0]) * 60 + parseInt(startTime.split(":")[1]);
        
        // 计算当前时间相对于开始时间的偏移（每小时对应120px，与dataWidth配置一致）
        var hourWidth = 120;
        var position = ((currentMinutes - startMinutes) / 60) * hourWidth;

        // 创建或更新时间线
        var $timeline = $("#current-time-line");
        if ($timeline.length === 0) {
            $timeline = $('<div id="current-time-line"></div>');
            // 将时间线插入到滚动容器.sc_data内部
            $("#schedule .sc_data").append($timeline);
        }

        $timeline.css("left", position + "px");
    }

    var $sc = $("#schedule").timeSchedule({
        startTime: "07:00", // 日程开始时间(HH:ii)
        endTime: "17:00", // 日程结束时间(HH:ii)
        widthTime: 30 * 10, // 时间单元格宽度（示例：10分钟）
        widthTimeX: 10,
        timeLineY: 60, // 时间线高度(px)
        verticalScrollbar: 20, // 滚动条宽度(px)
        timeLineBorder: 2, // 上下边框宽度
        bundleMoveWidth: 6, // 点击时间线单元格后，右侧所有日程移动的宽度
        dataWidth: 120,
        rows: {
            0: {
                title: "Taro",
                subtitle: "Developer",
                schedule: [
                    {
                        start: "08:00",
                        end: "10:00",
                        text: "Meeting",
                        data: {
                            class: "example2",
                            image: "https://cdn.jsdelivr.net/gh/ateliee/jquery.schedule@master/demo/img/1.png",
                        },
                    },
                    {
                        start: "09:30",
                        end: "11:20",
                        text: "Interview(Aika)",
                        data: {
                            class: "example3",
                            image: "https://cdn.jsdelivr.net/gh/ateliee/jquery.schedule@master/demo/img/2.png",
                        },
                    },
                    {
                        start: "13:00",
                        end: "18:00",
                        text: "Go out",
                        data: {},
                    },
                ],
            },
            1: {
                title: "Saito",
                subtitle: "Management",
                schedule: [
                    {
                        start: "08:00",
                        end: "10:00",
                        text: "Meeting",
                        data: {
                            class: "example2",
                            image: "https://cdn.jsdelivr.net/gh/ateliee/jquery.schedule@master/demo/img/1.png",
                        },
                    },
                ],
            },
            2: {
                title: "Daisuke Kato",
                subtitle: "Management",
                schedule: [
                    {
                        start: "11:00",
                        end: "14:00",
                        text: "Go out",
                        data: {
                            image: "https://cdn.jsdelivr.net/gh/ateliee/jquery.schedule@master/demo/img/3.png",
                        },
                    },
                ],
            },
        },
        onAppendSchedule: function (node, data) {
            if (data.data.class) {
                node.addClass(data.data.class);
            }
            if (data.data.image) {
                var $img = $('<div class="photo"><img></div>');
                $img.find("img").attr("src", data.data.image);
                node.prepend($img);
                node.addClass("sc_bar_photo");
            }
        },
    });

    updateTimeLine();
    setInterval(updateTimeLine, 10000);
});

关键修改说明 #

• 插入位置调整：将时间线从#schedule外层改为.sc_data内部，确保随滚动容器同步移动
• 动态位置计算：替换硬编码偏移值，基于开始时间与当前时间的差值计算位置，适配不同时间范围配置
• CSS样式适配：top和bottom值对应插件的timeLineY和verticalScrollbar配置，保证时间线覆盖整个日程区域

内容的提问来源于stack exchange，提问作者Yu Tub