Custom Styles

Developers have the ability to do some custom styling for the MegaCalendar plugin. Below are examples of how you can target some MegaCalendar elements.

// CSS Example
.megaCalendarWrap .mega-content .mega-toolbar .mega-toolbar-nav {
    box-sizing: border-box;
}

.megaCalendarWrap .mega-content .mega-toolbar .mega-toolbar-button:hover {
    background-color: #c0193a;
}

.megaCalendarWrap .mega-content .mega-view .mega-view-body .mega-view-week 
.mega-view-day .mega-view-day-content .megaEvent .megaEventText {
    background-color: #5e5aa4;
    border-left: 3px solid #33305e;
}

// SCSS Example
.megaCalendarWrap .mega-content {
	.mega-toolbar {
		.mega-toolbar-nav {
			box-sizing: border-box;
		}
		.mega-toolbar-button {
			@include transition(all);
			&:hover {
				background-color: #c0193a;
			}
		}
	}
	.mega-view .mega-view-body .mega-view-week .mega-view-day .mega-view-day-content .megaEvent .megaEventText {
		background-color: #5e5aa4;
		border-left: 3px solid #33305e;
	} 
}