I need to set different colour for different customer, but when I check Sales Order Calendar js, it looks like colour is hardcoded in frappe.
sales_order_calendar.js
get_css_class: function(data) {
if(data.status=="Closed") {
return "";
} if(data.delivery_status=="Not Delivered") {
return "danger";
} else if(data.delivery_status=="Partly Delivered") {
return "warning";
} else if(data.delivery_status=="Fully Delivered") {
return "success";
}
}
In full calendar, we can pass colour as follows.
field_map: {
“start”: “date”,
“end”: “date”,
“name”: “parent”,
“color”: “color”,
“id”: “name”,
“title”: “customer”,
“allDay”: “allDay”,
“child_name”: “name”
},
But passing color will not work in frappe as it override colour css.
If there any way to override core js function from custom script?
I want to override prepare_events in frappe.views.Calendar
2 Likes
I propose such a solution. Using the example of calendar “Leave Application”.
-
Create folders in your app public/js and public/css
-
Add in public/js the leave_application_calendar.js
frappe.views.calendar["Leave Application"] = {
field_map: {
"start": "from_date",
"end": "to_date",
"id": "name",
"title": "title",
"status": "status",
},
options: {
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
}
},
color_map: {
"yellow": "yellow",
"red": "red"
},
employee_map: {},
color_css: [
"turquoise",
"green-sea",
"emerald",
"nephritis",
"peter-river",
"belize-hole",
"amethyst",
"wisteria",
"wet-asphalt",
"midnight-blue",
"sunflower",
"another-orange",
"carrot",
"pumpkin",
"alizarin",
"pomegranate",
"clouds",
"silver",
"concrete",
"asbestos"
],
cnt: 0,
get_color: function() {
this.cnt++;
if (this.cnt == this.color_css.length) this.cnt = 0;
return this.color_css[this.cnt];
},
get_css_class: function(data) {
var me = this;
if(data.doctype==="Leave Block List Date") {
return "yellow";
} else if(data.doctype==="Holiday") {
return "red";
} else if(data.doctype==="Leave Application") {
if (!me.employee_map[data.title]) {
let color = this.get_color();
me.employee_map[data.title] = color;
if (!me.color_map[color]) {
me.color_map[color] = color;
}
}
return me.color_map[data.title];
}
},
get_events_method: "erpnext.hr.doctype.leave_application.leave_application.get_events"
}
-
Add in public/css the your_app.css
/* Flat color palette (full) downloaded from
* http://htmlcolorcodes.com/color-charts/
*/
.fc-bg-turquoise { background-color: #48c9b0 !important; color: #000000 !important; }
.fc-bg-turquoise.fc-start { border-left: 3px solid #0e6251 !important; }
.fc-bg-green-sea { background-color: #45b39d !important; color: #000000 !important; }
.fc-bg-green-sea.fc-start { border-left: 3px solid #0b5345 !important; }
.fc-bg-emerald { background-color: #58d68d !important; color: #000000 !important; }
.fc-bg-emerald.fc-start { border-left: 3px solid #186a3b !important; }
.fc-bg-nephritis { background-color: #52be80 !important; color: #000000 !important; }
.fc-bg-nephritis.fc-start { border-left: 3px solid #145a32 !important; }
.fc-bg-peter-river { background-color: #5dade2 !important; color: #000000 !important; }
.fc-bg-peter-river.fc-start { border-left: 3px solid #1b4f72 !important; }
.fc-bg-belize-hole { background-color: #5499c7 !important; color: #000000 !important; }
.fc-bg-belize-hole.fc-start { border-left: 3px solid #154360 !important; }
.fc-bg-amethyst { background-color: #af7ac5 !important; color: #000000 !important; }
.fc-bg-amethyst.fc-start { border-left: 3px solid #512e5f !important; }
.fc-bg-wisteria { background-color: #a569bd !important; color: #000000 !important; }
.fc-bg-wisteria.fc-start { border-left: 3px solid #4a235a !important; }
.fc-bg-wet-asphalt { background-color: #5d6d7e !important; color: #000000 !important; }
.fc-bg-wet-asphalt.fc-start { border-left: 3px solid #1b2631 !important; }
.fc-bg-midnight-blue { background-color: #566573 !important; color: #000000 !important; }
.fc-bg-midnight-blue.fc-start { border-left: 3px solid #17202a !important; }
.fc-bg-sunflower { background-color: #f4d03f !important; color: #000000 !important; }
.fc-bg-sunflower.fc-start { border-left: 3px solid #7d6608 !important; }
.fc-bg-another-orange { background-color: #f5b041 !important; color: #000000 !important; }
.fc-bg-another-orange.fc-start { border-left: 3px solid #7e5109 !important; }
.fc-bg-carrot { background-color: #eb984e !important; color: #000000 !important; }
.fc-bg-carrot.fc-start { border-left: 3px solid #784212 !important; }
.fc-bg-pumpkin { background-color: #dc7633 !important; color: #000000 !important; }
.fc-bg-pumpkin.fc-start { border-left: 3px solid #6e2c00 !important; }
.fc-bg-alizarin { background-color: #ec7063 !important; color: #000000 !important; }
.fc-bg-alizarin.fc-start { border-left: 3px solid #78281f !important; }
.fc-bg-pomegranate { background-color: #cd6155 !important; color: #000000 !important; }
.fc-bg-pomegranate.fc-start { border-left: 3px solid #641e16 !important; }
.fc-bg-clouds { background-color: #f0f3f4 !important; color: #000000 !important; }
.fc-bg-clouds.fc-start { border-left: 3px solid #7b7d7d !important; }
.fc-bg-silver { background-color: #cacfd2 !important; color: #000000 !important; }
.fc-bg-silver.fc-start { border-left: 3px solid #626567 !important; }
.fc-bg-concrete { background-color: #aab7b8 !important; color: #000000 !important; }
.fc-bg-concrete.fc-start { border-left: 3px solid #4d5656 !important; }
.fc-bg-asbestos { background-color: #99a3a4 !important; color: #000000 !important; }
.fc-bg-asbestos.fc-start { border-left: 3px solid #424949 !important; }
-
Add the css and js in hooks.py of your app
app_include_css = "/assets/your_app/css/your_app.css"
doctype_calendar_js = {"Leave Application" : "public/js/leave_application_calendar.js"}
And the result is
6 Likes
@ jg.gural We fixed this using default feature of full calendar.
So each Employee/ (Doctor in our case) has separate color.
JS.
frappe.views.calendar["Case"] = {
field_map: {
"start": "start_date",
"end": "end_date",
"color" : "color",
"name": "parent",
"doctype": "doctype",
"id": "name",
"tooltip": "title",
"title": "title",
"allDay": "allDay",
"child_name": "name"
},
style_map: {
"0": "info",
"1": "standard",
"2": "danger"
},
gantt: true,
get_events_method: "clinic_management.clinic_management.doctype.case.case.get_events"
}
4 Likes
Dear @kolate_sambhaji @jg.gural
In the standard Calendar at Event Document in the calendar view i need to show other filed name like customer instead of Event subject
Thanks in advance
It works for me to have a custom field color and then add it inside the field_map for “eventColor”.
frappe.views.calendar["Unit Availability"] = {
field_map: {
"start": "date",
"end": "date",
"id": "name",
"title": "unit",
"allDay": "allDay",
"status": "status",
"eventColor": "color"
}}
See this example:
https://github.com/frappe/erpnext/blob/606c504f28c3ca68bb3c43b463b41f63564345b2/erpnext/healthcare/doctype/patient_appointment/patient_appointment_calendar.js#L9
