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.
[download#5#image]
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
Hi.. I just PM’d you on Kieran’s site, please ignore.. this is what I needed! Thanks for sharing.. IMO great improvements to the calender plugin to have more widget functionality.
Hi again, its weird I had this working and then continued to develop the theme and now it is only half working. The * is no longer being replaced and when I look at the source I do not see any of that script being printed from the php. The only part that is is the bit that adds the .no-events and .events css. I am pulling this into the template with echo do_shortcode(“[calendar]“).. I tried it with descriptions off.. and that works, in that it hides the descriptions but it also hides the star/dagger. I also tried copying out all of that jquery and putting it directly into the header so it would always be there. There are no js errors but still no dice. I also tried a fresh install… anyways wonder if you had any ideas to help me troubleshoot this.. I must sleep
@zac
When I manually put the code from the php into the header it does hide the * but does not replace the script. Here is the script I was trying..
http://pastie.org/938752
Thanks in advance for any help on thisl
@zac
I recently noticed that my plugin doesn’t handle the “*” for the current day correctly, I wonder if that is the problem you are running into. I have been meaning to look into it but haven’t gotten to it yet. I had hoped my plugin would be incorporated into the original Calendar plugin but that doesn’t look like it is going to happen so I will try and put this in my queue.
Have you tried using a different theme and/or disabling other plugins? This can help narrow down where the problem is. All it takes is one plugin to do jQuery or Javascript wrong to mess a bunch of things up.
@Mike Walsh
oh hmm ok I will see what I can find out. Firebug is not showing any javascript errors but I will look deeper and let you know if I figure anything out.
@Mike Walsh
I am able to hide the * with your plugin and all that is left in the calendar is the text link which has a unique span of .calnk so I am thinking I can figure out a way to have javascript replace that span of text with an image or something.
@Mike Walsh
ok i got it to work by changing this part of the jQuery
‡<span class=\"hideThis\" ");
and adding this :
.hideThis{display:none}
the way i had it was
.calnk a span { display:none} which was hiding everything. Thanks again for your work.. sorry for spamming your post :-/