javascript - Full Calendar Destroy event - Stack Overflow

admin管理员组

文章数量:1410712

I have one click event and inside of it I am reloading the fullcalendar. But after the reloading I would like to hide current element on which the click event is performed. But somehow its not working. Below is my code.

 $(document).on("click", 'a.btnExpandCollapseBook', function (e) {
       $('#calendar2').fullCalendar('destroy');
       calendarOptions.events = tempSourcearr; // assigning the events
       $('#calendar2').fullCalendar(calendarOptions);
       $(this).hide();// This is not working...
 });

I have one click event and inside of it I am reloading the fullcalendar. But after the reloading I would like to hide current element on which the click event is performed. But somehow its not working. Below is my code.

 $(document).on("click", 'a.btnExpandCollapseBook', function (e) {
       $('#calendar2').fullCalendar('destroy');
       calendarOptions.events = tempSourcearr; // assigning the events
       $('#calendar2').fullCalendar(calendarOptions);
       $(this).hide();// This is not working...
 });

• javascript
• jquery
• fullcalendar

Share Improve this question Follow asked Dec 5, 2015 at 6:08 Rakesh AngreRakesh Angre 25511 gold badge44 silver badges1212 bronze badges 2

• You need to search through the array of events and remove the current event before assigning the events again.. Also, how do you get the currently clicked event? – VisualBean Commented Dec 7, 2015 at 10:32
• Out of curiousity, why are you wanting to destroy and re-initialize the calendar upon event click? – smcd Commented Dec 7, 2015 at 16:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You can add a custom property, example 'hidden' true/false, to the event and use eventRender to control the visibility based off the 'hidden' property

http://jsfiddle/hmspswu3/

var calendarOptions = {
  defaultDate: '2015-12-01',
  events: [{
    id: 1,
    start: '2015-12-03',
    end: '2015-12-07',
    title: 'Event 1',
    hidden: false
  }, {
    id: 2,
    start: '2015-12-13',
    end: '2015-12-17',
    title: 'Event 2',
    hidden: false
  }],
  eventRender: function(event, element, view) {
    return !event.hidden;
  },
  eventClick: function(event, jsEvent, view) {
    event.hidden = true;
    calendarOptions.events = $('#calendar').fullCalendar('clientEvents');
    $('#calendar').fullCalendar('destroy');
    $('#calendar').fullCalendar(calendarOptions);
  }
};

$('#calendar').fullCalendar(calendarOptions);

Thanks for Every one, I found the alternative solution for this as below.

 $.each($('#calendar2').fullCalendar('clientEvents'), function (i, item) {
     $('#calendar2').fullCalendar('removeEvents', item.id);
    }); // removes the event one by one
 $('#calendar2').fullCalendar('addEventSource', tempSourcearr); // assign the new data source.

For destroying use :

$('#calendar2').fullCalendar('destroy');

本文标签： javascriptFull Calendar Destroy eventStack Overflow