完整的日历事件背景更改答案

【问题标题】：Full Calendar Event background change完整的日历事件背景更改
【发布时间】：2018-03-17 20:01:11
【问题描述】：

我正在使用完整的日历最新版本，并成功地将事件显示为 hain 数据。现在，当我单击事件时，我会显示一个包含事件信息的弹出窗口。

弹出窗口中有一个按钮，我正在更改数据库中该事件的值并通过 AJAX 执行此操作。

现在我想在使用 AJAX 成功提交弹出窗口时更改该事件的背景颜色。

我怎样才能做到这一点？

这是完整日历的代码

            /* Full Calendar */
        jQuery(document).ready(function() {
            var currenturl=window.location.search;
            if(currenturl=='?page=budget_calendar'){
                var ajax_url=calendar_ajax_url.cal_lib; 
            }

            jQuery('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },


                buttonText: {today: 'Today', month: 'Month', agendaWeek: 'Week', agendaDay: 'Day',listWeek:'list'},
                lang: 'us',
                refetch: false,
                firstDay: 1,
                eventLimit: 2, // allow "more" link when too many events
                disableDragging: true,
                eventRender: function(event, element) {             
                        element.find('.fc-title').hide();
                        element.find('.fc-time').hide();
                        element.find('.fc-title').after(
                            jQuery("<div><i class='fa fa-money'></i>"+ event.type +" : <br>" + event.title + "</div>"+"<div></div>"+"<div>Amount :" + event.amount + "</div>")
                        );
                        element.css('border-color','#0040ff');
                        element.css('background-color',event.color);
                        element.click(function () {
                            var event_id=event.id;
                            var event_type=event.type;

                            jQuery.ajax({
                                type:'POST',
                                url:ajax_url+'/assets/lib/lib_calendar_ajax.php',
                                data:{event_type:event_type,event_id:event_id,action:'get_event_details'},
                                success:function(response){
                                    var eventdata=jQuery.parseJSON(response);
                                    if(event.type=='Expense'){
                                        jQuery('#expenseModal').modal('show');                              
                                    }
                                }

                            })
                        });

                },

                events:ajax_url+'/assets/lib/lib_upcoming_calendar.php',

            });
        });

        And on popup button click 
        `$(document).on('click','#button_click',function(){
            var orderid=$(this).data('eventid');
            $.ajax({
                  type:'POST',
                  url:'ajax_responce.php',
                  data: {'orderid':orderid,action:'change_status'},
                  success:function(response){
                   if(response=='done'){
                       /* here i want to change background color of event which i have clicked */
                    }
                  }
            });

        });

【问题讨论】：

使用fullcalendar.io/docs/clientEvents获取事件对象，更改背景颜色并使用fullcalendar.io/docs/updateEvent在日历中更新
嗨 Adyson，但我在完整日历之外使用 ajax 更新代码。如何获取事件以及我使用哪个类或对象来更新它。
您使用其 ID 获取事件。如果您在第一次将事件发送到 fullCalendar 时没有为事件提供 ID，那么您应该这样做。然后很容易再次检索它。但是从您的代码看来，您确实提供了事件 ID，因此您可以轻松地使用它来进行更新。

标签： javascript jquery fullcalendar jquery-events

【解决方案1】：

我刚刚解决了这个问题。我只是通过使用 :-

/* In calendar */
            /* In calendar */
            var temp='';
            eventClick: function(event, element) {    
                 var temp= $(this);
            }

            and 
            /* And jquery on button click */
             $(document).on('click','#save',function(){ 
                temp.css('background-color','red');
             });

【讨论】：

【解决方案2】：

这样的代码在成功时最好使用refetch事件

       var calendar=$('#calendar').fullCalendar();    
       calendar.fullCalendar('refetchEvents');

【讨论】：