Calendar-Plus
Calendar-Plus enhances Kieran O’Shea’s Calendar plugin by removing several limitations and adding the ability to instantiate the calendar in a sidebar widget. Calendar-Plus requires the original Calendar plugin to be installed and activated. Calendar-Plus introduces a proper shortcode which can also be used to display the calendar in a sidebar by using the Sidebar Shortcode plugin.
To install Calendar-Plus, download it, unzip it, upload it to your WordPress installation and activate like a standard plugin.
The [calendar] shortcode has several arguments. You could create a post that contains the following content to see how the various options affect the Calendar output:
[calendar] [calendar weekday=1] [calendar weekday=3 descriptions=’off’] [calendar dateswitcher=’off’] [calendar weekday=3 dateswitcher=’off’ descriptions=’off’]
Calendar-Plus moves the CSS styling from a plugin setting to a separate CSS file which makes it easy to style Calendar with your own WordPress theme. The default CSS file shipped with Calendar-Plus is the same as the default setting from the Calendar plugin.
You can see Calendar-Plus in action on the CASL Shocks web site.
Styling Calendar-Plus
By default Calendar-Plus uses the same CSS as calendar but it is loaded via a style sheet included with the plugin instead of from the database plugin option setting which is the standard plugin operation.
By using style sheets, the CSS can be styled as part of the theme. I have received a couple questions regarding the styling of the Calendar on the CASL Shocks web site. The calendar is styled by adding the following CSS to my theme CSS file:
/*
* Calendar styling
*
*/
.calendar-heading {
background-color: #EFEFEF !important;
}
.current-day {
background-color: #EFEFEF !important;
}
.normal-day-heading, .weekend-heading, .calendar-date-switcher {
background-color: #EFEFEF !important;
}
.current-day, .day-with-date, .day-without-date {
/*
width: 30px !important;
height: 50px !important;
*/
overflow: hidden;
}
.events {
background: url(../images/soccer/SoccerBallSidebar.png) no-repeat -10px 115%;
}
.event-dagger {
display: inline !important;
font-weight: bold;
font-size: 1.2em;
}
.kjo-link {
display: none !important;
}
.widget_calendar_upcoming, .widget_calendar_today {
border-top: 0px;
padding-top: 10px;
}
.widget_calendar_upcoming ul li, .widget_calendar_today ul li {
border-width: 0px;
padding-bottom: 5px;
padding-left: 5px;
}
.widget_calendar_upcoming ul li a, .widget_calendar_today ul li a {
padding: 0.3em 0em;
}
Very very very useful! Thanks a lot for this modification. I was just curious – this calendar in your sidebar – is it also the same plugin with your modification?
Hey, wonderful work with this mod
I was wondering how you stop the calendar widget from displaying the event title and instead display an icon like the CASL site?
thanks
@Aaron Besson
and I have tried using [calendar descriptions=’off’] but with no success
@Jakub – The calendar on this web site is not Calendar/Calendar-Plus. The calendar in the sidebar is the standard WordPress archive calendar styled by the theme I am using.
@Aaron – I just updated the Calendar-Plus plugin page to include the styling I used in the CASL Theme to show an icon on the calendar. You can see it similar implementation on my LEGO blog.
@Aaron – I am using this syntax to display the sidebar widget on my LEGO Blog.
[calendar weekday=3 dateswitcher='off' descriptions='off']
is there any other icon to display other than “dagger icon”? (.event-dagger) this one? and whats the icon size for the ball & lego icon? thx!
Right now the dagger icon is hard coded. What happens is a jQuery script runs after the calendar is created which replaces the text normally displayed by the Calendar plugin with the dagger. I needed an obvious character that was a single character so I picked the dagger. You could change the code to use a different character pretty easily. I had hoped this code would get rolled into the Calendar plugin but it hasn’t happened yet and I am not sure it will so when I get some time, I’ll look into making the character a setting which can be changed.
As for the icon size for the examples I used, the LEGO plate is 34×24 and the soccer ball is 22×22. I move them around in the table cell with a CSS offset to tuck them into the corner.
thx for your reply.. i have tried so many times in styling the calendar like the football n lego site but still doest appear. i’m confused as where to insert the codes all. all i want is just the dagger icon without any icon like the football n lego pic. and as per normal when hovering the mouse it will appear the title events. care to guide me mike? thx again…!
* tell me specifically as where/which php/css do i need to insert the codes
Can you send me a link to your site? If all you want is the dagger, you shouldn’t have to add any CSS at all. I had to add CSS in order to get the image into the date cells.
can i send it to u in private? btw, i want only the dagger to appear, no text and no colours in the date cells. hovering it will appear the descriptions