13-A 13-B Calendar

The events are displayed in the calendar. The calendar has two different display views: list (weekly) and grid (monthly). By default the list view is enabled.

The calendar comes along with a sidebar to filter the events.

The pagination switches the calendar: week per week on list view and month per month on grid view.

Usage with HTML Attribute

The attribute data-aau="calendar" has to be placed on the calendar container.

<div class="calendar grid-view" data-aau="calendar" data-requesturl="http://example.com/api/ajax/getevents/" data-requesttype="POST">
  <div class="column header clearfix">
    <div class="padded">
      <h2 class="title-list">September 15-21</h2>
      <h2 class="title-grid">September 2013</h2>
      <div class="view-modes float-right_tablet">
        <p><a data-viewmonthly>Monthly View</a> | <a data-viewweekly class="active">Weekly View</a></p>
      </div>
      <div class="pagination float-right_tablet float-right_small small" data-aau="pagination" data-smallsize="true"></div>
    </div>
  </div>
  <ul class="labels">
    <li><span>Sun</span></li>
    <li><span>Mon</span></li>
    <li><span>Tue</span></li>
    <li><span>Wed</span></li>
    <li><span>Thu</span></li>
    <li><span>Fri</span></li>
    <li><span>Sat</span></li>
  </ul>
  <div class="weeks">
    <ul class="week" data-title="September 1-7" data-month="September 2013">
      <li>
        <div class="day">
          <div class="date"><span class="date-label">Sunday</span> 1</div>
          <ul>
            <li>
              <div class="time">
                <span>8:30 <span class="period">a.m.</span></span>
              </div>
              <span class="label">Fall Classes Begin</span>
            </li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
          </ul>
        </div>
      </li>
      <li><!--...--></li>
      <li><!--...--></li>
      <li><!--...--></li>
      <li><!--...--></li>
    </ul>
    <ul class="week current" data-title="September 8-15">
      <!--...-->
    </ul>
    <ul class="week" data-title="September 15-21">
      <!--...-->
    </ul>
    <ul class="week" data-title="September 22-28">
      <!--...-->
    </ul>
    <ul class="week" data-title="September 29-5">
      <!--...-->
      <!--...-->
      <li>
        <div class="day muted">
          <div class="date"><span class="date-label">Friday</span> 1</div>
          <ul>
            <li><div class="time"><span>8:30 <span class="period">a.m.</span></span></div><span class="label">Fall Classes Begin</span></li>
            <li>...</li>
          </ul>
        </div>
      </li>
      <li><div class="day muted">...</li>
    </ul>
  </div>
</div>

Usage with Javascript

$('#calendar').calendar();

HTML Attributes

Name Type Default Required Description Example
data-requesturl String '' no Request URL called to get the calendar results through Ajax.
<div data-aau="calendar"
data-requesturl="http://[EXAMPLE_URL]">
  ...
</div>
data-requesttype String 'GET' no Request type to call the calendar Ajax script. Two methods are: 'GET' or 'POST'.
<div data-aau="calendar" data-requesturl="http://[EXAMPLE_URL]" data-requesttype="POST">...</div>

Using Options with Javascript

You can use the options with Javascript by passing them in an object without the prefix "data-" in the option name.

$('#calendar').calendar({
  requesturl: 'http://[EXAMPLE_URL]',
  requesttype: 'POST'
});

Ajax

Get Events

This script defined in data-requesturl loads the events. The results will then be filled in the calendar.

Parameters
Name Type Example Description
category String, Number 1 Value of the selected element in the sidebar
month Number 11 Index of the month to filter the events ( January = 0 and December = 11 )
year Number 2013 Year to filter the events
Response HTML Structure

The script must return HTML data respecting the following structure (see example here):

<ul class="week" data-title="September 1-7" data-month="September 2013">
  <li>
    <div class="day">
      <div class="date"><span class="date-label">Sunday</span> 1</div>
      <ul>
        <li>
          <div class="time">
            <span>8:30 <span class="period">a.m.</span></span>
          </div>
          <span class="label">Fall Classes Begin</span>
        </li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>
  <li><!--...--></li>
  <li><!--...--></li>
  <li><!--...--></li>
  <li><!--...--></li>
