Enhanced-Calendar

Enhanced-Calendar (previously known as 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.  Enhanced-Calendar requires the original Calendar plugin to be installed and activated.  Enhanced-Calendar 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 Enhanced-Calendar, 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’]

Enhanced-Calendar 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 Enhanced-Calendar 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 Enhanced-Calendar 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;
}

32 thoughts on “Enhanced-Calendar

  1. 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?

    • @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.

  2. 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

  3. @Aaron Besson

    and I have tried using [calendar descriptions=’off’] but with no success

  4. 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.

  5. 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.

  6. 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

  7. 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.

  8. 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 😛

  9. @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

  10. @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.

  11. @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.

  12. @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.

  13. @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 :-/

  14. Call me dumb but I can´t find the download link for calendar plus. I would like to test it on my website.
    Thank´s

  15. @Jakub Chodorowicz
    No, the calendar in the sidebar of this site is from the WordPress theme I use. Best place to see the plugin in action is on the MacDolphins web site – scroll back to July as swim team season is over so not many events right now.

  16. Hi Mike,
    Your Enhanced Calendar plugin is fantastic!

    Here’s my question tho: The title is doubling up. I enter event title “Zero to Professional” and on the calendar it is displaying as “Zero to ProfessionalZero to Professional.”
    What did I do wrong in the styling?? lol!

    I’d really appreciate some help!

    Thanks,
    Michelle
    http://www.bobkillenphotographyblog.com/calendar/?month=may&yr=2011

    • I am not sure what would cause that to happen off the top of my head. I will try and look at it when I get back to my computer after the basketball games are over tonight!

  17. I have installed Calendar and Calendar Plus.

    When I enter new events they are not showing in the Calendar.

    Am I doing something wrong? Do I need to do any extra things in terms of setting it up?

    Any advice welcome.
    Michael

  18. Sorry – it was Enhanced-Calendar that I have installed after installing calendar.

    Cheers
    Michael

    • Sorry for the delayed response, for some reason I am not getting notified when a comment is posted on my blog – need to look into that.

      I am not sure why you wouldn’t see the calendar events. I assume they appear on the list of events within the plugin admin interface. The default Calendar widget that WordPress uses is for the Posts, your calendar items will not appear on that Calendar. You’ll need to add a Calendar Widget for events.

  19. Hey,

    Is the previous/next month arrow button supposed to reload the entire page when clicked? I want the page to remain the same, just the calendar to load the next month.

    Pls advise thanks 🙂

    • You may want to look at another calendar tool – the work I did to get Calendar somewhat usable is getting pretty dated. The original developer has not updated Calendar in a long time and never integrated any of the changes I made and provided to him. The behavior you are seeing is likely due to a Javascript incompatibility. I am in the process of migrating to Google Calendar Events for my sites.

    • I see what you are talking about. The calendar widget thinks it is on your home page yet in your case it isn’t. It would take some digging to figure this out and to be honest with you, I don’t see having the time to do this for a while and since I am no longer using this plugin, I am not sure I ever will. Because the primary author hasn’t kept it up to date, I haven’t invested any cycles into the enhancements I did for it either.

  20. Such a shame.

    Thanks for getting back to me tho.

    The Google Calendar plugin is no good to me as it link externally to google when you click event details 🙁

    if you know how to change this or of any alternatives?

    Thanks so much!

    • It is possible to disable the link to external events with the Google Calendar Events plugin so people wouldn’t leave your site. YOu have to fiddle with the feed parameters. I liked the basic idea of the Calendar plugin but it is so dated at this point, it really needs to be re-written and it doesn’t look like the author has any plans to do so. I wish I had better news for you but moving to a Google calendar was the best solution I could come up so that is route I am going.

Leave a Reply