Owning the Sugar Events Calendar with CSS

Owning the Sugar Events Calendar with CSS

This tutorial will show you how to take your Sugar Events Calendar and own it with some simple custom CSS as seen in the example here: Customized Sugar Events Calendar.

Be sure to check out our review of Sugar Events Calendar and if you're not familiar with CSS, our tutorial on how to use the Chrome Inspect Tool before you start this tutorial. We promise it will give you some great insight.

Give Your Calendar Some Sugar!

By default the Sugar Events Calendar looks pretty plain. It offers little to no styling and most of it is pulled from your theme (links...etc). The truth is that it's pretty lame, stale, [insert your description] and not that interesting. Luckily for you, we can help you change that.

• 1
  Calendar Days
  This bit of CSS will allow you to not only style the background color of the days, but also increase the height so the calendars look a little better. Just adjust the height to your tastes. Take it a step further and have the background color change on hover.

/*** Changes Background Color and Height of Days ***/
#sc_calendar td.calendar-day {
     background: lightblue;
     height: 150px;
}

/*** Changes Background Color of Days on Hover ***/
#sc_calendar td.calendar-day:hover {
background-color: lightcyan;
}

• 2
  Current Day
  By default the calendar doesn't highlight the current day, you can easily change that with some simply CSS. This makes it easier to see the events for today. If you want to take it a step further, you can also change the background color on hover as well.

/*** Styles First Name Field ***/
#sc_calendar .calendar-row .calendar-day.today {
     background-color: #90ee90ad;
}

/*** Styles First Name Field ***/
#sc_calendar .calendar-row .calendar-day.today:hover {
     background-color: lightgray;
}

• 3
  Numbers
  We wanted our calendar to stand out further and what better way than to add some pop to the actual numbers. This CSS adjusts the Font Size & Weight, the background color and border radius, and finishes it off with a little padding to help it all work together smoothly.

/*** Styles The Calendar Numbers ***/
#sc_calendar td div.day-number {
     font-size: 14px;
     font-weight: 700;
     background-color:white;
     border-radius: 3px;
     padding: 1px 2px 1px 2px;
}

All the CSS combined

Here's all the CSS combined in case you just want that. Keep in mind that you'll need to change up the colors and maybe play with a px to get it to suit your needs.

/*** Changes Background Color and Height of Days ***/
#sc_calendar td.calendar-day {
     background: lightblue;
     height: 150px;
}

/*** Changes Background Color of Days on Hover ***/
#sc_calendar td.calendar-day:hover {
background-color: lightcyan;
}

/*** Styles First Name Field ***/
#sc_calendar .calendar-row .calendar-day.today {
     background-color: #90ee90ad;
}

/*** Styles First Name Field ***/
#sc_calendar .calendar-row .calendar-day.today:hover {
     background-color: lightgray;
}

/*** Styles The Calendar Numbers ***/
#sc_calendar td div.day-number {
     font-size: 14px;
     font-weight: 700;
     background-color:white;
     border-radius: 3px;
     padding: 1px 2px 1px 2px;
}

Now what?

Now copy and past this into your custom CSS area either in the Customize section (under Appearance in the Admin Dashboard), or if your Theme and/or Child Theme has a place for custom CSS add it there.

The only thing left now, is to comment and share a picture of your calendar and to share this tutorial.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Get Sugar Calendar

Sugar Events Calendar Review - The Simple Yet Powerful Events Calendar

Blog Post

Get Your Inspect On: Viewing a Sites CSS and More.

Blog Post