You may use CSS to customize your web calendar to your preferences. Below are a few commonly-used examples you might find useful. All color codes and pixel sizes used are placeholders that may be replaced with your brand colors and specifications. Here is a sample calendar on our demo portal using some of the CSS updates below.
Disclaimer: we do not offer support in building custom CSS for your web calendar or web portal.
The following updates are included on this page:
- (1) Update the event hover color & remove shadow box
- (2) Update purchase button color
- (3) Update event name color
- (4) Update event name size
- (5) Update day header
- (5) Update calendar title
- (6) Load and format entire calendar with custom font
(1) Update the event hover color & remove shadow box
.XTL-events .XTL-event:hover{
background-color:#152148;
color:#fff;
box-shadow: 0 0 0 0;
}
(2) Update purchase button color
.XTL-eventbox-button{
background-color:#1ab4c9;
border:1px solid #1ab4c9;
}
(3) Update event name color
.XTL-event-name, .XTL-event-name a{
color:#1ab4c9;
}
(4) Update event name size
.XTL-event-month-name{
font-size:10px;
}
(5) Update day header
#tblCalendar thead tr th{
background-color:#152148;
border:1px solid #152148;
color:white;
font-size:16px;
font-weight:normal;
}
(5) Update calendar title
#calendar_title, #calendar_title_mobile {
text-transform:uppercase;
color: #152148;
font-weight:bold;
}
(6) Load and format entire calendar with custom font
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
body{
font-family: 'Roboto Mono', monospace;
background-color:#ffffff;
}
*Custom fonts may be found at https://fonts.google.com/