I am trying to delete events on button click using:
eventRender: function(event, element) {
element.append( "<span class='closeon'>X</span>" );
element.find(".closeon").click(function() {
$('#calendar').fullCalendar('removeEvents',event._id);
});
},
but it deletes all events in the calendar instead of clicked event. I've tried other solutions provided but they are either with list item view or dayagenda view (timeGrid in v4) while I am using month view (dayGrid) only. My js of fullcalendar is as follows:
<script src="{{ URL::asset('fullcalendar/packages/core/main.js') }}"></script>
<script src="{{ URL::asset('fullcalendar/packages/interaction/main.js') }}"></script>
<script src="{{ URL::asset('fullcalendar/packages/daygrid/main.js') }}"></script>
<script src="{{ URL::asset('moment/moment.js') }}"></script>
<script src="{{ URL::asset('js/jQuery.min.js') }}"></script>
<script>
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'bootstrap' ],
themeSystem: 'bootstrap',
header: {
left: false,
center: 'title',
},
defaultView: 'dayGridMonth',
validRange: {
start: '2019-08-26',
end: '2019-09-26',
},
selectable: true,
editable : true,
droppable : true,
eventSources: [
{
url: '{{"roster/getEvents"}}',
allDay: false,
allDayMaintainDuration: false,
textColor: 'black',
},
{
url: '{{"roster/getGazette"}}',
editable: false,
overlap: false,
},
],
});
calendar.render();
});
</script>
Note: I've also tried using dialog like this:
eventClick: function(calEvent, jsEvent, view) {
id= calEvent.id;
$( "#dialog" ).dialog({
resizable: false,
height:100,
width:500,
modal: true,
title: 'Want you want to do?',
buttons: {
CLOSE: function() {
$("#dialog").dialog( "close" );
},
"DELETE": function() {
//do the ajax request?
}
}
});
},
but it gives "typeerror $(...).dialog is not a function" upon click.
Solution: first i corrected my code, i was using fullCalendar v4 libraries and i was using v3 functions which created conflict. Then i used bootsrap modal in html and called it in JS. At last i used Ajax call to delete events Code is as follows:
$(document).ready(function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'bootstrap'],
themeSystem: 'bootstrap',
header: {
left: false,
center: 'title',
},
defaultView: 'dayGridMonth',
validRange: {
start: '2019-08-26',
end: '2019-09-26',
},
selectable: true,
editable : true,
droppable : true,
eventClick: function(info) {
id = info.event.id;
$("#myModal").modal();
window.deleteRecord=function() {
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="edit-token"]').attr('content')
},
type: "POST",
url: "{{route('deleteRecord')}}",
data: JSON.stringify(id),
contentType: "application/json; charset=utf-8",
dataType: "json",
}).done( function(data){
console.log('Ajax was Successful!');
console.log(data);
location.reload(true);
}).fail(function(data){
console.log('Ajax Failed');
});
}
},
eventSources: [
{
url: '{{"roster/getEvents"}}',
allDay: false,
allDayMaintainDuration: false,
textColor: 'black',
},
{
url: '{{"roster/getGazette"}}',
editable: false,
overlap: false,
},
],
});
calendar.render();
});
Related
I have a premium version of this product, I am using the generic code they post on the site for this example. I have this code, which appears to be the correct way to implement the adaptive plugin, but I do not see a way to print the calendar?
What am I missing here?
jQuery.ajax({
type: "GET",
url: "index.php?option=com_ajax&plugin=getEmpData&format=json&ser="+ser+"&m_id="+m_id+"&formid="+formid+"&fdate="+fdate+"&tdate="+tdate,
success: function(data)
{
if (!data.data['0']) {
jQuery("#print-btn").hide();
jQuery("#geted-bschart").html('');
jQuery("#geted-results").html('No Data exist');
} else {
jQuery("#geted-results").html("");
const getEmpData = JSON.parse(data.data['0']);
let bs = getEmpData['0'];
getEmpData.shift();
var calendarEl = document.getElementById('geted-results');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
initialView: 'dayGridMonth',
views: {
dayGridMonth: {
type: 'dayGrid',
duration: { months: mths },
monthMode: true,
fixedWeekCount: false,
}
},
plugins: [
adaptivePlugin
],
headerToolbar: {
left: '',
center: 'title',
right: ''
},
initialDate: fdtArray['2']+'-'+fdtArray['0']+'-'+fdtArray['1'],
editable: false,
selectable: true,
businessHours: true,
dayMaxEvents: true,
events: getEmpData
});
jQuery("#geted-bschart").html(bs.calc);
calendar.render();
jQuery("#print-btn").show();
if (jQuery( ".res-legends" ) && jQuery( ".res-legends" ).length) {
jQuery(".res-legends").remove();
}
jQuery(lhtml).insertAfter(".fc-header-toolbar");
}
jQuery('#getEmpDataForm input, #getEmpDataForm button').prop('disabled', false);
},
error(xhr,status,error,data)
{
jQuery('#getEmpDataForm input, #getEmpDataForm button').prop('disabled', false);
}
});```
I created a fullcalendar5, everything works fine, calendar is showing very well, event added successfully, only event showing remains, I want to show beside event an hour, even I add allDay: false ,it not showing.
the image i want
var booking = #json($events);
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'fr',
eventDisplay: 'block',
initialView: 'dayGridMonth',
eventColor: 'orange',
events: booking,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
});
$('#add-event').on("click", function(){
var titre = $('#titre').val();
var datee = $('#date').val();
var comment = $('#comment').val();
$.ajax({
url:"{{ url('/events') }}",
type:"POST",
dataType:'json',
data:{ titre, datee, comment, "_token": "{{ csrf_token() }}" },
success:function(response){
console.log(response);
$('#exampleModal').modal('hide');
calendar.addEvent({
title: titre,
start: datee,
allDay: false
});
},
error:function(error){
console.log(error);
},
});
});
calendar.render();
});
I am using fullcalendar the non-es6 way, quite honestly because the bundled file was so large it was crashing stuff. Anyway, so I have loaded all the js files manually and all is well. Now I am trying to use Draggable. On the docs https://fullcalendar.io/docs/external-dragging it only shows you how to import Draggable from the interaction plugin. I have the interaction plugin up and running as I can drag events around on the calendar no problem, in fact I am editing bookings in Woo Bookings from them as they are dropped. I am now trying to drag resources from outside the calendar into the calendar and create bookings from them. I am getting Plugin file not loaded for draggable error in console, and of course Uncaught ReferenceError: Draggable is not defined
Here is my code
calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'resourceTimeline', 'interaction' ],
eventOverlap: false,
resourceGroupField: 'groupID',
resourceGroupText: 'groupText',
defaultView: 'resourceTimelineDay',
nowIndicator: true,
droppable: true,
defaultDate: currDate,
eventRender: function(info) {
$(info.el).find('.fc-content').attr("id", "event-" + info.event.id);
},
eventClick: function(info) {
info.jsEvent.preventDefault();
jQuery.colorbox({
href: wsccAppVars.standardajax,
data: {
action: 'fullcal_get_booking',
booking_id: info.event.id,
resource_id: info.event.resourceId
}
})
},
themeSystem: 'standard',
editable: true,
eventStartEditable: false,
eventDurationEditable: false,
resources: fcresources,
resourceColumns: [{
labelText: 'Lagoon',
field: 'lname'
}, {
labelText: 'Product',
field: 'pname'
}],
eventSources: [{
url: wsccAppVars.adminajax, // use the `url` property
color: 'yellow', // an option!
textColor: 'black' // an option!
}],
eventDrop: function(info) {
//console.log(info);
var data = {
booking_id: info.event.id,
resource_id: info.newResource.id,
protect: $("#calendar").data('cal-protect'),
action: 'wbsc_cal_booking_change'
}
//console.log(data);
$.post(wbscAppVars.standardajax, data, function(response) {
$("#calendar_messages").text(response.return_message)
if (!response.success) {
info.revert();
}
})
}
});
containerEl = document.getElementById('draggable_resources');
new Draggable(containerEl, {
itemSelector: '.draggable_resource'
});
calendar.render();```
I'm using fullcalendar in jquery dialog that is open when I click a button.
The calendar looks like this:
<script>
$(document).ready(function() {
calendar = $( "#calendar" ).fullCalendar({
height: 400,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,month'
},
defaultView: 'agendaWeek',
slotDuration: '00:60:00',
slotLabelFormat:"HH:mm",
timeFormat: 'H(:mm)',
firstDay: 1,
allDaySlot: false,
selectOverlap: false,
selectable: true,
selectHelper: true,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
eventLimit: true,
select: function(start, end) {
var title = prompt('Purpose of this booking:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#calendar').fullCalendar('unselect');
},
events: [
{
title: 'Test1',
start: '2016-05-26T10:00:00',
end: '2016-05-26T16:00:00',
allDay: false
},
{
title: 'Test2',
start: '2016-05-27T14:00:00',
end: '2016-05-27T18:00:00',
allDay: false
}
]
});
} );
$(function() {
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 610,
width: 900,
modal: true
});
$( ".btn-book" ).button().on( "click", function() {
dialog.dialog( "open" );
$('#calendar').fullCalendar( 'rerenderEvents');
$('#calendar').fullCalendar('render');
});
});
</script>
<button class='btn-book' type='button'>Book</button>
<div id="dialog-form" title="Book resource">
<form>
<div id='calendar'></div>
<input type="submit"/>
</form>
</div>
This is how it renders the events the first time:
As you can see, the events are not placed properly, the times don't match with the rows shown by the calendar...
Interestingly, if I enter a new event manually, then everything moves a bit and aligns automatically matching the times.
Is there any way to correct this?
FullCalendar v2.2.5, I want to use my JSON generating script to pull data only for the visible area of the calendar as mentioned in a few other questions.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '2015-01-06',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
//events: {
// url: 'instant-tools.cgi',
// type: 'POST',
// data: {
// events: 1,
// pending: 1,
// from: '2014-01-01',
// to: '2016-12-31',
// }
// },
viewRender: function(view, element) {
var events_slice = new Object();
events_slice.eventSources = [
{
url: 'instant-tools.cgi',
type: 'POST',
data: { events: 1, pending: 1, from: '2014-01-01', to: '2016-12-31' }
}
];
$('#calendar').fullCalendar('addEventSource', events_slice);
//$('#calendar').fullCalendar('renderEvents');
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});
The commented out events definition works (when I use it) but the viewRender one does not. Before you ask viewRender does get triggered. I get no errors in the console and no events displayed. My script is not called at all. I know I have the dates hardcoded right now but I will use view.intervalStart and view.intervalEnd once I verify I get a similar result. Having $('#calendar').fullCalendar('renderEvents'); in there makes no difference, also toggling lazyFetching does not make a difference. Not a JS coder so I hope I'm just being silly somewhere.
in the event property you need to call the function
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '$today',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
events: function(start, end, timezone, callback) {
$.ajax({
url: 'instant-tools.cgi',
data: {
events: 1,
pending: 1,
from: '2014-01-01',
to: '2016-12-31',
},
success: function(doc) {
var obj = jQuery.parseJSON(doc);
var events = [];
$.each(obj, function(index, value) {
events.push({
id: value['id'],
//all data
});
//console.log(value)
});
callback(events);
},
error: function(e, x, y) {
console.log(e);
console.log(x);
console.log(y);
}
});
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});