[英]FullCalendar - removing event via modal
i'm using FullCalendar and i'm stuck trying to remove a event. 我正在使用FullCalendar,并且在尝试删除事件时被卡住。 Here is the deal: When i click on a event it brings to me a modal with every information i have about that event, and in this modal i have 2 button: One to accept the event and one to refuse it.
这是交易:当我单击一个事件时,它会带给我一个模态,其中包含我对该事件的所有信息,在此模态中,我有2个按钮:一个接受事件,一个拒绝事件。 What i need is, when i click in the "accept" the event color must turn to green, and when i refuse the event must be removed.
我需要的是,当我单击“接受”时,事件颜色必须变为绿色,而当我拒绝事件时,必须将其删除。 How can i do this?
我怎样才能做到这一点? Here is my code:
这是我的代码:
CalendarioAgenda.html (where my modal is, i reduced the code so it's easier to understand, but every field i have is like #ModalCliente): CalendarioAgenda.html(我的模态所在,我减少了代码,使它更易于理解,但是我拥有的每个字段都像#ModalCliente):
<div class="modal fade" id="ModalVistoria" tabindex="-1" role="basic" aria-hidden="true" style="display: none">
<div class="modal-dialog" style="width:50%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4">
<div class="form-group form-md-line-input">
<div class="form-control form-control-static" id="ModalCliente">
</div>
<label for="ModalCliente">Cliente</label>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" id="ModalId"/>
<button type="button" class="btn red-intense Recusar">Recusar</button>//button to refuse the event
<button type="button" class="btn blue-steel Aceitar">Aceitar</button>//button to accept the event
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
And my Calendar.js: 还有我的Calendar.js:
$('#calendar').fullCalendar({ //re-initialize the calendar
header: h,
defaultView: 'month', // change default view with available options from http://arshaw.com/fullcalendar/docs/views/Available_Views/
slotMinutes: 15,
editable: true,
droppable: false, // this allows things to be dropped onto the calendar !!!
events: [{
id: '01',
title: 'Vistoria Viceri',
start: new Date(y, m, 1), //usar start no campo de data da modal
backgroundColor: Metronic.getBrandColor('yellow'),
cliente: 'Viceri',
tipo: 'Empresarial Simples',
hora: '12:00',
endereco: 'General Osorio, 61',
bairro: 'Centro',
cidade: 'Jundiai',
estado: 'SP',
contato: 'Marcel Pratte',
telefone: '11 3308 6999',
}, {
id: '02',
title: 'Visita a cliente',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 3),
backgroundColor: Metronic.getBrandColor('green'),
cliente: 'Maxtel',
tipo: 'Empresarial',
hora: '15:00',
endereco: 'Avenidade Sao Joao',
bairro: 'Ponte Sao Joao',
cidade: 'Jundiai',
estado: 'SP',
contato: 'Marcio',
telefone: '11 45270001',
}, {
id: '03',
title: 'Vistoria Envision',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
backgroundColor: Metronic.getBrandColor('red'),
cliente: 'Envision',
tipo: 'Empresarial complexa',
hora: '12:36',
endereco: 'Rua da empresa',
bairro: 'Centro',
cidade: 'Sao Paulo',
estado: 'SP',
contato: 'Joaquim',
telefone: '011 995257788',
}],
//opção de click no evento para redirecionar para modal
eventClick: function (event, jsEvent, view) {
$('.modal-title').html(event.title);
$('#ModalCliente').html(event.cliente);
$('#ModalTipo').html(event.tipo);
$('#ModalDataHora').html(event.d + ' - ' + event.hora);
$('#ModalEndereco').html(event.endereco);
$('#ModalBairro').html(event.bairro);
$('#ModalCidade').html(event.cidade);
$('#ModalEstado').html(event.estado);
$('#ModalContato').html(event.contato);
$('#ModalTel').html(event.telefone);
$('#ModalId').html(event.id);
$('#ModalVistoria').modal();
$('.Recusar').click(function (events) {
var id = $('#ModalId').val();
$('#calendar').fullCalendar('removeEvents', id);
$("#calendar").fullCalendar('addEventSource', events);
});
}
});
thanks 谢谢
Your lines $('#ModalId').html(event.id);
您的行
$('#ModalId').html(event.id);
and var id = $('#ModalId').val();
和
var id = $('#ModalId').val();
are targeting two different elements, therefore you cannot retrieve the event id calling val()
. 针对两个不同的元素,因此您无法检索调用
val()
的事件ID。
By setting the value like so $('#ModalId').val(event.id);
通过像这样设置值
$('#ModalId').val(event.id);
it works fine. 它工作正常。
And here is the part where you can remore an event and change the background color: 这是您可以重新设置事件并更改背景颜色的部分:
$('.Recusar').click(function (events) {
var id = $('#ModalId').val();
$('#calendar').fullCalendar('removeEvents', id);
$("#calendar").fullCalendar('addEventSource', events);
$('#ModalVistoria').modal('hide');
});
$('.Aceitar').click(function (events) {
var id = $('#ModalId').val();
var ev = $("#calendar").fullCalendar('clientEvents', id);
ev[0].backgroundColor = 'green';
$("#calendar").fullCalendar('addEventSource', events);
$('#ModalVistoria').modal('hide');
});
Here is a working jsFiddle: click here 这是一个工作的jsFiddle: 单击此处
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.