Display all past data and hide all future data in javascript fullcalendar-CodePudding

As you can see in this javascript fullcalendar code, I want to display all past data in title and hide all future data in fullcalendar title.. the future data will show on its date. I'm beginner can you help me that how to hide future data in title. Thanks.

        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',
                }
            
    
                
            ]
        });

CodePudding user response：

Use Array.prototype.filter to filter events starting after now.

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

You can also refactor this operation into a function like so:

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

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