Here are the steps used to install and configure Event Calendar 3.0
1. Install eventcalendar 3.0 plugin
[YVOD installs the plugin with all WordPress builds]
2. Activate plugin in plugins screen
[Plugin activated by default for all YVOD WordPress builds]
3. Change plugin options
A) Show number of months [Default 3]
B) set the correct category [Default 2]
C) Choose whether to display events as normal posts or keep them separate [Default separate]
D) Show all posts in the calendar or only events [Default only events]
4. There are two scenarios: one that displays an entire page of a visual calendar with the events showing on the day they are scheduled, in the category archive that you’ve created. We’ll call this scenario “big calendar.” The other scenario is where the calendar shows up as a small calendar on the side of the page with events showing as links in the calendar. We’ll call this scenario “sidebar calendar.”
5. There are three lines of code that grab and display the calendar and list an upcoming event. For scenario “big calendar” you should place them into archive.php. For scenario “sidebar calendar” you should place them in the sidebar.php.
The following line displays the calendar:
< ?php ec3_get_calendar(); ?>
The following two lines displays the “Title” and the first few events:
<?php _e(‘Events’); ?>
<?php ec3_get_events(5); ?>
—-
6. For scenario “big calendar”: replace plugins/eventcalendar/eventcalendar3.php with eventcalendar3-big.php. This code displays the post title on the day of the event. Modify the css as desired to make the calendar fill the screen. Modify archive.php as desired to either show only the calendar, or the calendar along with all the posts for that archive.
Note: We still need to figure out a way to ONLY show the calendar if the category number matches the category number specified for the calendar!! – Putting the grab calendar code in the archive shows it on all the category pages.
7. For scenario “sidebar calendar”: Replace plugins/eventcalendar/eventcalendar3.php with eventcalendar3-small.php.
Put calendar-grabbing code above wherever you want the calendar to appear in the file sidebar.php like this:
< ?php ec3_get_events(5); ?>
8. Create category-#.php file where # is the category ID (find this number in the manage screen [default 2]).
—-
Here are the contents of urbanwinenetwork’s category php page:
< ?php get_header(); ?>
< ?php if (have_posts()) : ?>
< ?php while (have_posts()) : the_post(); ?>
< ?php the_content('Read the rest of this entry »'); ?>
< ?php endwhile; ?>
< ?php else : ?>
Not Found
Sorry, but you are looking for something that isn’t here.
< ?php include (TEMPLATEPATH . "/searchform.php"); ?>
< ?php endif; ?>
< ?php get_footer(); ?>
9. CSS – to make the calendar fill the screen in the “big calendar” scenario, you need to modify the css. The default CSS for the eventcalendar lives here: wp-content/plugins/eventcalendar3/ec3.css. Here is the modified CSS for urbanwinenetwork related to the calendar:
div.calendar {
width: 67%;
float: right;
margin: 0 19px 0 0;
padding: 0 18px 0 0px;
/*border: 1px solid none;*/
}
div.calendar ul li {
list-style-type: none !important;
float: left;
width: relative;
margin: 0;
padding: 0;
/*border: 1px dotted aqua;*/
}
#wp-calendar table {
border: 1px solid #ddd;
empty-cells: hide;
font-size: 20px;
width: 100%;
text-align: center;
float: left;
margin: 0 0 0 -20px;
padding: 0;
}
#wp-calendar table #next a {
/*padding-right: 1px;*/
text-align: center;
}
#wp-calendar table #prev a {
/*padding-left: 1px;*/
text-align: center;
}
#wp-calendar table a {
display: block;
width: 100%;
text-decoration: none;
background-color: #E8D481;
color: #993366;
padding: 0;
margin: 0;
}
#wp-calendar table a:hover {
background-color: #993366;
color: #FFF;
}
#wp-calendar table caption {
font-size: 1em;
text-align: center;
width: 420px;
padding: 0 0px 0 0px;
margin: 0 -130px 0 0px;
/*padding-bottom: 2px;
padding-left: 2px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #E8D481;*/
}
#wp-calendar table td {
color: #g;
font: normal 11px Verdana, Geneva, sans-serif;
padding: 0px;
text-align: center;
width: 50px;
height: 50px;
border: 1px solid #CCCCCC;
vertical-align: top;
/*margin-right: -5px;
margin-left: -5px;*/
}
#wp-calendar table td.pad:hover {
background: #fff;
}
#wp-calendar table #today {
background: url(/media/today.gif);
color: #d1d1d1;
}
#wp-calendar table th {
color: #E8D481;
font-style: normal;
text-transform: capitalize;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .5em;
text-align: center;
vertical-align: middle;
}
#wp-calendar a.eventday {
color:#A92C3B;
}
#wp-calendar a.eventpost {
color: #993366;
}