simple-timeline

option: {
}
                

option: {
    progress: true,
    currentLabel: "Current"
}
                

option: {
    progress: true,
    progressInverted: true,
    currentLabel: "Today"
}
                

var now = new Date();
var day = 60 * 60 * 24 * 1000;
var items = [];
for (var i = -2; i < 3; i++) {
    var item = {
        "date": new Date(now.getTime() + (i * day)),
        "title": "Item " + i,
        "content": "Item " + i
    };

    items.push(item);
}

const stlAutoProgress = new SimpleTimeline(document.getElementById("timeline-container"), {
    option: {
        progress: true,
        autoProgress: true,
        currentLabel: "今日"
    },
    items: items
});
                

option: {
    progress: true,
    autoProgress: true,
    currentLabel: "現在時刻",
    dateFormatter: function (date) {
        return date.toLocaleString();
    },
    itemStateFactory: function (item, renderDate) {
        const isCurrent = item.date.getFullYear() === renderDate.getFullYear() &&
            item.date.getMonth() === renderDate.getMonth() &&
            item.date.getDate() === renderDate.getDate() &&
            item.date.getHours() === renderDate.getHours();

        if (isCurrent) {
            return "current";
        } else if (renderDate.getTime() > item.date.getTime()) {
            return "passed";
        }
        return "schedule";
    }
}
                

option: {
    linePosition: "center"
}
                

option: {
    linePosition: "right"
}
                

new SimpleTimeline(document.getElementById("timeline-container-3"), {
    option: {
    },
    items: [
        {
            date: "2022-01-01",
            title: "Custom style item",
            content: "Custom style item",
            option: {
                backgroundColor: "white",
                fontColor: "green",
                borderColor: "green"
            }
        },
        {
            date: "2022-01-02",
            title: "Custom style item",
            content: "Custom style item",
            option: {
                backgroundColor: "white",
                fontColor: "blue",
                borderColor: "blue"
            }
        },
        {
            date: "2022-01-03",
            title: "Custom style item",
            content: "Custom style item",
            option: {
                backgroundColor: "white",
                fontColor: "red",
                borderColor: "red"
            }
        },

    ]
});
                

<div id="timeline-container">
    <template>
        <!-- Fomantic-UI card -->
        <div class="ui red card">
            <div class="content">
                <span data-st-title class="header">Item title</span>
                <span data-st-datetime class="meta">Item date</span>
                <div data-st-content class="description">Item content</div>
            </div>
        </div>
    </template>
</div>
                

option: {
    header: {
        label: "Header"
    },
    footer: {
        label: "Footer"
    }
}
                

const stlContent = new SimpleTimeline(document.getElementById("timeline-container-content"), {
    option: {
    },
    items: [
        {
            date: "2022-01-01",
            title: "Only title",
        },
        {
            date: "2022-01-02",
            content: "Only content",
        }
    ]
});
                

option: {
    dateFormatter: function(date) {
        return date.toISOString();
    }
}
                

option: {
    itemComparator: SimpleTimeline.itemDateDescComparator
}