locked
Dropdown inside fullcalendar date cell appears broken or behind the cell mvc c# javascript RRS feed

  • Question

  • User1878001738 posted

    Hi

    This concern is related to the fullcalendar I am using. In my fullcalendar, I have added a dropdown list inside each date cell in order to manage each date. But the whenever the dropdown is clicked, it appears broken or behind the date cell (see this image). I already used z-index: 9999 in order to put the dropdown in front of fullcalendar but still nothing happens.

    Another thing is, how can I click the dropdown only without affecting the "select" property of fullcalendar? Because I also have a different function everytime the date is selected. It both fires the function I created in select property and the opening of dropdown whenever the cell is clicked.

    JAVASCRIPT
    $('#calendarSchedule').fullCalendar({
                contentHeight: 500,
                defaultDate: new Date(),
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month, agendaWeek, agendaDay, listWeek'
                },
                navLinks: true,
                eventLimit: true,
                eventColor: '#2CB05B',
                droppable: false,
                timeFormat: 'h(:mm)A',
                timeZone: 'local',
                selectable: true,
                editable: false,
                resizable: false,
    
                //Select date to add appointment
                select: function (selected_date) {
                    var sel_date = selected_date.format('MM/DD/YYYY');
                    var now = moment().format("MM/DD/YYYY");
                    var checkDay = new Date(selected_date);
    
                    if (sel_date < now && sel_date != now) {
                        $('#modalPastDateValidation').modal('show').on('shown.bs.modal', function () { });
                        return false;
                    }
                    else {
                        ModalForPatientTypeSelection(sel_date);
                    }
                },
    
                //Dropdown list inside the date cell
                eventAfterAllRender: function (view) {
                    var row, cell;
                    $('.fc-content-skeleton').each(function (i) {
                        row = $(this);
                        $('thead td', row).each(function (k) {
                            cell = $(this);
                            cell.append('<div class="dropdown" style="" id="customDropdown">' +
                                            '<a class= "dropdown-toggle btn-link" data-toggle="dropdown" style="cursor:pointer;color:#a5a5a5;font-weight:400;font-size:12px;">&nbsp;<span class="fa fa-ellipsis-h"></span></a >' +
                                            '<div class="dropdown-menu">' +
                                                '<h6 class="dropdown-header">Manage Schedule</h6>' +
                                                '<div class="dropdown-divider"></div>' +
                                                '<a class="dropdown-item" href="#" style="cursor:pointer;" id="">Close</a>' +
                                                '<a class="dropdown-item" href="#" style="cursor:pointer;" id="">Open</a>' +
                                                '<a class="dropdown-item" href="#" style="cursor:pointer;" id="">Override</a>' +
                                            '</div>' +
                                        '</div>');
                        });
                    });
                }
    
    });
    
    function ModalForPatientTypeSelection(selectedDate) {
            $('#modalPatientTypeSelection').modal('show').on('shown.bs.modal', function (event) {
                $("#selected_date").val(selectedDate);
            });
        }
    

    Can someone help me with this? Thanks in advance.

    Tuesday, November 26, 2019 1:07 AM

Answers

  • User665608656 posted

    Hi loraine,

    This concern is related to the fullcalendar I am using. In my fullcalendar, I have added a dropdown list inside each date cell in order to manage each date. But the whenever the dropdown is clicked, it appears broken or behind the date cell (see this image). I already used z-index: 9999 in order to put the dropdown in front of fullcalendar but still nothing happens.

    Because the div where the fullcalendar is located is currently in the outermost layer, when you add dropdown events after the calendar rendering is completed, dropdown will always be under the fullcalendar, so you cannot see the full dropdown.

    To solve this issue, I suggest that you use the custom dropdown to display menu through the click event judgment.

    And you can control dropdown in the outer layer of the fullcalendar by setting the z-index of the corresponding div.

    Another thing is, how can I click the dropdown only without affecting the "select" property of fullcalendar? Because I also have a different function everytime the date is selected. It both fires the function I created in select property and the opening of dropdown whenever the cell is clicked.

    For this issue, I suggest you not use select method, but use dayClick method, because you can judge the current mouse click position through the offsetX and offsetY properties of jsEvent in dayclick, so as to control the dropdown and pop-up box display separately.

    Here is the full code, you can refer to it:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <link href="../Content/fullcalendar.min.css" rel="stylesheet" /> 
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script src="../Scripts/moment.min.js"></script>
        <script src="../Scripts/umd/popper.min.js"></script>
        <script src="../Scripts/fullcalendar.min.js"></script>
        <script src="../Scripts/bootstrap.min.js"></script> 
    
        <script type="text/javascript">
            $(function () {
                $('#calendarSchedule').fullCalendar({
                    contentHeight: 500,
                    defaultDate: new Date(),
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month, agendaWeek, agendaDay, listWeek'
                    },
                    navLinks: true,
                    eventLimit: true,
                    eventColor: '#2CB05B',
                    droppable: false,
                    timeFormat: 'h(:mm)A',
                    timeZone: 'local',
                    selectable: true,
                    editable: false,
                    resizable: false,
                    
    //Select date to add appointment dayClick: function (selected_date, jsEvent) { if (jsEvent.offsetX > 15 || jsEvent.offsetY > 15) { var sel_date = selected_date.format('MM/DD/YYYY'); var now = moment().format("MM/DD/YYYY"); var checkDay = new Date(selected_date); if (sel_date < now && sel_date != now) { $('#modalPastDateValidation').modal('show').on('shown.bs.modal', function () { }); return false; } else { ModalForPatientTypeSelection(sel_date); } } }, //Dropdown list inside the date cell eventAfterAllRender: function (view) { var row, cell; $('.fc-content-skeleton').each(function (i) { row = $(this); $('thead td', row).each(function (k) { cell = $(this); cell.append('<span class="showmenu" style="cursor:pointer"> &#9662;</span>'); }); }); } }); $("body").on('click', function (e) { var element = e.target.className; if (element !== 'showmenu') { $("#menu").css('display', 'none'); } else { $("#menu").css('display', 'block'); var d = document.getElementById('contentMenu'); d.style.position = "absolute"; d.style.left = e.pageX + 'px'; d.style.top = e.pageY + 'px'; } }); });
    function ModalForPatientTypeSelection(selectedDate) { $('#modalPatientTypeSelection').modal('show').on('shown.bs.modal', function (event) { $("#selected_date").val(selectedDate); }); } </script>
    <style> #menu { ; z-index: 10;
    display: none; } #calendarSchedule { width: 800px; ; z-index: 1; } </style> </head> <body> <form id="form1" runat="server"> <div id="calendarSchedule"></div>

    <!-- dropdown menu --> <div id="menu" style="display: none"> <div class="dropdown-menu" style="display: block" id="contentMenu"> <h6 class="dropdown-header">Manage Schedule</h6> <a class="dropdown-item" href="#">Close</a> <a class="dropdown-item" href="#">Open</a> <a class="dropdown-item" href="#">Override</a> </div> </div> <!-- Modal --> <div class="modal fade" id="modalPatientTypeSelection" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> </div> <div class="modal-body">
    <div class="active-pink-3 active-pink-4 mb-4">
    <input class="form-control" type="text" aria-label="Search" id="selected_date" />
    </div>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-primary" id="Add">Add</button>
    </div> </div> </div> </div> </form> </body> </html>

    Here is the work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 27, 2019 9:30 AM