在AngularJS中获取fullCalendar中的开始时间和结束时间,可以通过以下步骤实现:
eventRender
事件回调函数来获取每个事件的开始时间和结束时间。该事件在每个事件渲染到日历上时触发。
angular.module('myApp').controller('MyController', function($scope) {
$scope.calendarOptions = {
// fullCalendar配置选项...
eventRender: function(event, element) {
var startTime = event.start; // 获取事件的开始时间
var endTime = event.end; // 获取事件的结束时间
// 处理开始时间和结束时间...
}
};
});
在eventRender
回调函数中,可以通过event.start
和event.end
来获取事件的开始时间和结束时间。这些时间值是JavaScript的Date对象,可以根据需要进行格式化或进一步处理。
angular.module('myApp').controller('MyController', function($scope) {
$scope.calendarOptions = {
// fullCalendar配置选项...
eventRender: function(event, element) {
var startTime = event.start.format('YYYY-MM-DD HH:mm'); // 格式化开始时间
var endTime = event.end.format('YYYY-MM-DD HH:mm'); // 格式化结束时间
var duration = event.end.diff(event.start, 'hours'); // 计算时间差(以小时为单位)
// 处理开始时间、结束时间和时间差...
}
};
});
在上述示例中,使用了Moment.js库的format
方法来格式化时间,并使用diff
方法计算了开始时间和结束时间之间的时间差。
angular.module('myApp').controller('MyController', function($scope) {
$scope.calendarOptions = {
// fullCalendar配置选项...
eventRender: function(event, element) {
var startTime = event.start.format('YYYY-MM-DD HH:mm'); // 格式化开始时间
var endTime = event.end.format('YYYY-MM-DD HH:mm'); // 格式化结束时间
var duration = event.end.diff(event.start, 'hours'); // 计算时间差(以小时为单位)
// 显示开始时间和结束时间
element.find('.fc-title').append('<br>' + startTime + ' - ' + endTime);
// 将开始时间和结束时间发送到服务器
$http.post('/api/saveEventTime', { startTime: startTime, endTime: endTime })
.then(function(response) {
// 处理响应...
})
.catch(function(error) {
// 处理错误...
});
}
};
});
在上述示例中,使用了jQuery的find
方法来找到事件元素中的标题元素,并在标题后面追加了格式化后的开始时间和结束时间。同时,使用了AngularJS的$http
服务将开始时间和结束时间发送到服务器。
需要注意的是,上述示例中的代码仅为示意,具体的实现方式可能会根据项目的需求和fullCalendar的版本而有所不同。建议参考fullCalendar的官方文档和示例进行具体的实现。
领取专属 10元无门槛券
手把手带您无忧上云