Develop Reference

How To Correctly Add Print Support To FullCalendar.IO

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);
}
});```

Set events inside viewrender callback

So i have this calender. You can see below. When the page is first loaded i populate the 'events' propertie of the calender which works fine. What i am having problem with is updateing the 'events' propertie inside the 'viewrender' eventcallback. Is that possible.
Iam using fullcalender version 3.9.
I tried inside the viewrender to set .... this.setevents. But it dont seem to work
$("#request_calender").fullCalendar({
eventOverlap: true,
selectable: true,
views: {
listDay: {
buttonText: 'Custom View',
},
agendaWeek: {
columnFormat: 'ddd D/M'
}
},
slotLabelFormat: 'H:mm',
customButtons: {
toggleWeekends: {
text: 'show weekends',
click: function() {
toggleWeekends();
},
}
},
header: {
left: "prev,next today toggleWeekends unBooked",
center: "title",
right: "agendaDay,agendaWeek,month,listWeek"
},
weekends: false,
weekNumbers: true,
defaultView: 'agendaWeek',
select: function(startDate, endDate) {
start_date = startDate.format();
end_date = endDate.format();
new_request(start_date, end_date);
},
events: calender_array,
timeFormat: 'H(:mm)',
eventRender: function(e, t) {
//some code here
},
eventClick: function(event, jsEvent, view) {
console.log("event:", event);
request_id = event['request_id'];
request_details(request_id);
},
viewRender: function(view, element) {
//HERE I WANT TO GET DATA VIA A API AND PUSH TO EVENTS
if (view.name == 'listDay') {
showCustomView();
}
}
});

FullCalendar display HTML in event title

I am updating my Fullcalendar install to V4. I am feeding mine via JSON and I have HTML (some FontAwsome Icons) in my event title. Here is my old V3 code to render my elements:
$(function() {
$('#calendars').fullCalendar({
events: '/activities/calendar.json',
contentHeight: 750,
displayEventTime: false,
header: {
left: '',
center: 'title',
right: 'today prev,next'
},
businessHours: {
dow: [1, 2, 3, 4, 5]
},
handleWindowResize: true,
eventLimit: 2,
eventLimitClick: 'popover',
eventRender: function(event, element) {
element.find('.fc-title').html(event.title);
}
});
});
The eventRender: is what fails. The new docs don't clearly explain how I my convert this to the new version. With this code in place my calendar simply fails to load with json parse error in the console. If I remove it it works but my HTML is rendered as plain text. I am sure I am missing something obvious and easy here. My JS skill set is not that great.

As of FullCalendar v5 you can use eventContent.
document.addEventListener('DOMContentLoaded', function() {
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
"id": 1,
"title": "First Line<br>Second Line",
"start": "2022-06-04",
"end": null,
"allDay": true,
"editable": true,
"className": "badge-soft-warning",
}
],
eventContent: function( info ) {
return {html: info.event.title};
}
});
calendar.render();
})

After some stubmling around I found this:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('timeline');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: '/activities/timeline.json',
plugins: [ 'resourceTimeline', 'interaction' ],
header: {
left: 'prev,today,next',
center: 'title',
right: 'resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear, '
},
eventRender: function(info) {
info.el.querySelectorAll('.fc-title')[0].innerHTML = info.el.querySelectorAll('.fc-title')[0].innerText;
}
});
calendar.render();
});
I am open to alternate cleaner answers.

How to resize an event in full calendar without the code "editable = true"

I need to manually resize the event in fullcalendar without the code editable=true, because I have added a dropdown inside the event and
to work its click I suppose prevent the editable property(editable=false). Now the dropdown is working but the resize property been disappeared. Even I tried the property resizable(resizable=true). How can I bring both the codes?
sample code
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,agendaFourDay'
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
},
},
defaultView: viewDefault,
//minTime: '07:00:00',
//maxTime: '21:00:00',
allDaySlot: false,
eventClick: updateEvent,
selectable: true,
selectHelper: true,
select: selectDate,
editable: false,
resizable: true,
events: "JsonResponse.ashx?eids=" + eIds + "&searchText=" + searchText,
//events: {
// url: 'JsonResponse.ashx',
// type: 'POST',
// data: {
// eIds: $('#hdnCustomerIds').val()
// },
// error: function () {
// alert('there was an error while fetching events!');
// }
//},
defaultDate: dateDefault,
eventDrop: eventDropped,
eventResize: eventResized,
eventRender: function (event, element, view) {
debugger;
// event.stopPropagation();
$(element).find('.fc-title').prepend('' + event.customerid + ',');
$(element).find('.fc-title').html('<select class="dropdown" style="color:black";" onchange="OnchangeEventStatus(this,'+event.id+')"><option >Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select>');
$(element).find('.dropdown').click(function (e) {
e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
});
$(element).find('.delete-event-link').click(function (e) {
e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
window.top.location.href = "/Sr_App/Customer_Profile.aspx?CustomerId=" + event.customerid;
});
//$(element).find('.fc-title').prepend('' + event.customerid + ',');
element.qtip({
content: {
text: qTipText(event.start, event.end, event.description),
title: '<strong>' + event.title + '</strong>'
},
position: {
my: 'bottom left',
at: 'top right'
},
style: { classes: 'qtip-shadow qtip-rounded' }
});
}
});

i got the solution, just add the property editable: false for fullCalendar
$('#calendar').fullCalendar({
selectable: true,
editable: false,
events: "JsonResponse.ashx?eids=" + eIds + "&searchText=" + searchText,
......
....
});

FullCalendar load events from JSON feed on viewRender

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'));
},
});
});