Calendar - One Week View

I've been trying to modify the jQuery calendar plugin to show only only week with events, but I finally just gave up and wrote my own  I think it's kind of cool because you can show this week, next week or the next seven days of events, or all of them at once - check out my calendar tab!

The calendar is completely CSS customizable. It will also use your category icon if set, otherwise you will see a default icon (). Here is what the calendar looks like:



*NOTE: to get the tooltips to work like above, please add the modified tooltip script from this post.

Basic Code
Add the following to a free form text/HTML type widget anywhere on your site. Make sure the editor is in Raw/Script mode prior to pasting in the code (upper right corner).

<style type="text/css">
/* Overall table */
.weekly-table, .weekly-table th, .weekly-table td { border: #777 1px solid; border-collapse: collapse; }

/* Header - contains the days of the week */
th.weekly-header { text-align: center; width: 14.3%; text-transform: capitalize; background: #222; color: #fff; }

/* weekdays */
.weekly-day { height: 80px; vertical-align: top; padding-right: 5px; }
.weekly-day span.num { float: right; }

/* weekends */
.weekly-weekend { background: #333; }

/* today */
td.weekly-today { background: #444; }

/* event and event image */
a.weekly-event img { width: 20px; height: 20px; float: left; }
a.weekly-event-shown {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: #fff 1px solid;
    color: #fff;
    display: block;
    float: left;
    text-decoration: none;
    width: 100%;
    font-size: .9em;
}
a.weekly-event-shown img { width: 16px; height: 16px; }
a.weekly-event-shown .fc-event-time {
    font-weight: bold;
}

/* event title in tooltip */
#tooltip .title { font-weight: bold; }
</style>

<!-- calendar box -->
<div class="weekly"></div>

<script type="text/javascript" src="/GuildFiles/258012/gp-weekly-min.js"></script>
<script type="text/javascript">
 /* weekly script code */
 $('.weekly').weekly();
</script>

Customizing

CSS

• ".weekly-table"
  
  
  • Assigned to the table that contains the calendar.
  • In the CSS above it is defined to add a border around the table and every cell.
    
    
• "th.weekly-header"
  
  • Assigned to each header cell.
  • The CSS above centers the text, sets the width to 14.3% ( which is 100%/7, so each table cell is the same width ).
  • The days of the week are in lower case, so the next bit of CSS capitalizes the words.
  • Lastly, the CSS sets the background and text color of just the header. If you remove the "th" from the beginning, the weekend background color will over-ride this CSS
    
    
• ".weekly-day"
  • Assigned to each cell of the table (below the header).
  • As you can see, this is where you set the height of the cell - it's set to 80px in anticipation of the calendar being placed in the center column of your site. Change it to something like 40px for a side column.
  • Set to vertically align the text to the top of the cell with 5px of padding.
    
    
• ".weekly-day span.num"
  • Assigned to the actual date (number) placed in the cell.
  • Contains float: right to position the date in the upper right corner.
    
    
• ".weekly-weekend"
  • Assigned to the weekend cells
  • Sets the background color of the weekend.
    
    
• "td.weekly-today"
  
  • Assigned to today's date
  • Sets the background color of today
  • The "td" is required to over-ride the ".weekly-day" color setting.
    
    
• ".weekly-event img"
  • Assigned to the image wrapper, but targets the image itself
  • This is where you set the image size and where it is placed (float:left)
    
    
• "#tooltip .title"
  • Assigned to the event title, but it is actually located inside the tooltip that pops up
  • This CSS makes it bold, but you can add color or other styling

HTML

The basic required HTML is as follows:

<div class="weekly"></div>

But if you decide to add multiple weekly calendars, lets say this week and next week, then add it twice, but with different class names (in purple)

<div class="weekly1"></div>
<div class="weekly2"></div>

then adjust the script (more details later)

$('.weekly1').weekly();
$('.weekly2').weekly({ showNextWeek: true });

Script

• This is a list of options, and their defaults, you are mostly likely to use for the weekly calendar. Notice that each parameter is followed by a comma, except the very last one! Please make sure that there is a comma between each parameter. Most browsers can ignore the last comma, but IE will cough up a lung at you.
  
  $('.weekly1').weekly({
    startWeek        : "sun", // Set day to start the weekly calendar
    shortTitle       : false, // Only show the first letter of the day of the week, if true
    showNextWeek     : false, // Calendar will show next weeks schedule starting from the "startWeek" day, if true
    showNext7Days    : false, // Ignores "startWeek" & "showNextWeek", and shows the next 7 days
    showInTooltip    : true,  // Add events into the icon's tooltip; if false, show the event text
    defaultEventIcon : "http://www.axiomfiles.com/Files/278466/icon-info.png", // Icon used if no category icon is available
    tooltipWidth     : "200", // Width of the tooltip that pops up (only works with the modified tooltip script)
    daysOfWeek       : ["sun","mon","tue","wed","thu","fri","sat"], // Added in case you use a different language (use lower case)
       groupId          : null   // null will show your guild calendar; change to a guild Id to show an affiliated site (i.e. 258012)
  });

• startWeek
  

  startWeek : "sun" // Set day to start the weekly calendar

  • Add this variable if you want to start your weekly calendar on any day besides Sunday (it's the default)
  • Please keep this variable to three letters and in all lower case. If the variable is not recognized, it will default to Sunday (the first day of the week).
  • If you set the "daysOfWeek" variable to use a different language, then you should also set this variable, unless the week starting with Sunday is okay.
    
    
• shortTitle
  

  shortTitle : true // Only show the first letter of the day of the week, if true

  • Add this variable, set to true, if you only want to show the first letter of the day of the week.
  • This is only useful if you are adding the weekly calendar to one of the side columns
    
    
• showNextWeek
  

  showNextWeek : true // Calendar will show next weeks schedule starting from the "startWeek" day, if true

  • Add this variable, set to true, if you want to show the events occurring next week.
  • The week will still start with the set "startWeek" day
    
    
• showNext7Days
  

  showNext7Days : true // Ignores "startWeek" & "showNextWeek", and shows the next 7 days

  • Add this variable, set to true, if you want to show the events occurring in the next seven days
  • Setting this to true will make the script ignore the "startWeek" and "showNextWeek" settings.
    
    
• showInTooltip
  

  showInTooltip : true // Add events into the icon's tooltip; if false, show the event text

  • Add this variable, set to true, if you want to show the events inside of the icon tooltip
  • Setting this to false will make the script add the event data inside the calendar day. It should look like the regular calendar.
    
    
• defaultEventIcon
  

  defaultEventIcon : "http://www.axiomfiles.com/Files/278466/icon-info.png" // Icon used if no category icon is available

• Add this variable if you want to change the default icon that shows only if your event category doesn't have an icon associated to it.
• Change the full URL in orange to your desired icon. The size of this image is adjusted in the CSS, so don't worry about its size.
  
  
• tooltipWidth
  

  tooltipWidth : "200", // Width of the tooltip that pops up (only works with the modified tooltip script)

  • Add this variable of you want to adjust the size of the tooltip that pops up. This adjustment weill only work if you are using the modified tooltip script from this post.
  • This width in red is in pixels.
    
    
• daysofWeek
  

  daysOfWeek : ["sun","mon","tue","wed","thu","fri","sat"] // Added in case you use a different language (use lower case)

  • Add this optional variable only if you are using a different language, for example if you are French, use this ( I hope I got them all right LOL ).
    
    daysOfWeek : ["dim","lun","mar","mer","jeu","ven","sam"]
    
    
  • Once again, only use the first three letters of the day and all in lower case.
  • The CSS capitalizes the first letter
    
    

More Examples

• Three Views: On my Help-Site Calendar page, you will see three versions displayed
  
  
  
  This can be duplicated by adding the following HTML/Script
  

  <b>Events This Week</b>
  <div class="weekly1"></div>
  <br><br><br>
  <b>Events Next Week</b>
  <div class="weekly2"></div>
  
  <b>Events in the next 7 Days</b>
  <div class="weekly3"></div>
  
  <script type="text/javascript" src="/GuildFiles/258012/gp-weekly-min.js"></script>
  <script type="text/javascript">
   /* weekly script code */
   $('.weekly1').weekly({ shortTitle : true });
   $('.weekly2').weekly({ showNextWeek : true, shortTitle : true });
   $('.weekly3').weekly({ showNext7Days : true, shortTitle : true });
  </script>

Update: 9/25/2011 - Fixed calendar to not change on Sunday when the start week is set to a different day.
Update: 6/9/2012 - added groupId option
Update: 6/13/2012 - added showInTooltip option

Updated the weekly script with two new options (see the post above for more details):

• groupId - allows you to add alliance guild information
• showInTooltip - add the event inside the calendar date instead of inside the tooltip.