CODEWITHSUNDEEP
c#jqueryjsonajaxfullcalendar
Jks
Jks

Reputation: 103

Full calendar display blank in ajax result

May be this is a repeated question,but no other way for me . I have to show values when click on previous and next button in full Calendar. I am using ajax and values return correctly that is visible in console. Now i have two problems

  1. The data is not showing in my calendar
  2. I want to pass the first day of the current month then only i can access the data in that month. I know the event have default start and end value . But i need the first date of the specific month

The WebMethod always hits when i click on those buttons . This are the results in my console .

Array(6)
0
:
{EventID: "00000000-0000-0000-0000-000000000000", EventName: "Presnt", StartDate: "01-08-2017", EndDate: null, ImageType: 0, …}
1
:
{EventID: "00000000-0000-0000-0000-000000000000", EventName: "Presnt", StartDate: "02-08-2017", EndDate: null, ImageType: 0, …}
2
:
{EventID: "00000000-0000-0000-0000-000000000000", EventName: "Presnt", StartDate: "03-08-2017", EndDate: null, ImageType: 0, …}
3
:
{EventID: "00000000-0000-0000-0000-000000000000", EventName: "Presnt", StartDate: "04-08-2017", EndDate: null, ImageType: 0, …}
4
:
{EventID: "00000000-0000-0000-0000-000000000000", EventName: "Presnt", StartDate: "07-08-2017", EndDate: null, ImageType: 0, …}
5
:
{EventID: "00000000-0000-0000-0000-000000000000", EventName: "Presnt", StartDate: "08-08-2017", EndDate: null, ImageType: 0, …}
length
:
6

Jquery

 $(document).ready(function () {
        $('div[id*=calendar1]').show();
        $('div[id*=calendar1]').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            events: function (start, end,timezone, callback) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    data: "{Start:'" + start + "',End:'" + end + "'}",
                    url: "attendance-full.aspx/GetEvents",
                    dataType: "json",
                     // Old Code
                        //success: function (data) {
                        //    console.log(data);
                        //    for (var i = 0; i < data.d.length; i++) {
                        //        var event = new Object();
                        //        event.id = data.d[i].EventName;
                        //        event.start = new Date(data.d[i].StartDate);
                        //        event.title = data.d[i].EventName;
                        //        return event;
                        //    }
                        //}
                        //New Code
                        success: function (doc) {
                            console.log(doc);
                            var my_events = [];
                            if (!doc.result) {
                                $.each(doc.d, function (index, elem) {
                                    my_events.push({
                                        id:elem.EventName,
                                        title: elem.EventName,
                                        start: elem.StartDate,
                                    });

                                });
                                callback(my_events);
                            }
                        }
                });
            }
        });
        $('#loading').hide();
        $('div[id*=fullcal]').show();
    });

Code Behind 

[WebMethod]
public static IList GetEvents(string Start, string End)
{
    String Date = "10/01/2016";
    IList events = new List<Event>();
    //Hard coded the date for testing yyyy-MM-dd
    DateTime startDate = Convert.ToDateTime("2017-08-01");//Convert.ToDateTime(Date);
    DateTime endDate = Convert.ToDateTime("2017-08-31");//StartDate.AddMonths(1);
    SqlConnection con1 = new SqlConnection(Connection.str);
    BLL_Attentance Att = new BLL_Attentance();
    DataSet ds = new DataSet();
    double OS_Idno = 2587470;
    string AccYear = "2017-2018";
    try
    {
        DataTable dt = Att.AttentanceLoadFull(Convert.ToDouble(1236), 3, startDate.ToString(), endDate.ToString(), AccYear);//OP_sp_Attendance_Load
        ds.Tables.Add(dt);
    }
    catch (Exception ex)
    {
        ex.Message.ToString();
    }

    for (DateTime i = startDate; i < endDate; i = i.AddDays(1))
    {
        if (ds.Tables[0].Rows.Count > 0)
        {
            // to check ds contains the current date
            DataRow[] Date1 = ds.Tables[0].Select("OSA_Dateofattendance = '" + i + "'");
            if (Date1.Count() == 0)
            {

            }
            else
            {
                string flag = "Present";
                /*New Code*/
                DataTable ds3 = new DataTable();
                string sub = "2017-2018".Substring(0, 4);
                string OS_Attendance = "OS_Attendance" + sub;
                SqlDataAdapter sda3 = new SqlDataAdapter("select Oid from " + OS_Attendance.ToString() + " where Oattn_date='" + i.ToString("MM-dd-yyyy") + "' and M_idno='" + 3 + "' and Oattn_acadyear='2017-2018' and  Os_idno='" + OS_Idno + "'", con1);
                sda3.Fill(ds3);
                /*New Code End*/

                if (ds3.Rows.Count > 0)
                {
                    flag = "Absent";
                }
                if (flag == "Absent")
                {
                    events.Add(new Event
                    {
                        EventName = "Absent",
                        StartDate = i.ToString("dd-MM-yyyy"),
                    });
                }
                else
                {
                    events.Add(new Event
                    {
                        EventName = "Presnt",
                        StartDate = i.ToString("dd-MM-yyyy"),
                    });

                }
            }
        }
    }
    return events;

}

public class Event
{
    public Guid EventID { get { return new Guid(); } }
    public string EventName { get; set; }
    public string StartDate { get; set; }
    public string EndDate { get; set; }
    public int ImageType { get; set; }
    public string Url { get; set; }
}

Here the result only show the data in between 2017-08-01 and 2017-08-31. No data shown in August 2017 . please help me

Edited

I change my ajax code ,which will specify as new code then the calendar display a single date on 07/08/2017 no other dates are displaying Click the link to view my result. Found Error in console as

moment.min.js:6 Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.
Error
    at $ (http://localhost:4047/assets/global/plugins/moment.min.js:6:6788)
    at http://localhost:4047/assets/global/plugins/moment.min.js:6:25765
    at http://localhost:4047/assets/global/plugins/moment.min.js:6:145
    at http://localhost:4047/assets/global/plugins/moment.min.js:6:149

Upvotes: 0

Views: 1666

Answers (1)

ADyson
ADyson

Reputation: 61784

At the end of your ajax function, you aren't sending the data to fullCalendar via the provided callback, and you're returning from the function after you've read one single event. Remove the "return" statement, and add a call to the callback function:

success: function (data) {
  console.log(data);
  for (var i = 0; i < data.d.length; i++) {
    var event = new Object();
    event.id = data.d[i].EventName;
    event.start = new Date(data.d[i].StartDate);
    event.title = data.d[i].EventName;
  }
  callback(data);
}

This is as per the example at: https://fullcalendar.io/docs/event_data/events_function/

As for your second point - that's not how fullCalendar works. Your server method needs to be flexible enough to accept any given start/end dates. This is because there are other view types than just "month", including the ability for you to completely customise the dates shown (e.g. 2 weeks, 3 1/2 weeks, whatever you like) in some of the agenda and list views. So the method by default supplies the exact date range of events that should be returned.

Looking at your query, you've got an attendance date field, so you should just be able to use a single SQL statement using < and > and the start/end dates passed in from fullCalendar to get the event records. It's not clear why you would need the month number, or why you are doing a loop and running i number of separate queries for each date in the range - that could be quite inefficient. Your data structure looks suspect too - you seem to have separate tables for each academic year? If so, this is badly de-normalised and again should not be necessary in a well-designed database. Just some things to think about.

Upvotes: 2

Related Questions