DerekAllard.com

Modifying the default CodeIgniter Calendar template for fun and profit

A project I’m working on needs a monthly calendar. Naturally, I’m using CodeIgniter as the base of it. Here’s the default CI-based calendar:

default CI calendar

and here’s what I ended at (you can grab the files (CSS, config file, sample controller/view) below).

completed CodeIgniter monthly calendar

My needs were something more akin to the interface iCal provides; broad, spacious, subtle. Obviously, the default is just an unstyled base that CI provides as a starting grounds. The Calendar library documentation provides some insight into how we can start changing this up.

First step was getting longer day names:

$config['day_type''long'

Gives us an already decided improvement:

with longnames

Next up, I wanted to display the events instead of links.

$config['template''
    {cal_cell_content}<span class="day_listing">{day}</span>&nbsp;&bull; {content}&nbsp;{/cal_cell_content}
    {cal_cell_content_today}<div class="today"><span class="day_listing">{day}</span>&bull; {content}</div>{/cal_cell_content_today}
    {cal_cell_no_content}<span class="day_listing">{day}</span>&nbsp;{/cal_cell_no_content}
    {cal_cell_no_content_today}<div class="today"><span class="day_listing">{day}</span></div>{/cal_cell_no_content_today}
'

Its worth noting here that I pulled the day number into its own <span>, so that I could style the day number separately from the rest of the information about the day. To be consistent, I also gave the same treatment to days without events listed (CI calls these “cal_cell_no_content”). I’d prefer not to wrap the whole of the cell for “today” in another <div>, but CodeIgniter has no other way of labeling the current day on the calendar without touching the library or using javascript. Besides, its only one extra <div>.

I wanted to be able to style this sucker, so adding an identifying class to the opening <table> tag was a no brainer (If you know for a fact you’re only going to have 1 month per page, an id might have been a better choice). Also, those day names really should be table headers (<th>) and not normal table cells, so I dropped in “table_open” and “week_day_cell”. The full template now looks like this

$config['template''
    {table_open}<table class="calendar">{/table_open}
    {week_day_cell}<th class="day_header">{week_day}</th>{/week_day_cell}
    {cal_cell_content}<span class="day_listing">{day}</span>&nbsp;&bull; {content}&nbsp;{/cal_cell_content}
    {cal_cell_content_today}<div class="today"><span class="day_listing">{day}</span>&bull; {content}</div>{/cal_cell_content_today}
    {cal_cell_no_content}<span class="day_listing">{day}</span>&nbsp;{/cal_cell_no_content}
    {cal_cell_no_content_today}<div class="today"><span class="day_listing">{day}</span></div>{/cal_cell_no_content_today}
'

And the results:

event headers

Rather then call that when I load up the calendar, I just dropped the above 2 config options into a “calendar.php” file that I save in application/config.

Now we have a base we can work with! Drop in a quick stylesheet and we’re done!

.calendar {
    font
-familyArialVerdanaSans-serif;
    
width100%;
    
min-width960px;
    
border-collapsecollapse;
}

.calendar tbody tr:first-child th {
    color
#505050;
    
margin0 0 10px 0;
}

.day_header {
    font
-weightnormal;
    
text-aligncenter;
    
color#757575;
    
font-size10px;
}

.calendar td {
    width
14%; /* Force all cells to be about the same width regardless of content */
    
border:1px solid #CCC;
    
height100px;
    
vertical-aligntop;
    
font-size10px;
    
padding0;
}

.calendar td:hover {
    background
#F3F3F3;
}

.day_listing {
    display
block;
    
text-alignright;
    
font-size12px;
    
color#2C2C2C;
    
padding5px 5px 0 0;
}

div
.today {
    background
#E9EFF7;
    
height100%;

You can download the example files if you want to play around.

Comments

Adam Griffiths wrote on

Derek your timing of this post is just perfect as I am about to start work on a project that needs better looking calendar’s.

This also shows how easy it is to modify CodeIgniter libraries, one of the many reasons I love using it so much.


Thanks.

Dennis Rasmussen wrote on

That’s basically the same way I do this, however I do have navigation for the months as well.

And as another neat thing, I set another background color for the days without a date in the current month (for December 2010 that would be Sunday—>Tuesday) and a hover effect for each cell.

Steven Woodson wrote on

I hadn’t even realized this was available in CI, definitely going to try it out myself the next time I need to integrate a calendar.

This project you’re working on wouldn’t happen to be BambooInvoice would it? :)

Derek wrote on

Glad its helpful guys! Steven, the project isn’t Bamboo… sorry :)

Rob wrote on

Seriously great article, was just having a read of documentation for the base CI cal and found this!

Really like your site’s top header banner too :)

Daniel wrote on

I’ve recently started using CodeIgniter and I’m becoming a fan of your work. I’m more a Java programmer, so your tutorials and shortcuts are extremely helpful. Thanks!

Denford wrote on

Even evil robots have invlaid xhtml from time to time.

http://derekallard.com/blog/post/modifying-the-default-codeigniter-calendar-template-for-fun-and-profit/

Line 116, Column 23: there is no attribute “name”

Love your work though, Your one of my personal deities. I am hoping you might be helping with Fuel as it grows?

Cheers
Denford

Derek wrote on

LOL Denford, oh wow. Nice find! Thanks (also, thanks for the very kind words). Fixed up the invalid code… sheesh. I blame that one on the robots.

John_Betong wrote on

Many thanks for the inspiration,  I upgraded my site today and now have a five-year calendar showing “Johns Joke of the day”.

The thumbnails were a pain but I managed them eventually.

Stefano wrote on

I had to extend the default calendar library (creating a libraries/MY_Calendar) to display more than one events at once… it was hard but not as hard as having to write a brand new library by myself, so thanks guys at CI :)

You can have a look at the calendar here (on the sidebar):

http://www.adrianobilardi.it