Fullcalendar dayClick sends multiple ajax requests

I use Fullcalendar v3 with Django. and I have an issue with dayClick. when I click a day, a modal opens that while submitting sends an ajax request to the backend. the problem is that when I click and then click another day, it sends two ajax requests and so on.

I search for the issue, and i found that an event handler stores the requests when day clicks and then submit all. but i couldn't solve my issue.

here is the dayclick code:

       dayClick: function(date) {
            var cell = $(this);
            weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
            clicked_date = new Date(date);
            var clicked_day_name = weekday[clicked_date.getDay()];
            $('#schedule_modal').on('show.bs.modal', function (event) {
                modal = $(this)
                modal.find('#schedule_modal_title').text('Schedule your ' + clicked_day_name)
                modal.find('#only_this_day').text('Only this ' + clicked_day_name)
                modal.find('#include_other_days').text('With upcoming ' + clicked_day_name + 's to: ')
            });
            $('#schedule_modal').modal('show'); 
            $('.dropdown-menu').addClass('d-none');

            $('#submit_day_schedule').on('click', function () {
                if ($('#only_this').is(':checked')) {
                    schedule_option = $('#only_this').val();
                } else {
                    schedule_option = $('#schedule_option_date').val();
                }
                data = {
                    'day_schedule': $('#day_schedule_select option:selected').val(),
                    'day': moment(date).format('YYYY-MM-DD'),
                    'schedule_option': schedule_option,
                };
                $('#schedule_modal').modal('hide');
                $.ajax({
                    headers: {
                        'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()
                    },
                    type: 'POST',
                    url: "{% url 'test_url' option=option %}",
                    data: data,
                    success: function (response) {
                        cell.css('background-color', 'red');
                        $('#day_schedule_form').trigger('reset');
                        showNotification('bg-success', response.message);
                    },
                    error: function (response) {
                        showNotification('bg-warning', response.message);
                    } 
                });
            });
        },

This:

$('#schedule_modal').on('show.bs.modal', function (event) {

...creates a new event handler for the "shown" event every time you click on a day. And since you never remove any of the previous event handlers, it means that they all run every time the modal is shown. So if you click on a day 3 times, you get 3 copies of the "shown" event handler registered, and thus that function will run 3 times whenever the modal is shown.

It's the same with

$('#submit_day_schedule').on('click', function () {

too. Either remove any previous handlers using .off(), or register the handlers once outside fullcalendar.