Fullcalendar Scheduler with ERPNext

hashir · February 22, 2021, 5:58pm

Hi, i am looking to integrate the FullCalendar Scheduler (https://fullcalendar.io) with ERPNext to get the resource allocation view. The latest version of FullCalendar premium is v5.5.1 which i believe is not compatible with calendar.js of Frappe. I tried this initially and got error. They have also changed the files and function names in latest versions of Fullcalendar.

Upon checking, i found that the version of Fullcalendar bundled with frappe is v3.4, located at ‘assets/frappe/js/lib/fullcalendar’. First i upgraded this to v3.10.2 (and calendar still worked) and then downloaded the compatible Fullcalender Scheduler v1.10.1. It has two files ‘scheduler.js’ and ‘scheduler.css’

I added these files to my custom app’s public/css and public/js and included them in my custom hooks.py

app_include_css = [ “/assets/custom_app/css/scheduler.css” ]
app_include_js = [“/assets/custom_app/js/scheduler.js”]

and did bench migrate

but i am not able to get the Fullcalendar Scheduler js file loaded in the header. In header i can see only the default ‘FullCalendar’ js and its locale js scripts. I think if i am able to get the Scheduler.js loaded correctly, then i would be able to use it in the calendar. A little help here please?

hashir · February 23, 2021, 10:52am

@MarZah @janecek.mato i came across your previous old thread with similar topic. kindly assist with the above please? i am not able to get the scheduler js loaded to the header.

peterg · February 23, 2021, 11:22am

I’m not sure bench migrate is the right command. Have you tried bench build, clearing your browser cache, and/or restarting supervisorctl (if on production)?

hashir · February 23, 2021, 11:24am

yes, i tried bench build and bench migrate. i also tried the method to include the css and js on custom app build.json and then doing bench build. Still no luck.

hashir · February 23, 2021, 11:34am

i commented out

//‘assets/frappe/js/lib/fullcalendar/fullcalendar.min.css’,
//‘assets/frappe/js/lib/fullcalendar/fullcalendar.min.js’,

from get required_libs() of calendar.js of frappe. But still the files are getting loaded. Is it being called elsewhere?

To test, i deleted fullcalendar.min.js from the frappe lib. Now the calendar shows that the file is missing, but the scheduler.js file get loaded to body.

There must be somewhere else that the fullcalendar.min.js might be called i guess.

peterg · February 23, 2021, 12:24pm

It sounds like a caching issue. Are you on a production or development server?

hashir · February 23, 2021, 12:28pm

production server.

i am able to get the script loaded to <body> but not to <head>. The original Fullcalendar script from frappe is loaded on <head>. Thats what i am trying to achieve.

janecek.mato · February 23, 2021, 1:49pm

I changed it like this and then only:

bench build
bench clear-cache
bench restart

i edited code in views/calendar/calendar.js

get required_libs() {
	return [
		// 'assets/frappe/js/lib/fullcalendar/fullcalendar.min.css',
		// 'assets/frappe/js/lib/fullcalendar/fullcalendar.min.js',

		"/assets/CUSTOM_APP/css/fullcalendar.min.css",
		"/assets/CUSTOM_APP/css/scheduler.min.css",

		"/assets/CUSTOM_APP/js/fullcalendar.min.js",
		"/assets/CUSTOM_APP/js/scheduler.min.js",

		'assets/frappe/js/lib/fullcalendar/locale-all.js'
	];
}

hashir · February 23, 2021, 1:51pm

Got some progress. I was able to get the css files loaded to header. (app_include_css = [ “/assets/custom_app/css/scheduler.css” ])

i noticed that while i do bench build, i have the following errors for the js files.

UNRESOLVED_IMPORT : ‘moment’ is imported by …/app/app/public/js/fullcalendar.js, but could not be resolved – treating it as an external dependency
Cannot find some dependencies. You may have to run “bench setup requirements” to install them.

UNRESOLVED_IMPORT : ‘moment’ is imported by …/app/app/public/js/scheduler.js, but could not be resolved – treating it as an external dependency
Cannot find some dependencies. You may have to run “bench setup requirements” to install them.

UNRESOLVED_IMPORT : ‘fullcalendar’ is imported by …/app/app/public/js/scheduler.js, but could not be resolved – treating it as an external dependency
Cannot find some dependencies. You may have to run “bench setup requirements” to install them.

UNRESOLVED_IMPORT : ‘fullcalendar’ is imported by commonjs-external:fullcalendar, but could not be resolved – treating it as an external dependency
Cannot find some dependencies. You may have to run “bench setup requirements” to install them.

MISSING_GLOBAL_NAME : No name was provided for external module ‘fullcalendar’ in output.globals – guessing ‘fullcalendar’
Built js/scheduler.min.js
Built js/fullcalendar.min.js

Also, my console shows an error on the calendar page as,
Uncaught ReferenceError: fullcalendar is not defined at scheduler.js:8

hashir · February 23, 2021, 1:52pm

ok, let me try this. did you create the min files using build.json ?

janecek.mato · February 23, 2021, 1:58pm

No i only pasted scripts inside “myapp/public/js” folder
I donwloaded scripts already in minified version

hashir · February 23, 2021, 1:59pm

ok, so you copied the min version of files from fullcalendar scheduler?

janecek.mato · February 23, 2021, 2:00pm

i edited my previous answer

hashir · February 23, 2021, 2:03pm

ok, i will try that way. so you dont have any custom build.json, right? btw, what version are you on? i am using v13-beta

janecek.mato · February 23, 2021, 2:06pm

i am on v12, i think that version should not be problem in that…

hashir · February 23, 2021, 2:38pm

no luck. no idea where i am doing it wrong.

this is my calendar.js in frappe

this is my head tag. the highlighted ones are fullcalendar.min.js and local-all.js

and this is my console

hashir · February 24, 2021, 12:56pm

i tried the hooks method. i commented out the files from calendar.js (original fullcalendar.min.js still gets loaded to header even though it is commented) and added to custom hooks

The css files are loaded to header, but the js files are loaded to end of body tag.

ene_sorin · February 24, 2021, 1:48pm

The original fullcalendar.min.js is loading because the path to your_file.min.js/css is incorrect maybe? Or am I eating and it’s something else.

hashir · February 24, 2021, 10:21pm

the paths are correct i believe. its in the public css/js folders of my custom app. also, i had commented out the original fullcalendar.min.js from the calendar.js of frappe as shown below

ene_sorin · February 25, 2021, 5:15am

So even if it s commented out you are still getting stock fullcalendar.min.js/css loaded? Gezãs, that’s weird.
You are close to a bug submit but one wouldn t be so sure if fullcalendar.min.js/css script/s loading is hardcoded. You might want to check what else is calling/pointing to for/it.