vBulletin CMS Widgets - Countdown to Calendar Event

This widget picks up the next 2 events from a calendar of your choice.

It displays a countdown to the first event then once the first event has arrived it begins a countdown to the second event. The only reason for picking up two events is that someone may visit the page close to the end of the first event then see the no event message. By picking up two events such a visitor will see the countdown to the second event start.

To install...

From the ZIP file, extract eventcountdown.js and copy it to your site.

Navigate to AdminCP -> Style & Templates -> Style Manager -> Edit Template
Double click the headinclude template to edit it and add the following just above the first <script tag you find...

<script src="scripts/eventcountdown.js" type="text/javascript"></script>

...the above assumes you have copied eventcountdown.js file in to a folder called scripts. Adjust the src path to wherever you have placed the .js file.

Navigate to AdminCP -> CMS -> Widgets.
Create a PHP Type Widget and paste the below code.

PHP Code:

ob_start();
global $db,$vbulletin;
$event_calendarid="1";
$no_events_message="<div style='width: 100%; text-align: center; font-weight: bold'>There are no events.</div>";
$today_date = mktime(0, 0, 0, date(date("m")), date(date("d")),  date(date("y")));
$and=" and dateline_from > '".$today_date."'";

$getevents=$db->query_read("SELECT eventid, title, dateline_from from " . TABLE_PREFIX . "event WHERE calendarid='".$event_calendarid."' $and order by dateline_from ASC LIMIT 2");
$count=1;
if(!$db->num_rows($getevents))
{
echo $no_events_message;
} 
else
{
echo "<script type='text/javascript'>\n";
WHILE ($events=$db->fetch_array($getevents))
{
$event_title=$events['title'];
$event_date = vbdate('U',$events['dateline_from'], false,true,false,true)-vbdate('U');
if($count==1)
{
echo "var CountDownTimer=new CountDown('CountDownToChange',1,'".$event_title."<br />','".$event_date."','ywdhms',1)\n";
}
else
{
echo "CountDownTimer.AddNewEvent('".$event_title."<br />','".$event_date."','ywdhms',".$count.")\n";
}
$count++;
}
}
echo "CountDownTimer.DisplayTime(FormatResults)\n";
echo "</script>\n";
$db->free_result($getevents);
unset($events);
$output=ob_get_contents();
ob_end_clean(); 


To create a forum block...

1. Navigate to AdminCP -> Forums & Moderators -> Forum Blocks Manager
2. Click the Add Block button
3. From the drop down list select Custom HTML/PHP
4. Click the Continue button
5. Give the block a title (e.g. Event Countdown) and a short description
6. Set the cache time to 1 minute
7. In Content Type select PHP
8. In Content paste the PHP code above in to the text box
9. Click the Save button

You can set the value for $event_calendarid to the calendar that you want countdown events to come from. Change $no_events_message to the HTML you want to have appear when there are no events left in the selected calendar.

This is the first widget I've written so if you spot any errors or improvements that can be made then please let me know.

If you have an all day event in the calendar the countdown is to the begining of that day. Add a ranged event to the calendar for an exact time. Also, allow for any changes that may occur if a change to or from DST occurs.

Added ob_start(); to beginning of script (17th Oct, 2010)

To have a picture make the Title of the event in the calendar the HTML to display the picture. For example...

Your Event<br /><img src="images/picture.gif" width="140" height="130" alt="">

...which shows as the text above in the calendar title, but displays as text and a picture in the countdown.

[betts02]

REQUESTS :

Allow upto 5 events
Forum Block

Cheers

[JohnKF]

I'll do that but in the meantime just change the number 2 at the end of this line...

("SELECT eventid, title, dateline_from from " . TABLE_PREFIX . "event WHERE calendarid='".$event_calendarid."' $and order by dateline_from ASC LIMIT 2");

...to the number of events you want picking up.

The JavaScript can handle many events.

What's Forum Block? I only started using vBulletin a week or so ago and I'm not completely familiar with it yet.

[betts02]

Forum block is the side bar if you wish

Check my site in the link below to see the side blocks i have

[paarmis.queen]

tnx installed

[JohnKF]

Thank betts02. I assume then that you wanted multiple countdowns to be displayed. The script only shows a single countdown to the next event. Once that has been reached it starts the countdown to the second event. If the visitor arrives at a page with the countdown running a few seconds before zero then once zero arrives the second countdown will start. This is the reason for picking up 2 events. I'll look at allowing for multiple countdows to be show, say the first one from each calendar.

[ProFifaLeagues]

Be great in the forum block if you can do mate

[betts02]

What i wanted if possible is for this in a forum block

Shows events 1-5

Event 1 shall be on countdown
Event 2-5 shall be shown

As soon as event 1 has been and gone, It removes the event and places event 2 on countdown

Then event 6 shall become event 5 and be shown

[JohnKF]

Noted. Suggest you have a quick try of it as it stands so that you can see how an event countdown is show regarding width for an event that's a few weeks off.

Also I forgot to mention another slight change you can make...
In the widget PHP code find 'ywdhms' which appears twice. This sets which units appear in the countdown. The default is to show a countdown in Years, Weeks, Days, Hours, Minutes and Seconds.

You can pick which units are shown, so for a seconds only countdown you should just need 's' and for Days, and Minutes it would be 'dm'.

[betts02]

Tried it in a forumblock and it just messes all my forums up