我正在使用完整的日历宝石http://fullcalendar.io/ 我的用户通过日历选择多个时段来提供他的可用性。 关于UI,我没有设法实现两件事:
在后端,我有一个带有列(字符串)的disponibility表,用于每周的每一天(星期一,星期二......)。 到目前为止,当用户在其中创建事件并将它们作为JSON格式放入隐藏字段中时,我一直在从日历中提取数据,然后将其发送到我的后端。这是脚本:
$(document).ready(function() {
// page is now ready, initialize the calendar...
var array_dispo = []
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
lang: "fr",
header: false,
timezone: 'local',
minTime: "08:00:00",
columnFormat: 'dddd',
selectHelper: true,
selectable: true,
select: function(start, end) {
var eventData = {
start: start,
end: end,
block: true,
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
var day = moment(eventData.start["_d"]).format("dddd");
var start_time = moment(eventData.start["_d"]).format("HH:mm");
var end_time = moment(eventData.end["_d"]).format("HH:mm");
var slot = {
day: day,
start_time: start_time,
end_time: end_time
};
array_dispo.push(slot);
$("#dispo_array").val(JSON.stringify(array_dispo));
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true,
eventClick: function(event) {
if(confirm('Voulez-vous supprimer cette dispo?')) {
$('#calendar').fullCalendar('removeEvents',event._id);
}
},
selectOverlap: function(event) {
return ! event.block;
}
});
});
不幸的是,当用户点击先前创建的事件或者当他选择调整先前创建的事件的时间段的大小时,该脚本不会更新在隐藏字段中发送的数据。到目前为止,我一直在努力做到这一点。
以下是我的观点:
div id= "calendar"
= form_tag tournament_disponibilities_path(@tournament), method: :post do
= text_field_tag(:dispo_array)
= button_tag :submit
以及我在disponibility_controller中使用create方法处理发送到后端的JSON的方法:
def create
@disponibility = Disponibility.new
@disponibility.tournament = @tournament
authorize @disponibility
disponibilities = JSON.parse(params[:dispo_array])
@disponibility.user = current_user
@disponibility.monday = disponibilities_for_day(disponibilities, 'lundi')
@disponibility.tuesday = disponibilities_for_day(disponibilities, 'mardi')
@disponibility.wednesday = disponibilities_for_day(disponibilities, 'mercredi')
@disponibility.thursday = disponibilities_for_day(disponibilities, 'jeudi')
@disponibility.friday = disponibilities_for_day(disponibilities, 'vendredi')
@disponibility.saturday = disponibilities_for_day(disponibilities, 'samedi')
@disponibility.sunday = disponibilities_for_day(disponibilities, 'dimanche')
端
def disponibilities_for_day(disponibilities, day)
day_disponibilities = disponibilities.select { |hash| hash['day'] == day }
day_disponibilities.map { |hash| "#{hash['start_time']}-#{hash['end_time']}" }.join(', ')
end
您能帮助我更新日历脚本以实现这些目标吗?