2017-08-28 7 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> 
相关问题