Dropdown button is not working on each date cell of fullcalendar mvc c# javascript [Answered]RSS

1 reply

Last post Nov 19, 2019 05:56 AM by Yang Shen

‹ Previous Thread|Next Thread ›

Shortcuts

loraine26

Member

18 Points

41 Posts

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

Nov 19, 2019 02:53 AM|loraine26|LINK

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?

Yang Shen

Contributor

2260 Points

733 Posts

Re: Dropdown button is not working on each date cell of fullcalendar mvc c# javascript

Nov 19, 2019 05:56 AM|Yang Shen|LINK

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

‹ Previous Thread|Next Thread ›