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:
and here’s what I ended at (you can grab the files (CSS, config file, sample controller/view) below).
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:
Next up, I wanted to display the events instead of links.
$config['template'] = '
{cal_cell_content}<span class="day_listing">{day}</span> • {content} {/cal_cell_content}
{cal_cell_content_today}<div class="today"><span class="day_listing">{day}</span>• {content}</div>{/cal_cell_content_today}
{cal_cell_no_content}<span class="day_listing">{day}</span> {/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> • {content} {/cal_cell_content}
{cal_cell_content_today}<div class="today"><span class="day_listing">{day}</span>• {content}</div>{/cal_cell_content_today}
{cal_cell_no_content}<span class="day_listing">{day}</span> {/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:
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-family: Arial, Verdana, Sans-serif;
width: 100%;
min-width: 960px;
border-collapse: collapse;
}
.calendar tbody tr:first-child th {
color: #505050;
margin: 0 0 10px 0;
}
.day_header {
font-weight: normal;
text-align: center;
color: #757575;
font-size: 10px;
}
.calendar td {
width: 14%; /* Force all cells to be about the same width regardless of content */
border:1px solid #CCC;
height: 100px;
vertical-align: top;
font-size: 10px;
padding: 0;
}
.calendar td:hover {
background: #F3F3F3;
}
.day_listing {
display: block;
text-align: right;
font-size: 12px;
color: #2C2C2C;
padding: 5px 5px 0 0;
}
div.today {
background: #E9EFF7;
height: 100%;
}
You can download the example files if you want to play around.
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.