How To Extend Calendar with FullCalendar Scheduler

Frappe Framework Customization
1

Hi,
i found that fullcalendar.js library which is used in frappe for calendar view, has paid part called FullCalendar Scheduler. I want pay it and extend existing calendar view.

If i want to do that, I need load more libraries (scheduler.js, scheduler.css), original libraries are setted in frappe/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/frappe/js/lib/fullcalendar/locale-all.js'
	];
}

And then i can set needed properties (like resources, and view settings) in:

doctypename_calendar.js

Is it possible extend / hook this required libs without changing frappe core files?

Or is here some guide how can I develop custom View Type like Calendar view. Ideally create new Calendar View Type in custom app.

Why I need it? What is use case?
My client need manage bookings for many resources. I think that best way is use FullCalendar timeline view.

41
41939Ɨ766 36.8 KB

Thanks for any suggestions.

1 Like
2

Any suggestions where to start?

Or can you tell me in which files is Calendar View defined (if i will know all of them, i can copy that files and create similiar one if it is possible).

Is it possible to create new View Type in new app, without changing core files of frappe?

Thank you very much for any help.

3

I am interested in this also. I hadnt realized a scheduler was available. The scheduler view is exactly what erpnext is missing.
The way I would add scheduler.js, scheduler.css would be to include them in my custom apps hooks.py
Like here

include js, css files in header of desk.html

app_include_css = [ ā€œ/assets/css/scheduler.cssā€ ]
app_include_js = [ā€œ/assets/js/scheduler.jsā€]

These files should be place in your apps public/css and public/js folders
You have to run bench build to make sure the files are included

4

Hi,

thanks for your suggestion.

I tried include scheduler files with this way, but i am getting errors when i am trying add timeline view settings to my doctype_calendar.js

This is from console:

42
421916Ɨ854 110 KB

Scheduler files are imported in header. I checked it.

5

I forgot to mention that the scheduler.css and scheduler.js have to be added to your apps build.json
What is in your doctype_calendar.js?

6

Hi, yes i already added it in build.json. I knew this method before.

in my doctype_calendar.js is

frappe.views.calendar["My DocType"] = {
	field_map: {
		"start": "start",
		"end": "end",
		"id": "name",
		"title": "title",
		"allDay": "allDay",
        "color": "color",
        "doctype": "doctype",
		"description": "description",
        "name": "name",
		"rendering": "rendering",
		'resourceId': "resourceId"

	},
	schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',

	options: {
        header: {
            left: 'title',
            center: '',
            right: 'prev,today,next month,agendaWeek,agendaDay,listTenDays,listOneDay,timelineFourDays,agendaOneDay,timelineOneDay'
        },
		views: {
			listOneDay: {
			  type: 'list',
			  duration: { days: 1 },
			  buttonText: '1 day list'
			},
			listTenDays: {
			  type: 'list',
			  duration: { days: 10 },
			  buttonText: '10 day list'
			},
			agendaOneDay: {
			  type: 'agenda',
			  duration: { days: 1 },
			  buttonText: 'Agenda Day'
			},
			timelineOneDay: {
			  type: 'timeline',
			  duration: { days: 1 },
			  buttonText: 'TimeLine day'
			}
		  },

		
		groupByResource: "True",
		firstDay: 1,
		resourceGroupField: 'id',
		resources: [
			{ id: 'a', title: 'Res A' },
			{ id: 'b', title: 'Res B' },
		  ],
		slotDuration: "00:15:00",
		defaultView: 'timelineDay',
		resourceLabelText: 'Rooms',
        
    },
    //this method will return list also with resource id
	get_events_method: "my_custom_method",

}

Thanks

7

I experienced the same error as you.
I was able to get it to work by upgrading the fullcalendar.min.css fullcalendar.min.js and fullcalendar.printmin.css that come with frappe 11.1.13 .
The version frappe provides is 3.4.
You can find them in apps/frappe/frappe/public/js/lib/fullcalendar
There is a typo on in your doctype_calendar.js. There is no view called timelineDay and the timelineOneDay view that you did define is invalid.
Does anyone know how to override built in js files like the ones that come with frappe in cases where you need a new version

1 Like
8

I get an intermittent error TypeError: fullcalendar_1 is undefined with the scheduler.

9

So also when you changed this core files, it is still not working?

10

I got it to work. The problem is that the js files were loading in the wrong order.
I had to comment out
get required_libs() {
return [
//ā€˜assets/frappe/js/lib/fullcalendar/fullcalendar.min.cssā€™,
//ā€˜assets/frappe/js/lib/fullcalendar/fullcalendar.min.jsā€™,
ā€˜assets/frappe/js/lib/fullcalendar/locale-all.jsā€™
];
}
in frappeā€™s calendar.js
and then include the new ones in my hooks.py
app_include_js = [ā€œ/assets/myapp/js/fullcalendar.jsā€,
ā€œ/assets/myapp/js/scheduler.jsā€]
it all loads correctly.
I would like to find a way to override the frappe supplied fullcalendar.js in a manner that does not get blown away with every bench update

1 Like
11

Thanks, i will try that. I was thinking that this could be a problem, because I found similiar issues when I was reading stackoverflow.

But i donā€™t want change core files.

@rmehta maybe you can you help us? Is there way how to override this code without changing core files? THANKS

Please read this:

12

The version of fullcalendar included with frappe is v 3.4 and is over 2 years old and has had quite a few bugfixes since. Its current release which is v 3.9.0.

Are there any plans to use the current version. I have installed the current version on my test copy of erpnext and havenā€™t noticed anything breaking

1 Like
13

We are already one full release cycle behind now with FullCalendar.
Current release is 4.4.0

1 Like