FullCalendar - 根据所选日期使用角度显示列表

时间:2015-03-30 11:10:18

标签: angularjs fullcalendar

嘿伙计们,我对全日历很新。我目前正在使用angular v1.3.15。

我想做的就是用 -

显示FullCalendar

1)只有标题(fc-header ..没有fc-content
2)标题默认只显示AgendaDay视图(使用prev和next按钮)。目前我已将其添加到我的FullCalendar代码中。

defaultView: 'agendaDay'

3)我还想将当前选定的日期传递给控制器​​,以便根据所选日期填充列表。

这是我想要实现的目标 -

enter image description here

这就是我的FullCalendar脚本的样子 -

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

为了隐藏fc-content,我调整了.fc-content's display to none这个现在正常工作的课程。

非常感谢任何建议。任何其他插件或角度指令,使任务更简单也可以工作。 基本上我只想根据用户使用角度选择的日期显示列表

------------更新了v1 ---------
到目前为止,我已经这样做以传递数据。问题是FullCalendar内容是动态生成的。

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

这样做了,但我观察了使用DevTool所花费的时间,大约需要400-600毫秒,这非常慢。

有没有办法加快速度?因为它的ANGULAR是正确的,我希望使用绑定更快。这是我提出的(因为FullCalendar是动态生成的),但我不确定它是否是正确的方法。

  $(".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();
  };

0 个答案:

没有答案