Skip to content

Commit

Permalink
fix: css styling for calendar and overriden styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@rutwikhdev
rutwikhdev committed May 9, 2024
1 parent 40c908b commit 4fade27
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 70 deletions.
38 changes: 21 additions & 17 deletions frappe/public/js/frappe/views/calendar/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('<div class="btn-group" />');
// group all view buttons
this.$wrapper.find(viewButtons).wrapAll('<div class="btn-group" />');

// 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('<div class="fc-day"></div>');

// 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");
});
}
Expand All @@ -254,17 +257,18 @@ 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,
droppable: true,
selectable: true,
selectMirror: true,
forceEventDuration: true,
displayEventTime: false,
displayEventTime: true,
weekends: defaults.weekends,
nowIndicator: true,
themeSystem: null,
Expand Down
127 changes: 74 additions & 53 deletions frappe/public/scss/desk/calendar.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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: 10px 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;
Expand All @@ -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 {
Expand All @@ -131,29 +132,50 @@ 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;
}

.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;
}
Expand Down Expand Up @@ -185,7 +207,6 @@ th.fc-day-header {

.fc-day-grid {
border-bottom: 1px solid var(--gray-300);
// height: 2em !important;
}

.fc-divider {
Expand Down

0 comments on commit 4fade27

Please sign in to comment.