</div>
                </main>
                <footer class="py-4 bg-light mt-auto">
                    <div class="container-fluid px-4">
                        <div class="d-flex align-items-center justify-content-between small">
                            <div class="text-muted">Copyright &copy; IT Elective 2 2024</div>
                            <div>
                                <a href="#">Privacy Policy</a>
                                &middot;
                                <a href="#">Terms &amp; Conditions</a>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="js/scripts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
        <script src="assets/demo/chart-area-demo.js"></script>
        <script src="assets/demo/chart-bar-demo.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>

        <script src="js/datatables-simple-demo.js"></script>
        <script src="<?=base_url()?>asset/js/jquery-3.2.1.slim.min.js"></script>
        <script src="<?=base_url()?>asset/js/vendor/popper.min.js"></script>
        <script src="<?=base_url()?>asset/js/bootstrap.min.js"></script>
        <script src="<?=base_url()?>asset/js/vendor/holder.min.js"></script>
        <script src="<?=base_url()?>asset/js/offcanvas.js"></script>
        <script src='<?=base_url()?>assets/dist/index.global.js'></script>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                var calendarEl = document.getElementById('calendar');

                var events = <?php echo json_encode($data)?>;
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialDate: "<?=date('Y-m-d')?>",
                    editable: true,
                    selectable: true,
                    businessHours: true,
                    dayMaxEvents: true, // allow "more" link when too many events
                    events: events,
                    eventClick: function(info) {
                        window.location = "http://localhost/elective/visitor_portal/member_status/" + info.event.title;
                        info.el.style.borderColor = 'red';
                      }
                });

                calendar.render();
            });

    </script>
    </body>
</html>
