[Plugin: Events Calendar] Event not styling

Hi Steve,
I could not see a large calendar on your site?
The sidebar widget seem to be working correctly.

Is there a large calendar somewhere?

Dave

Sorry, I was on about the calendar in the sidebar. June 5th, the next event would ideally have a bg color.

Cheers,
Steve

Does anyone have any advice for this please?

I’m a bit late on this, I know, but the issue is because there is no class assigned to upcoming events on the calendar, in an apparent lack of foresight on the part of the plugin developer. Rather than assign upcoming events an class based on the database information, they are given inline styling of “cursor: pointer” and given an event bind for the Thickbox JQuery plugin. This, of course, makes it difficult to style. There are some options, however.

1. You can edit the actual plugin files to assign a class to the table cell or span in the table corresponding to events in your events database. This is the most complicated method and prevents you from being able to update the plugin without losing your changes, but is the ideal solution for standards concern.

2. You can use #wp-calendar td span[style="cursor: pointer;"] as a selector in CSS to assign styles to the events. Make sure to use display: block; width: 100%; height: 100% with this, if you want to use any background colors, since the span needs to fill its table cell. Also, this method doesn’t work with some older browsers that don’t support attribute selectors in CSS.

3. You can use JavaScript (or JQuery, since it’s already being used for the plugin) to target any cell within the table containing a span child with “cursor: pointer” css, and style it that way. Something like this:

$('#wp-calendar td span[style="cursor: pointer;"]').addClass('upcoming-event');

Then, you’ll just style the upcoming-event class whatever way you want.

By the way, if you do want to change the plugin files to add the class, the code that adds the event to the event span element begins at about line 256 in the ec_js.class.php file in the root folder for the plugin. The line should start with ecd.jq('#events-calendar-<?php echo $day;?>'). Basically, you should change this:

.mouseover(function() {
				ecd.jq(this).css('cursor', 'pointer');
			})

To something like this:

.css('cursor', 'pointer')
			.parent()
			.addClass('event').
			children(":first")

This will make sure that the cursor: pointer style is always on the element (since the cursor style is only active when the cursor is on the element, anyway), add the “event” class to the parent table cell of the event span, and then reselect said span so the following click event bind is appropriately attached.

Also, I realized when I was doing this (I listed those options before I actually tried) that the cursor: pointer style is actually only given to the span when you hover over it with the mouse. So there is actually absolutely no indication that an element is designated as a listed event until the user hovers over the elements like a madman. So, as it turns out, even using the attribute CSS selector will require you to at least make a minor change to the plugin file.

Also, one last post:

This is all assuming that you’re using the “I have adapted the Events-Calendar stylesheet” option in the Events Calendar options. If you don’t have that option checked, all you have to do is put your style information into the event style field.