FullCalendar - Display list based on the chosen Day using angular

问题

Hey guys i'm fairly new to Full Calendar. I'm currently using angular v1.3.15.

All i want to do is show the FullCalendar with -

1) Only the header(fc-header..Without the fc-content)
2) The header showing only the AgendaDay view by default (with the prev and next buttons). Currently I have added this onto my FullCalendar code.

defaultView: 'agendaDay'

3) I also want to pass the current selected date to the controller in order to populate a list based on the selected date.

This is something that i want to achieve -

This is what my FullCalendar script looks like -

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var calendar2 = $('#calendar2').fullCalendar({
    defaultView: 'agendaDay',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: ''
    },
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {

    },
    editable: true
  });

For hiding the fc-content, i have tweaked the class .fc-content's display to none which works fine for now.

Any suggestion is much appreciated. Any other plugin or angular directive to make the task much simpler could also work. Basically i just want to display a list based on the date chosen by the user using angular

------------Updated v1---------
As of now i have done this to pass around the data.The problem is that the FullCalendar contents are dynamically generated.

  scope.getStatuses = function(current_date) {
    // HTTP GET request - to fetch all the statuses for a particular day
    var req = {
      method: "GET",
      //url: 'http://where-is-everyone.herokuapp.com/api/v1/statuses?date=2015-04-27',
      url: 'http://where-is-everyone.herokuapp.com/api/v1/statuses?date='+current_date
    };

    http(req).success(function(data, status){
      scope.status = status;
      scope.data = data;
      scope.rowCollection = data.message;
    }).
      error(function(data, status){
        scope.data = data || "Request failed";
        scope.status = status;
      });
  };

  $('.fc-button-prev').click(function(){
    var current_date = $('#calendar2').fullCalendar( 'getDate' );
    scope.formatted_current_date = $.fullCalendar.formatDate(current_date, "yyyy-MM-dd");
    scope.getStatuses(scope.formatted_current_date);
  });

  $('.fc-button-next').click(function(){
    var current_date = $('#calendar2').fullCalendar( 'getDate' );
    scope.formatted_current_date = $.fullCalendar.formatDate(current_date, "yyyy-MM-dd");
    scope.getStatuses(scope.formatted_current_date);
  });

This does the job, but i have observed the time taken using DevTool and it takes about 400-600ms, which is pretty slow.

Is there any way to speed it up ? because its ANGULAR right and i want to make it way faster using bindings. This is something i came up with(since the FullCalendar is dynamically generated) but i'm not sure if its the right way to do it.

  $(".fc-button-next").html(
    compile(
      "<span ng-click='changeListName()' class='fc-button fc-button-next fc-state-default fc-corner-right'><span class='fc-button-inner'><span class='fc-button-content'>&nbsp;►&nbsp;</span><span class='fc-button-effect'><span></span></span></span></span>"
    )(scope)
  );

  scope.changeListName = function() {
    var current_date = $('#calendar2').fullCalendar( 'getDate' );
    scope.formatted_current_date = $.fullCalendar.formatDate(current_date, "yyyy-MM-dd");
    scope.getStatuses();
  };

来源：https://stackoverflow.com/questions/29344670/fullcalendar-display-list-based-on-the-chosen-day-using-angular

标签

angularjs

fullcalendar