javascript - 如何在此日历假日选择器中切换或检查 deleteEvent 和 saveEvent？

Question

我有一个页面，我可以在其中可视化日历，如果我单击某一天将保存为假期并显示为红色，如果我现在右键单击它，我会得到这个菜单来删除它。我希望，如果我再次单击假期数字，则在没有此菜单的情况下恢复正常。我是 ajax 新手，所以我真的不太了解这里发生了什么。'''

$(function() {
        var currentYear = new Date().getFullYear();
        $('#calendar').calendar({
            enableContextMenu: true,
            style: 'custom',
            dataSource: [
            ],
            contextMenuItems:[
                {
                    text: 'Eliminar',
                    click: deleteEvent
                }
            ],
            customDataSourceRenderer: function(element, date, events) {
                $(element).css('background-color', 'red');
                $(element).css('color', 'white');
                $(element).css('border-radius', '15px');
            }
        });

        // RELLENAR EL CALENDARIO
        var dataSource = $('#calendar').data('calendar').getDataSource();
        @foreach ($festivos as $festivo)
            var parts = '{{$festivo->date}}'.split('-');
            // Please pay attention to the month (parts[1]); JavaScript counts months from 0:
            // January - 0, February - 1, etc.
            var mydate = new Date(parts[0], parts[1] - 1, parts[2]);
            var event = {
                id: {{$festivo->id}},

                startDate: mydate,
                endDate: mydate
            }
            dataSource.push(event);
        @endforeach 
        $('#calendar').data('calendar').setDataSource(dataSource);

        $('#calendar').clickDay(function(e){
            var date = e.date;
            var day = date.getDate();
            var month = date.getMonth()+1;
            var year = date.getFullYear();
            var id;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ url('/admin/festivos/store') }}",
                method: 'post',
                data: {
                    day : day,
                    month : month,
                    year : year
                },
                success: function(result){
                    saveEvent(result, e.date);
                }
            });
        });

        function deleteEvent(event) {
            var dataSource = $('#calendar').data('calendar').getDataSource();

            for(var i in dataSource) {
                if(dataSource[i].id == event.id) {
                    dataSource.splice(i, 1);
                    break;
                }
            }

            $('#calendar').data('calendar').setDataSource(dataSource);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ url('/admin/festivos/destroy') }}",
                method: 'post',
                data: {
                    id : event.id
                },
                success: function(result){

                }
            });


        }


        function saveEvent(id, date) {
            var event = {
                id: id,
                name: 'acción',
                startDate: date,
                endDate: date
            }

            var dataSource = $('#calendar').data('calendar').getDataSource();

            dataSource.push(event);

            $('#calendar').data('calendar').setDataSource(dataSource);
        }

        });

标签： javascriptajaxdatepicker