jQuery完整日历-单击上一个和下一个时将月份名称作为参数传递给数据库

Question

Team,

I am new to jquery and C#. I am trying to integrate jquery Full calendar plugin with the code in C# to show leaves taken up by company resources.There are more than 10,000 records in the database which i would like to filter by fiscal year and fiscal month.So I would like to pass in the two parameters to the C# db code (year and month) when i click on prev and next buttons.

I am able to display the first 500 rows from the db on the calendar( I guess i cannot display more than that--Seems a limitation)

Below is the code

js code

<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# code

[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;
    }

Can anyone please suggest any changes ?

Answer 1

Fullcalendar passes 2 GET parameters anytime it makes a request for data, if you add (DateTime start, DateTime end) to your GetEvents method you can filter your data for the given range.

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

Answer 2

I thought earlier that the control faced a limitation of populating around 700-800 event records on the calendar. On further investigating, I stumbled on a piece of code to be placed in the web.config. This basically maximizes the lenght of jsonserialization string.

<system.web.extensions>
       <scripting>
           <webServices>
               <jsonSerialization maxJsonLength="50000000"/>
           </webServices>
       </scripting>
   </system.web.extensions>