有没有办法在FullCalendar上禁用缓存?

时间:2015-04-04 20:38:38

标签: asp.net ajax json fullcalendar asmx

我在asp.net应用程序中使用 FullCalendar 。我注意到当 FullCalendar 通过 Web-Method>从 SQL Server 接收数据时JSON ,它在浏览器 history / temporary 文件夹中创建一个缓存文件(EventList.json)

我在每个方法上都有 cache:false ,但我不知道如何在 事件上应用相同的东西:calendar.asmx / EventList

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

所以我的问题是:

  1. 有没有办法在事件上禁用缓存?
  2. 如何像其他方法一样使用ajax来获取数据,因为使用此方法我可以禁用缓存
  3. 
    
    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();
    });
    &#13;
    &#13;
    &#13;

2 个答案:

答案 0 :(得分:1)

而不是:

events: "calendar.asmx/EventList",

以下方法可以禁用缓存

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

答案 1 :(得分:0)

根据FullCalendar documentation你的调用已经阻止浏览器缓存,而且FullCalendar是一个jQuery插件的事实意味着它可能使用jQuery的$ .ajax()方法来检索数据。