Make a scrolling events list in DotNetNuke

Create a scrolling event list

Today I was asked how much it would cost to create a scrolling event list. After some investigation in the template possibilities of the Events module I could not create it the way I wanted so i figured out a workaround. All in all it cost me about 15 minutes so decided not to charge for it but make a blog posting about it so anyone could implement it. Check out the Demo

So why the workaround

Although the events module has a template option it is all based on a table and there is no option to create our own structure all the items that can be templated in the list view are each part of the table and you cannot create your own structure instead of the table

So how did I do it

I used the template option of the description column to put in the layout I wanted. After that I used jQuery to get all this content and a newly released carousel plug-in that will handle the scrolling

List View Description - Template

As you can see we now have an updated description column with the content we want. Now all we need to do is add a Html module that will take this content and put it in a holder so we can reuse that.

Html module

Update your skin to use this

All we need to do now is update our skin. Download carouFredSel and upload it to your skin folder. Finally add the script reference to your skin.

Where to go from here

We now have a scrolling event list but we still have the events module on screen. You can easily get rid of this by taking an excisting container and make the content invisible 

This will set your event module invisible. If you want to add a new event just change the container back and vice versa.

I hope this helps all of you and let me know if you did somethign nice with it.