Dates & times

Dates may be formatted as per the ANU homepage, with a large number for the date, and a smaller month (and year) underneath.

For advice on the appropriate form of dates and times see the editorial style guide.

Dates

15
Jan
2010

To achieve this, use the following code:

<div class="dateblock">
  <div class="day">15</div>
  <div class="month">Jan</div>
  <div class="year">2010</div>
</div>
 

The year class is optional - it is generally not necessary to display the year on a homepage or block that only shows a few events. Year is only really needed in archives where it is possible that multiple years are displayed.

The text alongside the date block should be wrapped in a div with the class datetext. This stops the text from moving underneath the date. Links within a datetext block will only be underlined on hover.

15
Jan

Some descriptive text near the date

For example:

<div class="dateblock">
  <div class="day">15</div>
  <div class="month">Jan</div>
</div>
<div class="datetext">
  <p>Some descriptive text near the date</p>
</div>
 
Week
1
2013

A generic block, with a top, middle and bottom label.

<div class="dateblock">
  <div class="top-label">Week</div>
  <div class="middle-label">1</div>
  <div class="bottom-label">2013</div>
</div>
<div class="datetext padtop">
  <p>A generic block with a top, middle and bottom label.</p>
</div>
 

Optionally, a faint vertical line can be added between the date and the text. To achieve this, use the class dateblock-line.

15
Jan

Some descriptive text near the date in a narrow div.

<div class="dateblock-line">
  <div class="day">15</div>
  <div class="month">Jan</div>
</div>
<div class="datetext">
  <p>Some descriptive text near the date in a narrow div.</p>
</div>
 

Times

You can also insert a time into a dateblock, or use the time alone in a timeblock.

10.00 am
15
January

A dateblock showing the time first

<div class="dateblock">
  <div class="time">10.00 am</div>
  <div class="day">15</div>
  <div class="month">January</div>
</div>
<div class="datetext padtop">
  <p>A dateblock showing the time first</p>
</div>
 
10.00 am
15
January

A dateblock showing the time first, with a faint vertical line

<div class="dateblock-line">
  <div class="time">10.00 am</div>
  <div class="day">15</div>
  <div class="month">January</div>
</div>
<div class="datetext padtop">
  <p>A dateblock showing the time first, with a faint vertical line</p>
</div>
 
10.00 am

A block that is just for time only

<div class="timeblock">
  <div class="timestart">10.00 am</div>
</div>
<div class="timetext">
  <p>A block that is just for time only</p>
</div>
 

Tips & tricks

Date and time blocks are elements which 'float'. If you want to put a dateblock or timeblock inside a box then you will also need to float that box by adding the class left or right to ensure that the box is able to display the contents within it properly. If you do not float the box, the box will only be as big as the date (in the majority of browsers), which is a problem for short event titles.

correct This box is floated
(class="box-solid left")

incorrect This box is not floated
(class="box-solid")

You might also find (in most browsers) that a run of multiple date blocks with short titles makes your layout collapse so that the text for the events are not correctly aligning with the dates.

incorrect titles collapsed:

15
Jan
15
Jan

To avoid this you can either put a divider line in between each line, or you can wrap dateblock and datetext in a div with the class clear.

correct Inserting a divider (below we insert it within the datetext class but you could also insert it afterwards).

<div class="dateblock">
  <div class="day">15</div>
  <div class="month">Jan</div>
</div>
<div class="datetext">
  <p>Text for block one.</p>
  <div class="divline-solid">
  </div>
</div>
 
15
Jan
15
Jan

correct Wrapping in a div with the class clear

<div class="clear">
  <div class="dateblock">
    <div class="day">15</div>
    <div class="month">Jan</div>
  </div>
  <div class="datetext">
    <p>Text for block one.</p>
  </div>
</div>
 

Monthly calendar

Classes are available to style monthly calendars. When the calendar uses the calendar class, cells will have grey, centered text. On the cells for selected days (eg those on which there are events) you can use the eventday class, resulting in the cell having a grey background and bold text (as shown in the example).

Meetings calendar
«  November 2012   »
Su M Tu W Th F Sa
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  
             
<table class="calendar tbl-cell-bdr">
  <caption>Meetings calendar</caption>
  <thead>
  <tr>
    <th colspan="7"><a class="nounderline" href="#">&laquo;</a>&nbsp;&nbsp;November 2012&nbsp;&nbsp; <a class="nounderline" href="#">&raquo;</a>
    </th>        
  </tr>
  <tr>
    <th>Su</th><th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th>      
  </tr>
  </thead>
  <tbody>  
    ...(additional rows)...
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td class="eventday">16</td>
    <td>17</td>        
  </tr>
   ...(additional rows)...
</tbody>
</table>
 

Updated:  30 May 2014/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle