I'm starting to work with fullcalendar, and I have the following problem. I'm bringing my data into JSON from php with codeigniter, using the function, "eventSources" which has fullcalendar, to bring multiple data into JSON format. Now my problem is that I need to apply the property, "eventRender" but only to one of the data I get, in this case I just want it to apply to ' Calendar / get_alert', however I Is applying to all, and some way to change that? I leave the code I have.
<script type="text/javascript">
$(document).ready(function(){
$('#fullcalendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
editable: true,
firstDay: 1,
selectable: true,
defaultView: 'month',
eventSources: [
'<?= base_url() ?>calendar/get_alert',
'<?= base_url() ?>calendar/get_Sales',
'<?= base_url() ?>calendar/get_purchases'
],
eventRender: function(event, element, view){
var el = element.html();
element.html("<div style='width:90%;float:left;'>" + el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>");
element.find('.close').click(function(){
if(!confirm("Delete event?")){
return false;
}else{
var id = event.id;
$.post('<?= base_url() ?>calendar/delete_alert',
{
id:id
},
function(data){
if(data == 1)
alert('Successfully deleted');
else
alert('Error deleted');
});
$("#fullcalendar").fullCalendar('removeEvents', event.id);
}
});
}
});
});
</script>I'm starting to work with fullcalendar, and I have the following problem. I'm bringing my data into JSON from php with codeigniter, using the function, "eventSources" which has fullcalendar, to bring multiple data into JSON format. Now my problem is that I need to apply the property, "eventRender" but only to one of the data I get, in this case I just want it to apply to ' Calendar / get_alert', however I Is applying to all, and some way to change that? I leave the code I have.
<script type="text/javascript">
$(document).ready(function(){
$('#fullcalendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
editable: true,
firstDay: 1,
selectable: true,
defaultView: 'month',
eventSources: [
'<?= base_url() ?>calendar/get_alert',
'<?= base_url() ?>calendar/get_Sales',
'<?= base_url() ?>calendar/get_purchases'
],
eventRender: function(event, element, view){
var el = element.html();
element.html("<div style='width:90%;float:left;'>" + el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>");
element.find('.close').click(function(){
if(!confirm("Delete event?")){
return false;
}else{
var id = event.id;
$.post('<?= base_url() ?>calendar/delete_alert',
{
id:id
},
function(data){
if(data == 1)
alert('Successfully deleted');
else
alert('Error deleted');
});
$("#fullcalendar").fullCalendar('removeEvents', event.id);
}
});
}
});
});
</script>new code, The data of each url vien in format JSON
<script type="text/javascript">
$(document).ready(function(){
$('#fullcalendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
editable: true,
firstDay: 1,
selectable: true,
defaultView: 'month',
eventSources: [
{
url: '<?= base_url() ?>calendar/get_alert',
customRender: true
},
{
url: '<?= base_url() ?>calendar/get_Sales',
customRender: false
},
{
url: '<?= base_url() ?>calendar/get_purchases',
customRender: false,
}
],
eventRender: function(event, element, view){
if (event.customRender == true)
{
var el = element.html();
element.html("<div style='width:90%;float:left;'>" + el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>");
element.find('.close').click(function(){
if(!confirm("Delete event?")){
return false;
}else{
var id = event.id;
$.post('<?= base_url() ?>calendar/delete_alert',
{
id:id
},
function(data){
if(data == 1)
alert('Successfully deleted');
else
alert('Error deleted');
});
$("#fullcalendar").fullCalendar('removeEvents', event.id);
}
});
}
}
});
});
</script>- you could give the events from that source a custom property by which you could identify them, then check for that property when you run eventRender. If you can't modify the server-side data that's returned, you can make the event source a function (as per) fullcalendar.io/docs/event_data/events_function and modify each event on the client before it gets rendered. – ADyson Commented Feb 13, 2017 at 10:53
- I understand, to assign a property to that event. But I still do not know how, could give me a clearer example. That the documentation will please you very much. – max Commented Feb 14, 2017 at 5:21
1 Answer
Reset to default 7One simple way to do it is like this:
Let's say you give all the events an extra custom boolean property. For example we could just call it "customRender", set to true or false. You would set all events ing from the "get_alert" source to have render : true, and all the others false.
e.g. an event would look something like this:
{
start: "2017-01-01",
end: "2017-01-03",
//...other properties here...
customRender: true
}
Then in the eventRender method, simply wrap all your custom logic in an if statement, so that it only runs if the event has "customRender" set to true:
eventRender: function(event, element, view) {
if (event.customRender == true)
{
var el = element.html();
element.html("<div style='width:90%;float:left;'>" + el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>");
//...etc
}
}