Try ERPNext Buy Support Partners Foundation

Fullcalendar Scheduler with ERPNext

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?

@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.

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)?

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.

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.

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

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.

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'
	];
}

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’
:heavy_check_mark: Built js/scheduler.min.js
:heavy_check_mark: 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

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

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

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

i edited my previous answer

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

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

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

this is my calendar.js in frappe

image

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

and this is my console

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.

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

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

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.