Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Calendar & Events > Calendar - One Week View
Mottie (SuperAdmin) 4/10/2010 3:47 PM EST : Calendar - One Week View
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Calendar - One Week View

GuildPortal admin site link to the original post

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 guildId option
Update: 6/13/2012 - added showInTooltip option
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Aaron Lewis (Member) 4/30/2010 4:33 PM EST : RE: Calendar - One Week View
Aaron Lewis
Posts: 1979

0
Like

0
Dislike

Incredibly cool, Mottie.  I'm seeing this pop up on a lot of guild sites already!
Aaron Lewis, GuildPortal.com
TopBottom

Tyrenbane (Applicant) 9/4/2010 9:36 AM EST : RE: Calendar - One Week View

Tyrenbane
Posts: 96

0
Like

0
Dislike

Hi Mottie,

 

I really love this format and I was successful in getting the actual calendar to work, but I need a little assistance with this. First, I cannot get ANY other URLs to work in place of the default event calendar icon URL. Whenever I add one of the URLs below, it makes the entire calendar disappear and I have to start over, I have tried several URLs:

 

http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/icc.png

 

http://www.wow-loot.com/images/icc_img.gif

 

 

I am willing to try other suggestions, but I wanted an Icecrown Citadel icon and a Ruby Sanctum icon on my guild calendar.

 

I am also not sure how to add events that will display on my calendar. I am okay with them being just tooltips but I cannot get anything to display. I couldn’t add events to the default GP calendar, either. I could only add a list of events, but they never appeared on the actual calendar and there were no tooltips, either. You also had to be a Super Admin to even see the list that I added.

 

Please help! I really like the calendar concept and would love to use it. My GP site is www.iconoclasm.guildportal.com.

 

Thank you!



 

TopBottom

Mottie (SuperAdmin) 9/13/2010 4:36 PM EST : RE: Calendar - One Week View
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Tyrenbane!

I'm not quite sure what you are doing to change the default icon, but try replacing this line at the end of the code:
<script type="text/javascript">
 /* weekly script code */
 $('.weekly').weekly({
  defaultEventIcon : "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/icc.png"
 });
</script>
Also, from looking at your progression widget, the boss names are showing up black, so add this to your custom CSS (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to standard tab) - adjust the color in blue to match your default tooltip text color.
#tooltip table { color: #ddd; }
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

JerecSuron (Member) 9/25/2011 2:47 AM EST : RE: Calendar - One Week View

JerecSuron
Posts: 61

0
Like

0
Dislike

I've altered the start day on this calender, (Mon-Sun) But when Sunday morning hits the calender rolls over to next week. Pushing the relevant sunday off the list before the day has even started. Is there a way to make the calender roll over on Sunday Night instead of Sunday Morning?


TopBottom

Mottie (SuperAdmin) 9/25/2011 10:03 AM EST : RE: Calendar - One Week View
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi JerecSuron!

Thanks for finding and reporting that problem. It should be fixed now, but since the File Manager has changed, I can't update the original file, so all you need to do is change the script location (I've updated the original post above) to this:
<script type="text/javascript" src="/GuildFiles/258012/gp-weekly-min.js"></script>
If you find any other problems, I'd appreciate hearing about them!
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

JerecSuron (Member) 9/29/2011 1:19 PM EST : RE: Calendar - One Week View

JerecSuron
Posts: 61

0
Like

0
Dislike

Hi Mottie 

   This fix did work, but now my calender will not start on Monday...it defaulted back to sun-sat.


TopBottom

Mottie (SuperAdmin) 9/29/2011 4:18 PM EST : RE: Calendar - One Week View
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

It's working for me... did you set the startWeek option to "mon"?
$('.weekly').weekly({
  startWeek: "mon"
});
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

JerecSuron (Member) 9/29/2011 8:04 PM EST : RE: Calendar - One Week View

JerecSuron
Posts: 61

0
Like

0
Dislike

That weird PC at work was showing Sun-Saturday...pc at home is showing Monday..

Yes it is correct. 


TopBottom

Giolon (Applicant) 2/24/2012 5:23 PM EST : RE: Calendar - One Week View
Giolon
Posts: 17

0
Like

0
Dislike

This is a great help!  Though I wonder how can I make it show this week and next week in the same widget w/o the "Today" highlighting showing up on next week?

For example, I customize your script to show this week and next week as instructed:
$('.weekly1').weekly();
$('.weekly2').weekly({ showNextWeek:
true });

But then the day of the week that is "Today" this week also gets highlighted on the next week display.  If I comment out the CSS formatting for td.weekly-today, it affects both weeks.

 

TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%