title: FullCalendar Control MVC jQuery - Multiple Calendars are being created
body: <p>I am looking to implement the <a href="http://arshaw.com/fullcalendar/" rel="nofollow">FullCalendar</a> control provided by Adam Shaw and have been able to set my defaults and load it with events using JSONResult in my MVC control.  </p>
  
  <p>I have a DropDownList that I wired to JavaScript <code>.change</code>. When the user selects an item from the drop down I want to reload the calendar events based on the drop down selection. </p>
  
  <p>The issue I am having is that a calendar is being created every time the selected dropdown item changes; so if the drop down selection changes 3 times I end up with 3 calendars. </p>
  
  <p>This happens because <code>$('#calendar').fullCalendar</code> is creating another calendar, as it is designed to do. But how do I get it to use the same calendar to reload events based on the selected item in the drop down?</p>
  
  <p>My JsonResult in my MVC Controller</p>
  
  <pre><code>public JsonResult CALStationDayLoad(int AppID)
          {
  
              var events = SL_db.SLGetStationLogFuture(null,AppID);
              var eventList = from e in events
                              select new
                              {
                                  id = e.ID,
                                  title = e.ShortDesc,
                                  start = e.StartTime.ToString("s"),
                                  end = e.EndTime.ToString("s"),
                                  allDay = false
                              };
  
            return Json(eventList, JsonRequestBehavior.AllowGet);
          }
  </code></pre>
  
  <hr>
  
  <p>Here is the jQuery...</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $("#AppID").change(function () {
              var e = document.getElementById("AppID");
              var selectedApp = e.options[e.selectedIndex].value;
             GetEvents(selectedApp);
           });
      });
  
      function GetEvents(AppID) {
          //console.log(AppID);
          $('#calendar').fullCalendar({
              theme: false,
              header: {
                  left: '',
                  center: '',
                  right: ''
              },
              defaultView: 'agendaDay',
              editable: false,
              events: {
                  url: '/AppPreventativeMaintenance/CALStationDayLoad/',
                  type: 'POST',
                  data: {
                      AppID: AppID
                  },
                  error: function () {
                      alert('there was an error while fetching events!');
                  },
                  //color: 'yellow',   // a non-ajax option
                  //textColor: 'black' // a non-ajax option
              }
  
          });
      };
  
  &lt;/script&gt;
  </code></pre>