
        <!-- Begin page -->
        <div id="wrapper">

                    <!-- Start Content-->
                    <div class="container-fluid">
                        
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box page-title-box-alt">
                                    <h4 class="page-title">Calendar</h4>
                                </div>
                            </div>
                        </div>     
                        <!-- end page title --> 

                        <div class="row">
                            <div class="col-12">

                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="">
                                                <div id="external-events" class="m-t-20">
                                                    <br>
                                                </div>

    
                                            </div> <!-- end col-->

                                            <div class="col-lg-12">
                                                <div class="mt-4 mt-lg-0">
                                                    <div id="calendar"></div>
                                                </div>
                                            </div> <!-- end col -->

                                        </div>  <!-- end row -->
                                    </div> <!-- end card body-->
                                </div> <!-- end card -->

                                <!-- Add New Event MODAL -->
                                <div class="modal fade" id="event-modal" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header py-3 px-4 border-bottom-0 d-block">
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">&times;</button>
                                                <h5 class="modal-title" id="title">Manage Availability</h5>
                                            </div>
                                            <div class="modal-body px-4 pb-4 pt-0">
                                                <form class="needs-validation" name="event-form" id="form-event" novalidate>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label class="control-label">Leave Reason</label>
                                                                <input class="form-control" placeholder="Leave Reason"
                                                                    type="text" name="title" id="event-title" required />
                                                                <div class="invalid-feedback">Please provide a valid reason</div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <label class="control-label">Category</label>
                                                                <select class="form-control custom-select" name="category"
                                                                    id="event-category" required>
                                                                    <option value="">--select--</option>
                                                                    <option value="1">Leave   ( Full Day )</option>
                                                                    <option value="2">Halfday ( First half)</option>
                                                                    <option value="3">Halfday ( Second half)</option>
                                                                </select>
                                                                <div class="invalid-feedback">Please select a valid category</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-2">
                                                        <div class="col-6">
                                                            <button type="button" class="btn btn-danger" id="btn-delete-event">Delete</button>
                                                        </div>
                                                        <div class="col-6 text-right">
                                                            <button type="button" class="btn btn-light mr-1" data-dismiss="modal">Close</button>
                                                            <button type="submit" class="btn btn-success" id="btn-save-event">Save</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div> <!-- end modal-content-->
                                    </div> <!-- end modal dialog-->
                                </div>
                                <!-- end modal-->
                            </div>
                            <!-- end col-12 -->
                        </div> <!-- end row -->
                        
                    </div> <!-- container-fluid -->


            <!-- ============================================================== -->
            <!-- End Page content -->
            <!-- ============================================================== -->


        </div>
        <!-- END wrapper -->
        <input id="db_data" name="attachments" type="hidden">
        <input id="ins_db_data" name="attachmentsdata" value="" type="hidden">
        <button type="hidden" id="butn"></button>

        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>
<script>
attachArray = [
        {
            title: 'demo', 
            start: new Date('Sat May 20 2023 10:45:53 GMT+0530 (India Standard Time)'),
            allDay: true, 
            className: '2'
        },
        {
            title: 'demo2', 
            start: new Date('Sat May 20 2023 10:45:53 GMT+0530 (India Standard Time)'),
            allDay: true, 
            className: '1'
        }
    ];
$('[name=attachments]').val(JSON.stringify(attachArray));


$('#butn').click(function(){
 alert($('#ins_db_data').val())
});

// $(document).ready(function(){

//     // $('.fc-today-button').hide();
//     // $('.fc-next-button').hide();
//     // $('.fc-dayGridMonth-button').hide();
//     $('.fc-timeGridWeek-button').hide();
//     $('.fc-timeGridDay-button').hide();
//     // $('.fc-listMonth-button').hide();
//     $('.fc-prev-button').hide();
// });

// setTimeout(() => {
//     $('.fc-listMonth-button').click(function(){
//     $('.fc-timeGridWeek-button').hide();
//     $('.fc-timeGridDay-button').hide();
//     $('.fc-prev-button').hide();
// });
// }, 1000);

// setTimeout(() => {
//     $('.active').click(function(){
//     alert()
//     $('.fc-timeGridWeek-button').hide();
//     $('.fc-timeGridDay-button').hide();
//     $('.fc-prev-button').hide();
// });
// }, 1000);
</script>
