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.

[Cooleyvol]

Thanks, bro! That took care of it!

[OldSchoolDSL]

I'm having a hard time getting it to work on my site. It should be counting down to New Years, but rather it keeps counting down to the end of Day Light Savings time. I'm very sure the event is ID 1 is for new years on my calendar

[JohnKF]

Originally Posted by OldSchoolDSL

I'm having a hard time getting it to work on my site. It should be counting down to New Years, but rather it keeps counting down to the end of Day Light Savings time. I'm very sure the event is ID 1 is for new years on my calendar

The only ID you can change is the $event_calendarid which should be set to the calendar id that you want countdown events to come from. Calendar ID 1 is most likely your default calendar. I would recommend creating a new calendar for admin view only which can contain only events that should appear in the countdown. Doing this allows you to include HTML in the title for pictures, formatting, etc. and prevents anyone else seeing what events you have set for a countdown.

When you select a calendar you will see the ID in the address bar of your browser...
/calendar.php?calendarid=1

Also, try to always have another event ready for countdown after the first event has reached zero. The code picks up the first two events and counts down to the first one, then starts the second event countdown.

[OldSchoolDSL]

The only count down I'd like it to do is from my default calender & from my Holiday Manager. It's pointing to a revolving event (new years, 1x each year, every year).

Do you plan on release a new version to which can be easily configured via The Admin Control Panel or would I always need to edit script code?

[JohnKF]

It's unlikely that I'll create a version that's edited via the control panel as creating a special calendar for events, with permissions set to admin view only, provides all the control you need without the need to visit the control panel.

[Dreadan]

Is there any way to have it show reoccurring events?

[JohnKF]

I don't think you can stop it showing recurring events. That's wrong it seems. Must be the way recurring events are stored using the first one as a seed; once the first one has passed there are no further entries in the database.

[denman75]

the calender only goes to 2010 ,u cant select 2011 yay we need bug killer here.

[psypher]

works good

[JohnKF]

Originally Posted by denman75

the calender only goes to 2010 ,u cant select 2011 yay we need bug killer here.

You set the range of the calendar in AdminCP