完整日历事件背景更改

时间:2018-03-17 20:01:11

标签: javascript jquery javascript-events fullcalendar

Calendar Image

POPUP Image 我正在使用完整的日历最新版本并成功显示事件作为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 */
                    }
                  }
            });

        });

2 个答案:

答案 0 :(得分:0)

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

/* 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');
             });

答案 1 :(得分:0)

最好在像

这样的代码中成功使用重新获取事件
       var calendar=$('#calendar').fullCalendar();    
       calendar.fullCalendar('refetchEvents');