</ul>
<ul class="week current" data-title="September 8-15">
  <!--...-->
</ul>
<ul class="week" data-title="September 15-21">
  <!--...-->
</ul>
<ul class="week" data-title="September 22-28">
  <!--...-->
</ul>
<ul class="week" data-title="September 29-5">
  <!--...-->
  <!--...-->
  <li>
    <div class="day muted">
      <div class="date"><span class="date-label">Friday</span> 1</div>
      <ul>
        <li><div class="time"><span>8:30 <span class="period">a.m.</span></span></div><span class="label">Fall Class begin</span></li>
        <li>...</li>
      </ul>
    </div>
  </li>
  <li><div class="day muted">...</li>
</ul>

Please note that the days of the following month must have the class muted in order to look disabled.

Live Example

November 3-9

November 2013

  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • Sunday 27
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Monday 28
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Tuesday 29
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Wednesday 30
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Thursday 31
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Friday 1
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Saturday 2
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Sunday 3
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Monday 4
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Tuesday 5
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Wednesday 6
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Thursday 7
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Friday 8
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Saturday 9
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Sunday 10
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Monday 11
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Tuesday 12
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Wednesday 13
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Thursday 14
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Friday 15
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Saturday 16
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Sunday 17
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Monday 18
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Tuesday 19
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Wednesday 20
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Thursday 21
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Friday 22
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Saturday 23
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Sunday 24
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Monday 25
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Tuesday 26
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Wednesday 27
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Thursday 28
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Friday 29
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
  • Saturday 30
    • 8:30 a.m.
      Fall Class begin
    • all day
      Fall Semester Begins
    • 11:00 a.m.
      Men's and Women's Soccer vs. Humboldt State
    • 12:00 p.m.
      Free First Thursdays: Chinese Historical Society
    • 1:00 p.m.
      Men's and Women's Soccer vs. Humboldt State
    • 3:00 p.m.
      Free First Thursdays: Chinese Historical Society
<div class="calendar grid-view" data-aau="calendar" data-requesturl="http://example.com/api/ajax/getevents/" data-requesttype="POST">
  <div class="column header clearfix">
    <div class="padded">
      <h2 class="title-list">September 15-21</h2>
      <h2 class="title-grid">September 2013</h2>
      <div class="view-modes float-right_tablet">
        <p><a data-viewmonthly>Monthly View</a> | <a data-viewweekly class="active">Weekly View</a></p>
      </div>
      <div class="pagination float-right_tablet float-right_small small" data-aau="pagination" data-smallsize="true"></div>
    </div>
  </div>
  <ul class="labels">
    <li><span>Sun</span></li>
    <li><span>Mon</span></li>
    <li><span>Tue</span></li>
    <li><span>Wed</span></li>
    <li><span>Thu</span></li>
    <li><span>Fri</span></li>
    <li><span>Sat</span></li>
  </ul>
  <div class="weeks">
    <ul class="week" data-title="September 1-7" data-month="September 2013">
      <li>
        <div class="day">
          <div class="date"><span class="date-label">Sunday</span> 1</div>
          <ul>
            <li>
              <div class="time">
                <span>8:30 <span class="period">a.m.</span></span>
              </div>
              <span class="label">Fall Classes Begin</span>
            </li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
          </ul>
        </div>
      </li>
      <li><!--...--></li>
      <li><!--...--></li>
      <li><!--...--></li>
      <li><!--...--></li>
    </ul>
    <ul class="week current" data-title="September 8-15">
      <!--...-->
    </ul>
    <ul class="week" data-title="September 15-21">
      <!--...-->
    </ul>
    <ul class="week" data-title="September 22-28">
      <!--...-->
    </ul>
    <ul class="week" data-title="September 29-5">
      <!--...-->
      <!--...-->
      <li>
        <div class="day muted">
          <div class="date"><span class="date-label">Friday</span> 1</div>
          <ul>
            <li><div class="time"><span>8:30 <span class="period">a.m.</span></span></div><span class="label">Fall Classes Begin</span></li>
            <li>...</li>
          </ul>
        </div>
      </li>
      <li><div class="day muted">...</li>
    </ul>
  </div>
</div>

Sign In