嘿伙计们,我对全日历很新。我目前正在使用angular v1.3.15。
我想做的就是用 -
显示FullCalendar 1)只有标题(fc-header
..没有fc-content
)
2)标题默认只显示AgendaDay视图(使用prev和next按钮)。目前我已将其添加到我的FullCalendar代码中。
defaultView: 'agendaDay'
3)我还想将当前选定的日期传递给控制器,以便根据所选日期填充列表。
这是我想要实现的目标 -
这就是我的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'> ► </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();
};