2017-08-28 6 views
0

團隊,jquery完整日曆 - 單擊prev和next時將月份名稱作爲參數傳遞給數據庫

我是jquery和C#的新手。我正在嘗試將jquery完整的日曆插件與C#中的代碼整合,以顯示公司資源佔用的葉子。數據庫中有超過10,000條記錄,我希望按照會計年度和財政月度進行過濾。因此,我想當我點擊prev和next按鈕時,將兩個參數傳遞給C#db代碼(年和月)。

我能夠顯示在日曆上從DB第500行(我想我不能顯示更重要的是 - 似乎是一個限制)

下面是代碼

js代碼

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json", 
      data: "{}", 
      url: "CalendarPage.aspx/GetEvents", 
      dataType: "json", 
      success: function (data) { 
       $('div[id*=fullcal]').fullCalendar({ 


        header: { 
         left: 'prev,next today', 
         center: 'title', 
         right: 'month,agendaWeek,agendaDay' 
        }, 
        editable: true, 
        events: $.map(data.d, function (item, i) { 
         //var eventsUrl = '/events/' + end.year() + '/' + parseInt(end.month()); 
         var event = new Object(); 
         event.id = item.EventID; 
         event.start = new Date(item.StartDate); 
         event.end = new Date(item.EndDate); 
         event.title = item.EventName; 
         event.url = item.Url; 
         event.ImageType = item.ImageType; 

         return event; 
        }), eventRender: function (event, eventElement) { 
         if (event.ImageType) { 
          if (eventElement.find('span.fc-event-time').length) { 
           eventElement.find('span.fc-event-time').before($(GetImage(event.ImageType))); 
          } else { 
           eventElement.find('span.fc-event-title').before($(GetImage(event.ImageType))); 
          } 
         } 
        }, 
        loading: function (bool) { 
         if (bool) $('#loading').show(); 
         else $('#loading').hide(); 
        } 
       }); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       debugger; 
      } 
     }); 
     $('#loading').hide(); 
     $('div[id*=fullcal]').show(); 
    }); 
    function GetImage(type) { 
     if (type == 0) { 
      return "<br/><img src = 'Styles/Images/attendance.png' style='width:24px;height:24px'/><br/>" 
     } 
     else if (type == 1) { 
      return "<br/><img src = 'Styles/Images/not_available.png' style='width:24px;height:24px'/><br/>" 
     } 
     else 
      return "<br/><img src = 'Styles/Images/not_available.png' style='width:24px;height:24px'/><br/>" 
    } 

</script> 

C#代碼

[WebMethod] 
    public static IList GetEvents() 
    { 


     Leave_Management_Leave_TakenTableAdapter LTTA = new Leave_Management_Leave_TakenTableAdapter(); 

     DB.Leave_Management_Leave_TakenDataTable LTTbl = null; 

     **LTTbl = LTTA.GetForCalendar("I wish to put the parameters here");** 
     IList events = new List<Event>(); 



      foreach(DataRow dr in LTTbl.Rows) 
      { 
       events.Add(new Event 
       { 


        EventName = dr["Fullname"] + " Leave", 

       // DateTime dt = , 

        StartDate = DateTime.Parse(dr["leave_days"].ToString()).ToString("MM-dd-yyyy") 




       }); 


      } 

     return events; 
    } 

任何人都可以請建議什麼變化?

回答

0

Fullcalendar在請求數據時隨時傳遞2個GET參數,如果您將(DateTime start,DateTime end)添加到您的GetEvents方法中,您可以過濾給定範圍內的數據。

https://fullcalendar.io/docs/event_data/events_json_feed/

+0

感謝您的更新。我已經嘗試過..但是,當我點擊左上角的上一個/下一個按鈕後,我會需要。當我單擊prev下一個按鈕時,GetEvents webservice方法不會接到呼叫。有沒有辦法做到這一點? –

+0

而不是進行ajax調用,然後初始化日曆允許日曆自己做。如果您將日曆的events選項設置爲您的url並從web方法返回json,它仍然會像您期望的那樣填充日曆,但是當您單擊上一個或下一個時,它將調用傳遞2 GET參數的相同url。如果你看看我提供的答案中的鏈接,可以進一步解釋這一點。 –

+0

感謝您的解決方案。我實現了你的並通過了它。不過,我找到了更多的方法。它的工作原理是一個簡單的解決方案,以在日曆中引入最大數量的事件。請注意,最多隻有500個活動被填充,我覺得這是對照的限制。解決方案如下所述。 –

0

我前面的控制面臨日曆填充圍繞700-800事件記錄的限制思想。在進一步的調查中,我偶然發現了一段代碼放在web.config中。這基本上最大化了jsonserialization字符串的長度。

<system.web.extensions> 
     <scripting> 
      <webServices> 
       <jsonSerialization maxJsonLength="50000000"/> 
      </webServices> 
     </scripting> 
    </system.web.extensions> 
相關問題