diff --git a/frappe/public/css/calendar.css b/frappe/public/css/calendar.css index 0efb00956a..a46ab7227f 100644 --- a/frappe/public/css/calendar.css +++ b/frappe/public/css/calendar.css @@ -78,3 +78,45 @@ th.fc-day-header { margin: 5px 4px 0 !important; padding: 1px 5px !important; } +.fc-bg-orange { + background-color: #FDD2C2 !important; + color: #A64F33 !important; +} +.fc-bg-orange.fc-start { + border-left: 3px solid #FDA688 !important; +} +.fc-bg-red { + background-color: #FEC3C5 !important; + color: #A63336 !important; +} +.fc-bg-red.fc-start { + border-left: 3px solid #FD8B8B !important; +} +.fc-bg-skyblue { + background-color: #D4F1FF !important; + color: #548DA8 !important; +} +.fc-bg-skyblue.fc-start { + border-left: 3px solid #AAE3FE !important; +} +.fc-bg-green { + background-color: #EBF7CF !important; + color: #7C9142 !important; +} +.fc-bg-green.fc-start { + border-left: 3px solid #D9F29E !important; +} +.fc-bg-blue { + background-color: #D1D3FC !important; + color: #4C51A2 !important; +} +.fc-bg-blue.fc-start { + border-left: 3px solid #A3A5FC !important; +} +.fc-bg-yellow { + background-color: #FEF9CF !important; + color: #A99E4C !important; +} +.fc-bg-yellow.fc-start { + border-left: 3px solid #FFF5A0 !important; +} diff --git a/frappe/public/js/frappe/views/calendar.js b/frappe/public/js/frappe/views/calendar.js index 9649c542b0..a7a3fa1681 100644 --- a/frappe/public/js/frappe/views/calendar.js +++ b/frappe/public/js/frappe/views/calendar.js @@ -235,6 +235,14 @@ frappe.views.Calendar = Class.extend({ } d["textColor"] = "#36414C"; }) + + var palette_colors = ['red', 'green', 'blue', 'yellow', 'skyblue', 'orange']; + var index = 0; + + events = events.map(function(event) { + event.className = "fc-bg-" + palette_colors[index]; + index = (index + 1) % palette_colors.length; + }) }, update_event: function(event, revertFunc) { var me = this; diff --git a/frappe/public/less/calendar.less b/frappe/public/less/calendar.less index 0da452d037..f69a7323e3 100644 --- a/frappe/public/less/calendar.less +++ b/frappe/public/less/calendar.less @@ -94,4 +94,36 @@ th.fc-day-header { border: none !important; margin: 5px 4px 0 !important; padding: 1px 5px !important; -} \ No newline at end of file +} + +.fc-bg-color(@color) { + @light: ~"@{color}-light"; + @extra-light: ~"@{color}-extra-light"; + @dark: ~"@{color}-dark"; + + background-color: @@extra-light !important; + color: @@dark !important; + + &.fc-start { + border-left: 3px solid @@light !important; + } +} + +.fc-bg-orange { + .fc-bg-color(orange); +} +.fc-bg-red { + .fc-bg-color(red); +} +.fc-bg-skyblue { + .fc-bg-color(skyblue); +} +.fc-bg-green { + .fc-bg-color(green); +} +.fc-bg-blue { + .fc-bg-color(blue); +} +.fc-bg-yellow { + .fc-bg-color(yellow); +} diff --git a/frappe/public/less/variables.less b/frappe/public/less/variables.less index bf5b85282b..324040a22d 100644 --- a/frappe/public/less/variables.less +++ b/frappe/public/less/variables.less @@ -1,50 +1,90 @@ -@brand-primary: #5E64FF; -@erpnext-blue: #7575ff; -@border-color: #d1d8dd; -@light-border-color: #EBEFF2; -@text-color: #36414C; -@text-light: #6c7680; -@text-muted: #8D99A6; -@btn-bg: #F0F4F7; -@panel-bg: #F7FAFC; -@grey-link-color: #212a33; -@navbar-bg: #f5f7fa; -@light-bg: #fafbfc; -@modal-backdrop-bg: #334143; -@light-yellow: #fffce7; -@extra-light-yellow: #fffdf4; -@text-extra-muted: @border-color; -@text-regular: 14px; -@text-medium: 12px; -@text-small: 10px; -@text-dark: #2E3338; - -@indicator-blue: #5e64ff; -@indicator-red: #ff5858; -@indicator-green: #98d85b; -@indicator-orange: #ffa00a; -@indicator-purple: #743ee2; -@indicator-darkgrey: #b8c2cc; -@indicator-yellow: #FEEF72; -@indicator-light-blue:#7CD6FD; - -@heart-color: @indicator-red; - -//@navbar-default-color: @text-muted; -@navbar-default-color: #6C7680; -@navbar-inverse-color: #9D9D9D; -@navbar-default-bg: #f5f7fa; -@navbar-default-border: #EBEFF2; -@breadcrumb-divider-color: #C0C9D2; - -@label-primary-bg: #D9F6FF; -@label-success-bg: #E4FFC1; -@label-info-bg: #E8DDFF; -@label-warning-bg: #FFE6BF; -@label-danger-bg: #FFDCDC; +@brand-primary: #5E64FF; +@erpnext-blue: #7575ff; +@border-color: #d1d8dd; +@light-border-color: #EBEFF2; +@text-color: #36414C; +@text-light: #6c7680; +@text-muted: #8D99A6; +@btn-bg: #F0F4F7; +@panel-bg: #F7FAFC; +@grey-link-color: #212a33; +@navbar-bg: #f5f7fa; +@light-bg: #fafbfc; +@modal-backdrop-bg: #334143; +@light-yellow: #fffce7; +@extra-light-yellow: #fffdf4; +@text-extra-muted: @border-color; +@text-regular: 14px; +@text-medium: 12px; +@text-small: 10px; +@text-dark: #2E3338; + +@indicator-blue: #5e64ff; +@indicator-red: #ff5858; +@indicator-green: #98d85b; +@indicator-orange: #ffa00a; +@indicator-purple: #743ee2; +@indicator-darkgrey: #b8c2cc; +@indicator-yellow: #FEEF72; +@indicator-light-blue: #7CD6FD; + +@heart-color: @indicator-red; + +@navbar-default-color: #6C7680; +@navbar-inverse-color: #9D9D9D; +@navbar-default-bg: #f5f7fa; +@navbar-default-border: #EBEFF2; +@breadcrumb-divider-color: #C0C9D2; + +@label-primary-bg: #D9F6FF; +@label-success-bg: #E4FFC1; +@label-info-bg: #E8DDFF; +@label-warning-bg: #FFE6BF; +@label-danger-bg: #FFDCDC; @checkbox-color: #3b99fc; -@screen-xs: 767px; -@screen-sm: 991px; -@screen-md: 1199px; +@screen-xs: 767px; +@screen-sm: 991px; +@screen-md: 1199px; + +// palette colors +@red: #FC4F51; +@red-light: #FD8B8B; +@red-extra-light: #FEC3C5; +@red-dark: #A63336; + +@blue: #7679FC; +@blue-light: #A3A5FC; +@blue-extra-light: #D1D3FC; +@blue-dark: #4C51A2; + +@green: #C6EA6C; +@green-light: #D9F29E; +@green-extra-light: #EBF7CF; +@green-dark: #7C9142; + +@yellow: #FEEF72; +@yellow-light: #FFF5A0; +@yellow-extra-light: #FEF9CF; +@yellow-dark: #A99E4C; + +@orange: #FD784F; +@orange-light: #FDA688; +@orange-extra-light: #FDD2C2; +@orange-dark: #A64F33; + +@skyblue: #7BD7FC; +@skyblue-light: #AAE3FE; +@skyblue-extra-light: #D4F1FF; +@skyblue-dark: #548DA8; + + + + + + + + + +