Dynamically Creating an astonishing iCal-like calendars with jQuery
I found this calendar that I really liked and wanted to take a look into an effective way to put it to use.
Check the original site over at Stefano Verna’s Website – Create astonishing iCal-like calendars with jQuery
I contemplated putting it somewhere on wizardryfireworks.com but there really is no need for it on that site, especially when it hasn’t been updated for over 2 years.
Then I thought about tipping-comp.com.au, but that site has its fair share of dev work required as it is, without over complicating its already slow development.
While on the train today, I was day dreaming out the window and all of a sudden thought that it could be used for in a Word-Press theme. Then I thought I could have it be the center concept of the post’s on the blog.
So, today I started the conversion to an automated calendar, rather than the static HTML that they used in the original. One major stumbling block was finding a way to determine the first day of the month and what day of the week it was. I finally worked it out with some nifty PHP code and was home free (Or, at-least until i arrived at my train stop en-route to work)
This PHP function will dynamically enter the posts into the flash up DIV’s. The problem is that it will hit the database once every day, so each page load is performing up to 31 database queries just on this section alone. A better way would be to load them all into arrays from 1 query and then generate this section. But, since I’ve all but ditched using this calender i doubt i will be modifying it too much.
function get_event($Year, $Month, $Day) {
$limit = 200;
$Day = str_pad($Day, 2, 0, STR_PAD_LEFT);
$cal_day = $Year."-".$Month."-".$Day;
$cal_db = mysql_query("SELECT * FROM wp_posts WHERE post_date LIKE '%".$Year."-".$Month."-".$Day."%' AND post_type = 'post' ORDER BY post_date ASC");
$post_content = $cal_data['post_content'];
if (strlen($post_content) > $limit) {
$post_content = substr($post_content, 0, strrpos(substr($post_content, 0, $limit), ' ')) . '...';
}
$post_pop_up = '
' . $Day .
';
while($cal_data = mysql_fetch_array($cal_db)) {
$post_date = explode(" ", $cal_data['post_date']);
$post_pop_up .= '
- ' . $cal_data['post_title'] .'' . $post_content . '
';
}
$post_pop_up .= '
';
if($cal_day == $post_date[0] && str_pad(date('d'), 2, 0, STR_PAD_LEFT) >= $Day){
echo $post_pop_up;
} else if(date('d') == $Day) {
echo "".$Day."";
} else {
echo "".$Day."";
}
}
This section generates the calender section itself. It will determine what day of the week the month starts and will generate the calender from there.
In it, it calls the get_event() function for each day and post’s a short character restricted section from the start of the post.
REMEMBER: This is my hacked version of Create astonishing iCal-like calendars with jQuery
A lot of people have contacted me about the imcompleteness of this code. My intention is to not re-create the work of Stefano Verna. I am posting this to further instruct how to generate a more dynamic version of the work that pulls details out of the WordPress database
It does NOT contain the required CSS or jQuery code here for this to look correct, if you simple copy this code you will basically get a huge mess of not much, HOWEVER – It does contain the CSS Class and ID labels to work with the original calendar
If you are after the original files check out Stefano Verna’s work.
Comments are closed here.