fix: css styling for calendar and overriden styles
This commit is contained in:
Rutwik Hiwalkar
parent
7e145927bc
commit
20355fe31b
2 changed files with 96 additions and 70 deletions
|
|
@ -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");
|
||||
});
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue