locked
Dropdown button is not working on each date cell of fullcalendar mvc c# javascript RRS feed

  • Question

  • User1878001738 posted

    Hi,

    I am using fullcalendar in my web project. What I need to do is to add dropdown list on each dates of fullcalendar. (see this link - https://imgur.com/ApH2JTP).

    When I try to add the dropdown outside of the fullcalendar, it works well. But when I tried to add inside each date cell of fullcalendar, dropdown is not opening and displaying upon click event.

    JAVASCRIPT
    
    $('#calendarSchedule').fullCalendar({
        dayRender: function (date, cell) {
        cell.append('<div class="dropdown manage_schedule">' +
                                        '<a class= "dropdown-toggle btn-link" data-toggle="dropdown" style="cursor:pointer;" >...</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>');
        }
    });

    What is the caused of this? Can someone help me out? 

    Tuesday, November 19, 2019 2:53 AM

Answers

  • User-719153870 posted

    Hi loraine26,

    dayRebder event will append your <a> to wrong places in your case.

    You should use the eventAfterAllRender event which you can refer to FullCalendar adding data-date at tbody td on the div with a class of fc-content-skeleton and also below demo:

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>CalendarDDLDemo</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.js"></script>
        <script src="~/Scripts/fullcalendar/fullcalendar.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script>
            $(function () {
                $('#calendarSchedule').fullCalendar({
                    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 manage_schedule">' +
                                    '<a class= "dropdown-toggle btn-link" data-toggle="dropdown" style="cursor:pointer;" >...</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>');
                            });
                        });
                    },
                });
            })
        </script>
    </head>
    <body>
        <div class="dropdown manage_schedule">
            <a class="dropdown-toggle btn-link" data-toggle="dropdown" style="cursor:pointer;">...</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>
    
        <div id="calendarSchedule">
        </div>
    </body>
    </html>

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 19, 2019 5:56 AM