在javascriptfullcalendar中顯示所有過去的資料并隱藏所有未來的資料

正如您在這個 javascript fullcalendar 代碼中看到的那樣，我想在標題中顯示所有過去的資料，并在 fullcalendar 標題中隱藏所有未來的資料。未來的資料將在其日期顯示。我是初學者，你能幫我看看如何在標題中隱藏未來的資料。謝謝。

        var calendar = new FullCalendar.Calendar( calendarEl, {
         headerToolbar: {
               left:   'title',
               center: '',
               right:  'prev,next'
            },
             initialDate: '2022-04-01',
            dayMaxEvents: true, 
            events: [
                
                {
                    title: '8',
                    start: '2022-04-13',
                },
                {
                    title: '9',
                    start: '2022-04-14',
                },
                {
                    title: '6',
                    start: '2022-04-15',
                },
                {
                    title: '4',
                    start: '2022-04-18',
                },
                {
                    title: '6',
                    start: '2022-04-19',
                },
                    {
                    title: '3',
                    start: '2022-04-20',
                },
                {
                    title: '3',
                    start: '2022-04-21',
                },
                {
                    title: '3',
                    start: '2022-04-22',
                },
                {
                    title: '3',
                    start: '2022-04-25',
                },
                {
                    title: '3',
                    start: '2022-04-26',
                },
                {
                    title: '3',
                    start: '2022-04-27',
                }
            
    
                
            ]
        });

uj5u.com熱心網友回復：

用于Array.prototype.filter過濾從現在開始的事件。

var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
        left: 'title',
        center: '',
        right: 'prev,next'
    },
    initialDate: '2022-04-01',
    dayMaxEvents: true,
    events: [
        {
            title: '8',
            start: '2022-04-13',
        },
        {
            title: '9',
            start: '2022-04-14',
        },
        {
            title: '6',
            start: '2022-04-15',
        },
        {
            title: '4',
            start: '2022-04-18',
        },
        {
            title: '6',
            start: '2022-04-19',
        },
        {
            title: '3',
            start: '2022-04-20',
        },
        {
            title: '3',
            start: '2022-04-21',
        },
        {
            title: '3',
            start: '2022-04-22',
        },
        {
            title: '3',
            start: '2022-04-25',
        },
        {
            title: '3',
            start: '2022-04-26',
        },
        {
            title: '3',
            start: '2022-04-27',
        }
    ].filter(event => new Date(event.start).getTime() < Date.now())
});

您還可以將此操作重構為一個函式，如下所示：

function filterFutureEvents(events) {
   return events.filter(event => new Date(event.start).getTime() < Date.now());
}

// usage
const fileteredEvents = filterFutureEvents([/* ... */]);

標籤：javascript

上一篇：將新的鍵值對映射到物件陣列中

下一篇：從javascript物件中提取陣列