2015-04-04 92 views
0

我在asp.net應用程序上使用FullCalendar。我注意到,當FullCalendar通過網絡法> JSONSQL服務器接收數據時,它會創建一個緩存文件(EventList.json)內瀏覽器歷史/臨時文件夾中。有沒有辦法在FullCalendar上禁用緩存?

我有緩存:在每次方法假,但我不知道如何申請上事件同樣的事情:calendar.asmx/EVENTLIST

Please refer to my other post that shows how I receive my data via web-method

所以我的問題是:

  1. 有沒有辦法對事件禁用緩存?
  2. 我如何使用AJAX像其他的方法來獲取數據,因爲用這種方法我可以禁用緩存

function runCalendar() { 
 
    var $modal = $('#event-modal'); 
 
    $('#external-events div.external-event').each(function() { 
 
    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
 
    // it doesn't need to have a start or end 
 
    var eventObject = { 
 
     title: $.trim($(this).text()) // use the element's text as the event title 
 
    }; 
 
    // store the Event Object in the DOM element so we can get to it later 
 
    $(this).data('eventObject', eventObject); 
 
    // make the event draggable using jQuery UI 
 
    $(this).draggable({ 
 
     zIndex: 999, 
 
     revert: true, // will cause the event to go back to its 
 
     revertDuration: 0 // original position after the drag 
 
    }); 
 
    }); 
 
    /* Initialize the calendar */ 
 
    var date = new Date(); 
 
    var d = date.getDate(); 
 
    var m = date.getMonth(); 
 
    var y = date.getFullYear(); 
 
    var form = ''; 
 
    var today = new Date($.now()); 
 

 
    var calendar = $('#calendar').fullCalendar({ 
 

 
    slotDuration: '00:15:00', 
 
    /* If we want to split day time each 15minutes */ 
 
    minTime: '08:00:00', 
 
    maxTime: '20:00:00', 
 
    timeFormat: 'HH(:mm)', 
 
    defaultView: 'agendaWeek', 
 

 
    events: "calendar.asmx/EventList", 
 

 
    lazyFetching: false, 
 
    allDaySlot: false, 
 
    firstDay: 1, 
 
    //weekends: false, 
 
    handleWindowResize: true, 
 
    //columnFormat:'ddd/DD', 
 
    selectHelper: true, 
 
    height: $(window).height() - 200, 
 
    header: { 
 
     left: 'prev,next today', 
 
     center: 'title', 
 
     right: 'month,agendaWeek,agendaDay' 
 
    }, 
 

 
    editable: true, 
 
    droppable: true, // this allows things to be dropped onto the calendar !!! 
 
    eventLimit: true, // allow "more" link when too many events 
 
    drop: function(date) { 
 
     // retrieve the dropped element's stored Event Object 
 
     var originalEventObject = $(this).data('eventObject'); 
 
     var $categoryClass = $(this).attr('data-class'); 
 
     // we need to copy it, so that multiple events don't have a reference to the same object 
 
     var copiedEventObject = $.extend({}, originalEventObject); 
 
     // assign it the date that was reported 
 
     copiedEventObject.start = date; 
 
     if ($categoryClass) copiedEventObject['className'] = [$categoryClass]; 
 
     // render the event on the calendar 
 
     // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
 
     $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 
 
     // is the "remove after drop" checkbox checked? 
 
     if ($('#drop-remove').is(':checked')) { 
 
     // if so, remove the element from the "Draggable Events" list 
 
     $(this).remove(); 
 
     } 
 
    }, 
 

 
    selectable: true, 
 
    eventClick: function(calEvent, jsEvent, view) { 
 
     var form = $("<form></form>"); 
 
     form.append("<label>Change event name</label>"); 
 
     form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='fa fa-check'></i> Save</button></span></div>"); 
 
     $modal.modal({ 
 
     backdrop: 'static' 
 
     }); 
 
     $modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.delete-event').unbind('click').click(function() { 
 
     calendar.fullCalendar('removeEvents', function(ev) { 
 

 
      $.ajax({ 
 
      type: "POST", 
 
      cache: false, 
 
      contentType: "application/json; charset=utf-8", 
 
      url: "calendar.aspx/DeleteCalendarEvent", 
 
      dataType: "json", 
 
      data: "{'id':'" + calEvent._id + "'}", 
 

 
      }); 
 

 

 

 
      return (ev._id == calEvent._id); 
 
     }); 
 

 

 
     $modal.modal('hide'); 
 
     }); 
 
     $modal.find('form').on('submit', function() { 
 
     calEvent.title = form.find("input[type=text]").val(); 
 
     calendar.fullCalendar('updateEvent', calEvent); 
 

 
     $.ajax({ 
 
      cache: false, 
 
      type: "POST", 
 
      contentType: "application/json; charset=utf-8", 
 
      url: "calendar.aspx/UpdateCalendarEvent", 
 
      dataType: "json", 
 
      data: "{'id':'" + calEvent._id + "','title':'" + calEvent.title + "'}", 
 

 
     }); 
 

 
     $modal.modal('hide'); 
 
     return false; 
 
     }); 
 
    }, 
 

 

 

 
    eventDrop: function(event, ui, jsEvent) { 
 

 
     $.ajax({ 
 
     type: "POST", 
 
     cache: false, 
 
     contentType: "application/json; charset=utf-8", 
 
     url: "calendar.aspx/MoveEvents", 
 
     dataType: "json", 
 

 
     data: "{'id':'" + event._id + "','start':'" + moment(event.start).format("DD MMMM YYYY HH:mm:ss") + "','end':'" + moment(event.end).format("DD MMMM YYYY HH:mm:ss") + "','allDay':'" + event.allDay + "'}", 
 
     }); 
 

 
    }, 
 

 

 

 

 

 
    eventResize: function(event, allDay) { 
 
     var allDay = !event.start.hasTime() && !event.end.hasTime(); 
 
     $.ajax({ 
 
     type: "POST", 
 
     cache: false, 
 
     contentType: "application/json; charset=utf-8", 
 
     url: "calendar.aspx/ResizeEvents", 
 
     dataType: "json", 
 

 
     data: "{'id':'" + event._id + "','end':'" + event.end.format("DD MMMM YYYY HH:mm:ss") + "','allDay':'" + event.allDay + "'}", 
 
     }); 
 

 

 
    }, 
 

 

 
    select: function(start, end, allDay) { 
 
     $modal.modal({ 
 
     backdrop: 'static' 
 
     }); 
 
     form = $("<form></form>"); 
 
     form.append("<div class='row'></div>"); 
 
     form.find(".row") 
 
     .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>") 
 
     .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>") 
 
     .find("select[name='category']") 
 
     .append("<option value='busy'>Busy</option>") 
 
     .append("<option value='e1'>E1</option>") 
 
     .append("<option value='e2'>E2</option>") 
 
     .append("<option value='bg-blue'>Lunch</option>") 
 
     .append("<option value='bg-yellow'>Children</option></div></div>"); 
 
     inputSelect(); 
 
     $modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function() { 
 

 

 
     form.submit(); 
 

 
     }); 
 
     $modal.find('form').on('submit', function() { 
 

 

 
     title = form.find("input[name='title']").val(); 
 
     beginning = form.find("input[name='beginning']").val(); 
 
     ending = form.find("input[name='ending']").val(); 
 
     $categoryClass = form.find("select[name='category'] option:checked").val(); 
 
     var allDay = !start.hasTime() && !end.hasTime(); 
 
     if (title !== null && title.length != 0) { 
 

 

 
      //calendar.fullCalendar('renderEvent', { 
 

 
      // title: title, 
 
      // start:start, 
 
      // end: end, 
 
      // allDay: false, 
 
      // className: $categoryClass 
 
      //}, true); 
 

 

 

 

 
      $.ajax({ 
 
      cache: false, 
 
      type: "POST", 
 
      contentType: "application/json; charset=utf-8", 
 
      url: "calendar.aspx/CreateCalendarEvent", 
 
      dataType: "json", 
 
      data: "{'title':'" + title + "','start':'" + start.format("DD MMMM YYYY HH:mm:ss") + "','end':'" + end.format("DD MMMM YYYY HH:mm:ss") + "','category':'" + $categoryClass + "','allDay':'" + allDay + "'}", 
 
      success: function(data) { 
 
       var obj = data.d; 
 
       if (obj == 'true') { 
 
       //$('#txtFirstName').val(''); 
 
       //$('#txtLastName').val(''); 
 
       //$('#txtCity').val(''); 
 
       //$('#txtEmailID').val(''); 
 
       //$('#lblmsg').html('Data Inserted Successfully'); 
 
       } 
 
      }, 
 
      error: function(result) { 
 
       alert(result); 
 
      } 
 
      }); 
 

 
      calendar.fullCalendar('refetchEvents') 
 

 

 

 
      $modal.modal('hide'); 
 

 
     } else { 
 
      alert('You have to give a title to your event'); 
 
     } 
 
     return false; 
 

 
     }); 
 

 

 
     calendar.fullCalendar('unselect'); 
 
    } 
 
    }); 
 

 
    /* Creation of new category */ 
 
    $('.save-category').on('click', function() { 
 
    formCategory = $('#add-category form'); 
 
    var categoryName = formCategory.find("input[name='category-name']").val(); 
 
    var categoryColor = formCategory.find("select[name='category-color']").val(); 
 
    if (categoryName !== null && categoryName.length != 0) { 
 
     $('#external-events').append('<div class="external-event bg-' + categoryColor + '" data-class="bg-' + categoryColor + '" style="position: relative;"><i class="fa fa-move"></i>' + categoryName + '</div>') 
 
     runCalendar(); 
 
    } 
 

 
    }); 
 
} 
 

 
$(function() { 
 
    runCalendar(); 
 
});

回答

0

相反的:以下方法可禁用緩存

events: "calendar.asmx/EventList", 

eventSources: [{ 
      url: 'calendar.asmx/EventList', 
      type: 'POST', 
      cache: false 
     }], 
0

根據FullCalendar documentation你的電話已經阻止瀏覽器緩存,而FullCalendar是一個jQuery插件的事實意味着它可能使用jQuery的$ .ajax()方法來檢索數據。

+0

我明白,但它一旦創建eventlist.json文件FullCalendar加載...如果你看一下我的其他功能,如創建,調整大小等我使用Ajax來獲取我的Web方法,但對於這個事件我不知道該怎麼做,因爲其他選項有緩存:錯誤,並阻止緩存。 – 2015-04-04 23:08:21

+0

謝謝@Ghiottolo – 2015-04-07 07:41:38

相關問題