I am using the JavaScript calendar https://fullcalendar.io/. and want to show only selected dates and disable all other dates.

I tried using "validRange" which accepts only start and end, but it doesn't accept array of dates.

Please help

following is my code

<link href="<?php echo base_url(); ?>assets/fullcalendar/main.css" rel="stylesheet" type="text/css">
<script src="<?php echo base_url(); ?>assets/fullcalendar/main.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var today = new Date().toISOString().slice(0, 10);
        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                // right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                right: 'dayGridMonth'
            },
            
            initialDate: '<?php echo date("Y-m-d"); ?>',
            navLinks: false, // can click day/week names to navigate views
            businessHours: true, // display business hours
            editable: true,
            selectable: true,

            validRange:{
                
                
                start:'2022-08-27',
                end:'2022-08-30',

                
            },

            // events: []
            events: <?php echo $event; ?>
            
        });
        calendar.render();
    });
</script>