Customizing Calendars

Customizing Calendars

Customizing the CSS for a Calendar

If you want to change the color or font of your calendar, this can be done through the CSS. Custom CSS overrides the original instructions programmed for your site.

Below is information on the CSS for customizing colors, fonts, and font sizes. Be sure to add the CSS edits to the Custom CSS screen and not the Master CSS!

This is advanced!  We are happy to help you edit these options if you would like us to do it for you. 

/* Calendar All Views - Default font family */
#mtk-pagewrapper #calendar {
   font-family: Arial,Helvetica,sans-serif;
}
 
/* Calendar Normal View - Header - Month Name */
#mtk-pagewrapper .calendar-normal .month-year-header {
  color: white;
  font-size: 18px;
  vertical-align: middle;
  background-color: #5E6A93;
}
 
/* Calendar Normal View - Header - Arrows to the left and right */
#mtk-pagewrapper .calendar-normal .prev-month {  background-color: #5E6A93; }
#mtk-pagewrapper .calendar-normal .next-month {  background-color: #5E6A93; }
 
/* Calendar Normal View - Header Text - Arrows to the left and right */
#mtk-pagewrapper .calendar-normal .prev-month > a, .next-month > a {
  color: white;
  font-size: 18px;
}
 
/* Calendar Normal View - Day Titles - Background and Font color */
#mtk-pagewrapper .calendar-normal .day-header-row th {
   background-color: #E3E9FF;
   font-size: 15px;
}
 
/* Calendar Normal View - Date Number */
#mtk-pagewrapper .calendar-normal .date-number {
  font-size: 13px;
  height: 17px;
  width: 22px;
}
 
/* Calendar Normal View - Today - Background */
#mtk-pagewrapper .calendar-normal .today {
  background-color: #FFFFAA;
  background: none repeat scroll 0 0 #FFF7D7;
}
 
/* Calendar Normal View - Today - Date Number */
#mtk-pagewrapper .calendar-normal .today .date-number {
  background-color: #FAD163;
}
 
/* Calendar Normal View - Days - Background Color and Font Size */
#mtk-pagewrapper .calendar-normal td, .calendar-normal th {
  font-size: 13px;
  background-color: #FFFFFF;
}
 
/* Calendar Normal View - Days - Event Text (change background color in Calendars) */
#mtk-pagewrapper .calendar-normal td ul li .event {
  font-size: 12px;
}
 
/* Calendar List View - Font color when hovering over a list event */
#mtk-pagewrapper .calendar .event-title {
  color: #000000;
}
 
/* Calendar List View - Font size of Date Header */
#mtk-pagewrapper .calendar-list .date-header {
  font-size: 14px;
}
 
/* Calendar List View - Font size of List Events */
#mtk-pagewrapper .calendar-list .list-event {
  font-size: 12px;
}

    • Related Articles

    • Custom CSS to Change the Directory Bar Color

      If you want to change color of the top Directory bar from the standard teal to your own colors, add the following to the Custom CSS (under Dashboard / Website). You will copy and paste it into your CSS. You will need to add your own Hex Code for the ...

    • Editing Custom Fields

      Adding a Custom Field At this time, Admins cannot add a custom field, but they are able to edit the data once it has been collected. If you would like to have a custom field added to your parent or student information, create a help desk ticket and ...

    • Custom CSS for All System Button Colors

      If you want to change the button colors system-wide from the standard teal to your own colors, add the following to the Custom CSS (under Dashboard / Website). You will copy and paste it into your CSS. You will need to add your own Hex Code for both ...

    • FAQ - Adding a Google Calendar to Your Calendars

      How to add a Google Calendar as an Incoming iCal/External Calendars You can feed external calendars directly into the calendars on your Membership Toolkit account. This is extremely helpful for schools who wish to include district calendar events on ...

    • FAQs - Calendar Subscriptions

      FAQ - How can parents subscribe to our PTA Calendar with their Google Calendar? Parents can subscribe to your calendars and newsletter lists by clicking on their name in the Login Box once they have logged in. Next, select the "Subscriptions" tab. ...