locked
get events for angularjs fullcalendar RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I am trying to retrieve event from the database to populate my calendar. Here is what I did if I don't use angularjs ui-calendar 

     var calendar = $('#calendar').fullCalendar({
    ...
     events: "/service/Calendar.ashx"
    ..

    And here is the code for the generic handler Calendar.ashx

    public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "application/json";
    
                DateTime start = Convert.ToDateTime(context.Request.QueryString["start"]);
                DateTime end = Convert.ToDateTime(context.Request.QueryString["end"]);
    
              ....
    
                context.Session["idList"] = idList;
                JavaScriptSerializer oSerializer = new JavaScriptSerializer();
    
                string sJSON = oSerializer.Serialize(events);
                context.Response.Write(sJSON);
            }

    Now when I switched to angularjs UI calendar http://angular-ui.github.io/ui-calendar/, how do I get the data from my database? I tried to write a web service but I am not sure how to get the start date and end date of the current view of the calendar? For the generic handler, query string is added automatically by the full calendar library to the handler, I believe. Thanks. 

    Tuesday, December 4, 2018 4:20 AM

All replies

  • User2108892867 posted

    I did some research and found this link: 

    https://www.oodlestechnologies.com/blogs/Fullcalendar-Walk-through-with-AngularJS

    Here is the portion that I am interested in:

      $http.get('DataRetriever.jsp').success(function(data) {
            for(var i = 0; i < data.length; i++)
            {
                $scope.events[i] = {id:data[i].id, title: data[i].task,start: new Date(data[i].start), end: new Date(data[i].end),allDay: false};
            }
        });

    In DataRetriever.jsp, I am just wondering how does the start and end dates are passed so it retrieves only the data within the the start and end dates. 

    Thanks. 

    Tuesday, December 4, 2018 4:52 AM
  • User61956409 posted

    Hi asplearning,

    Here is the portion that I am interested in:

      $http.get('DataRetriever.jsp').success(function(data) {
            for(var i = 0; i < data.length; i++)
            {
                $scope.events[i] = {id:data[i].id, title: data[i].task,start: new Date(data[i].start), end: new Date(data[i].end),allDay: false};
            }
        });

    In DataRetriever.jsp, I am just wondering how does the start and end dates are passed so it retrieves only the data within the the start and end dates. 

    The above code use AngularJS $http service to make request and return response, if you'd like to make request(s) and pass data via querystring to your Calendar.ashx by using AngularJS $http service, you can try:

    $http.get("/service/Calendar.ashx?start=2018-12-01&end=2018-12-05")
        .then(function (response) {
            //your code logic here
        });

    Besides, if you'd like to add events as functions, you can refer to this documentation.

    With Regards,

    Fei Han

    Wednesday, December 5, 2018 7:36 AM
  • User2108892867 posted

    Thank you Fei Han. See my problem is with this one line of code that you suggested:

    $http.get("/service/Calendar.ashx?start=2018-12-01&end=2018-12-05")

    You hard coded this as query string. But I think the right way is to let fullcalendar pick up the start and end and added automatically according to the view of each month. For example if you look at phone calendar, the view for this month should be something like 25 november 2018 to 5 January 2019. Go back one month it should be 28 November 2018 to 8 December 2018. So they should not be hard coded and I am trying to find out how do I get the start and end in angularjs ui calendar as for the pure js, this is automatically added to the to the generic handler. 

    Thanks. 

    Wednesday, December 5, 2018 8:11 PM
  • User61956409 posted

    Hi asplearning,

    the right way is to let fullcalendar pick up the start and end and added automatically according to the view of each month.

    According to the documentation, event function would help achieve it. 

    Besides, if you have fullcalendar related problem/issue, you can create an issue to report it.

    With Regards,

    Fei Han

    Monday, December 17, 2018 5:31 AM