+/* These are the basic styles for calendar, there are several others that can be added from the calendar's mark up.
+ These styles are primarily for the buttons, columns headers, and the over all calendar body. More selectors will
+ be necessary when getting deeper into the calendar's mark up to style elements
+*/
+
#eventCalendar{
+
+ /* contains all of the buttons above the calendar, on left and right */
.fc-toolbar{
- /* apply button styles here to affect all of the buttons */
+ /* apply button styles here to affect all of the calendar buttons */
.fc-button{
}
+ /* currently selected button styles */
.fc-button.fc-state-active{
-// background: red;
+
}
.fc-button.fc-state-hover{
-// transition: all ease .6s;
-// -webkit-transition: all ease .6s;
-// -moz-transition: all ease .5s;
-// background: blue;
+
}
- /* affect only today, prev and next buttons */
+ /* affect only today, prev and next buttons (buttons on the above the left side of the calendar*/
.fc-left{
.fc-button{
-
+
}
.fc-today-button{
}
}
- /* affect only month, week, day buttons */
+ /* affect only month, week, day buttons (buttons above the right side of the calendar) */
.fc-right{
.fc-button-group{
.fc-button{
-// background: white;
+
}
.fc-button.fc-state-active{
-// background: green;
+
}
.fc-button.fc-state-hover{
/* Calendar Title / Current Month or Date */
.fc-center{
h2{
-
+
}
}
}
- /* Calendar container and agenda views */
+ /* entire calendar body */
.fc-view-container{
+
/* dates, days or months at the top of each column (sun, mon, tue, wed, thur, fri, sat) */
.fc-head{
.fc-widget-header{
-// color: red;
+
}
}
.fc-agendaDay-view{