diff --git a/frappe/public/js/frappe/views/calendar/calendar.js b/frappe/public/js/frappe/views/calendar/calendar.js
index d4958952d5..f482921daa 100644
--- a/frappe/public/js/frappe/views/calendar/calendar.js
+++ b/frappe/public/js/frappe/views/calendar/calendar.js
@@ -208,38 +208,41 @@ frappe.views.Calendar = class Calendar {
});
}
set_css() {
+ const viewButtons =
+ ".fc-dayGridMonth-button, .fc-dayGridWeek-button, .fc-dayGridDay-button, .fc-today-button";
+ const fcViewButtonClasses = "fc-button fc-button-primary fc-button-active";
+
+ // remove fc-button styles
this.$wrapper
.find("button.fc-button")
- .removeClass("fc-button")
- .removeClass("fc-button-primary")
+ .removeClass(fcViewButtonClasses)
.addClass("btn btn-default");
- this.$wrapper
- .find(".fc-dayGridMonth-button, .fc-dayGridWeek-button, .fc-dayGridDay-button")
- .wrapAll('');
+ // group all view buttons
+ this.$wrapper.find(viewButtons).wrapAll('');
// add icons
this.$wrapper
- .find(".fc-prev-button span")
+ .find(`.fc-prev-button span`)
.attr("class", "")
.html(frappe.utils.icon("left"));
-
- this.$wrapper.find(".fc-prev-button").css("margin-right", 5 + "px");
-
this.$wrapper
- .find(".fc-next-button span")
+ .find(`.fc-next-button span`)
.attr("class", "")
.html(frappe.utils.icon("right"));
-
this.$wrapper.find(".fc-today-button").prepend(frappe.utils.icon("today"));
- this.$wrapper.find(".fc-day-number").wrap('');
-
+ // v6.x of fc has weird behaviour which removes all the custom classes
+ // on header buttons on click, event below re-adds all the classes
var btn_group = this.$wrapper.find(".fc-button-group");
btn_group.find(".fc-button-active").addClass("active");
btn_group.find(".btn").on("click", function () {
- btn_group.find(".btn").removeClass("active");
+ btn_group
+ .find(viewButtons)
+ .removeClass(`active ${fcViewButtonClasses}`)
+ .addClass("btn btn-default");
+
$(this).addClass("active");
});
}
@@ -254,9 +257,10 @@ frappe.views.Calendar = class Calendar {
plugins: [dayGridPlugin, listPlugin, timeGridPlugin, interactionPlugin],
initialView: defaults.initialView || "dayGridMonth",
locale: frappe.boot.lang,
+ firstDay: 1,
headerToolbar: {
- left: "prev,next",
- center: "title",
+ left: "prev,title,next",
+ center: "",
right: "today,dayGridMonth,dayGridWeek,dayGridDay",
},
editable: true,
@@ -264,7 +268,7 @@ frappe.views.Calendar = class Calendar {
selectable: true,
selectMirror: true,
forceEventDuration: true,
- displayEventTime: false,
+ displayEventTime: true,
weekends: defaults.weekends,
nowIndicator: true,
themeSystem: null,
diff --git a/frappe/public/scss/desk/calendar.scss b/frappe/public/scss/desk/calendar.scss
index 804006fe64..810b0e4563 100644
--- a/frappe/public/scss/desk/calendar.scss
+++ b/frappe/public/scss/desk/calendar.scss
@@ -1,52 +1,53 @@
-.fc-unthemed {
+.fc-theme-standard {
padding: 20px;
+ color: var(--text-light) !important;
+}
+
+.fc-theme-standard a {
color: var(--text-light);
}
.fc-toolbar {
- // padding-top: 30px;
padding-bottom: 15px;
margin-bottom: 0px !important;
}
+.fc-toolbar-chunk div {
+ display: flex;
+}
+
.fc-view-container {
margin-left: -1px;
margin-right: -1px;
}
.fc-head-container {
- // border-top: 0 !important;
border: none !important;
}
-th.fc-widget-header {
- border: none !important;
+th.fc-col-header-cell {
color: var(--gray-500);
font-weight: 600;
}
-// th {
-// border: none !important;
-// }
-
-.fc-unthemed td,
-.fc-unthemed hr,
-.fc-unthemed thead,
-.fc-unthemed tbody,
-.fc-unthemed .fc-row,
-.fc-unthemed .fc-popover {
+.fc-theme-standard td,
+.fc-theme-standard hr,
+.fc-theme-standard thead,
+.fc-theme-standard tbody,
+.fc-theme-standard .fc-row,
+.fc-theme-standard .fc-popover {
border-color: var(--gray-300) !important;
}
-.fc-unthemed td.fc-sun {
+.fc-theme-standard td.fc-day-sun {
background: var(--highlight-color);
}
-.fc-unthemed .fc-today {
+.fc-theme-standard .fc-day-today {
background-color: var(--fg-color) !important;
- .fc-day-number {
- background-color: var(--blue-500);
+ .fc-daygrid-day-number {
+ background-color: var(--gray-700);
border-radius: 50%;
color: $white;
height: 22px;
@@ -55,61 +56,64 @@ th.fc-widget-header {
display: flex;
justify-content: center;
text-align: center;
+ padding: 0;
}
}
-// .fc-highlight {
-// background-color: $light-yellow !important;
-// }
-
.fc-event {
- // border: 1px solid #E8DDFF; /* default BORDER color */
- background-color: #e8ddff;
+ background-color: rgb(237, 246, 253);
+ border: none !important;
+}
+
+.fc-event-main .fc-event-time {
+ display: none;
}
.fc-time-grid-event {
border: none !important;
}
-// @media (max-width: $screen-xs) {
-// .fc-scroller {
-// height: auto !important;
-// }
-// }
.fc-day-top {
padding: 5px 10px 0 0 !important;
}
-.fc-day {
- margin-left: 10px;
- .fc-day-number {
+.fc-daygrid-day-top {
+ margin: 5px 0 0 10px;
+ flex-direction: row !important;
+ .fc-daygrid-day-number {
float: left !important;
}
}
-th.fc-day-header {
+th.fc-col-header-cell {
padding: 10px 12px 10px 0 !important;
text-transform: uppercase;
font-size: 12px;
}
-.fc-event-container .fc-content {
+.fc-daygrid-dot-event {
padding: 3px;
display: flex;
flex-direction: column-reverse;
+ align-items: normal;
+ color: rgb(0, 112, 204) !important;
- .fc-time {
+ .fc-event-time {
font-weight: normal;
margin-top: 2px;
}
- .fc-title {
+ .fc-event-title {
font-weight: 600;
}
+
+ .fc-daygrid-event-dot {
+ display: none;
+ }
}
-.fc-left h2 {
- font-size: $font-size-lg;
+.fc-toolbar-title {
+ font-size: $font-size-lg !important;
font-weight: 500;
line-height: 28px;
height: 28px;
@@ -120,9 +124,6 @@ th.fc-day-header {
font-size: var(--text-md) !important;
outline: none !important;
text-transform: capitalize;
- // .fc-icon {
- // top: -1px !important;
- // }
}
.fc-right button {
@@ -131,29 +132,51 @@ th.fc-day-header {
.fc-left button {
width: 80px;
-
- // svg {
- // margin-right: 5px;
- // }
}
-.fc-state-active {
+.fc-button-active {
box-shadow: none !important;
background: var(--gray-500) !important;
color: var(--fg-color) !important;
z-index: 0 !important;
}
-.fc-day-grid-event {
+//override default and fc-button styles
+.fc-dayGridMonth-button,
+.fc-dayGridWeek-button,
+.fc-dayGridDay-button {
+ border: none !important;
+ border-radius: 0;
+ background-color: var(--control-bg);
+ color: var(--text-color);
+}
+
+.fc-dayGridMonth-button {
+ border-top-left-radius: var(--border-radius) !important;
+ border-bottom-left-radius: var(--border-radius) !important;
+}
+.fc-dayGridDay-button {
+ border-top-right-radius: var(--border-radius) !important;
+ border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.fc-prev-button {
+ margin-right: 10px !important;
+}
+.fc-next-button {
+ margin-left: 10px;
+}
+.fc-today-button {
+ margin-right: 10px;
+ border-radius: var(--border-radius) !important;
+}
+
+.fc-daygrid-event {
border: none !important;
margin: 5px 4px 0 !important;
padding: 1px 5px !important;
}
-// .result .footnote-area {
-// padding: 15px 10px 0 30px;
-// }
-
.fc-time-grid .fc-slats .fc-minor td {
border-top-style: none !important;
}
@@ -185,7 +208,6 @@ th.fc-day-header {
.fc-day-grid {
border-bottom: 1px solid var(--gray-300);
- // height: 2em !important;
}
.fc-divider {