I am using Fullcalendar v.4 and in one project the days select properly when dragging, however in my current project they do not. The code is mostly copied and pasted so I am not sure what I am missing here. Even when I put an empty init function in the code as seen below, the highlighting doesn't happen, however the console log does print when I perform the selection...
import fullCalendar from "@salesforce/resourceUrl/fullCalendar_4_3_1";
import fontAwesome from "@salesforce/resourceUrl/fontawesome_6_2_1";
renderedCallback() {
//console.log('bw: start renderedCallback');
if (this.fullCalendarInitialized) {
return;
}
this.fullCalendarInitialized = true;
//set global vars
selfs[this.calendarId] = this;
//console.log('bw: fontawesome url = ' + fontAwesome + "/css/all.min.css")
Promise.all([
loadStyle(this, fontAwesome + "/css/all.min.css"),
loadScript(this, fullCalendar + "/packages/core/main.js"),
loadStyle(this, fullCalendar + "/packages/core/main.css")
])
.then(() => {
//got to load core first, then plugins
Promise.all([
loadScript(this, fullCalendar + "/packages/daygrid/main.js"),
loadStyle(this, fullCalendar + "/packages/daygrid/main.css"),
loadScript(this, fullCalendar + "/packages/list/main.js"),
loadStyle(this, fullCalendar + "/packages/list/main.css"),
loadScript(this, fullCalendar + "/packages/timegrid/main.js"),
loadStyle(this, fullCalendar + "/packages/timegrid/main.css"),
loadScript(this, fullCalendar + "/packages/interaction/main.js"),
loadScript(this, fullCalendar + "/packages/moment/main.js"),
loadScript(this, fullCalendar + "/packages/moment-timezone/main.js"),
]).then(() => {
console.log("init");
this.init();
});
})
.catch(error => {
console.error(error);
this.dispatchEvent(
new ShowToastEvent({
title: "Error loading",
variant: "error"
})
);
});
}
init() {
try {
var calendarEl = this.template.querySelector(`[data-id="${this.calendarId}"]`);
// eslint-disable-next-line no-undef
this.calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ["dayGrid", "timeGrid", "list", "interaction", "moment"],
views: {
listDay: { buttonText: "list day" },
listWeek: { buttonText: "list week" },
listMonth: { buttonText: "list month" },
timeGridWeek: { buttonText: "week time" },
timeGridDay: { buttonText: "day time" },
dayGridMonth: { buttonText: "month", eventLimit:4 },
dayGridWeek: { buttonText: "week" },
dayGridDay: { buttonText: "day" }
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek'
},
loading: isLoading => {
if(isLoading === false) {
}
},
eventRender: info => {
},
eventClick: info => {
},
//eventMouseEnter: info => {console.log("mouse enter", info)},
select: info => {
console.log('bw: calendar.select, date range = ' + info.startStr + ' - ' + info.endStr);
},
dateClick: info => {
},
datesRender: info => {
},
selectable: true,
selectMinDistance: 10,
height: this.height,
aspectRatio: this.aspectRatio,
defaultDate: this.defaultDate,
eventLimit: true,
editable: true,
droppable: false,
showNonCurrentDates: false,
displayEventTime: true,
displayEventEnd: true,
});
this.calendar.uniqueId = this.calendarId;
this.calendar.render();
}
catch(e) {
console.error(e);
}
}
Update: It appears that whatever is happening is stopping the calendar from working after selecting days. So once select occurs I can no longer switch the view from dayGrid to week or any functions on any other built in buttons. But I don't know how to display whatever error is happening in the console. I have try/catch statements everywhere and nothing seems to work.