Tag Archives: calendar

Create jQuery Tabs in Sharepoint 2010

This post will show you how to create a tabbed interface using Sharepoint Designer and some basic jQuery skills. I do not profess to know everything about jQuery, but this is getting the job done hopefully without too sloppy of code. Watch the screencast (no audio), then follow the instructions below.

Click to skip ahead:
Setup
Create the Tab Structure
Create the Panel Structure
Add the jQuery
Full Code + CSS


Setup


Create a blank aspx page in Sharepoint Designer. Other than that top 5 lines of Sharepoint code that all begin with “<%", take everything else out. The two things you will need are 1) the placeholder for additional page head for holding any css and the jQuery scripts,

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

and 2) the main placeholder, for holding the actual tabs.

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">


Create the Tab Structure


You'll create the tabs with an unordered list. It's important to give each tab two classes. One that designates it as a tab (mine is "choice"); one that designates which division it is (mine is "hs" or "ms", etc.); and you'll also want to make one tab activated by default. This is done by adding the CSS class "activated". You could also do this with jQuery if you wanted. Check the code at the bottom for all of the wrapping divs that will work with jQuery.

<ul class="div-nav">
<li class="choice show-hs activated">High School</li>
<li class="choice show-ms">Middle School</li>
<li class="choice show-es">Elementary School</li>
</ul>


Create the Panel Structure


Each panel needs two classes as well. One will designate it as a panel (mine is "webpart"); and one will designate which division it is (again, "hs", "ms", etc.). For testing purposes just put some plain text in each panel so you can confirm the tabbing is working. After that, you can put anything inside. For instance, on my production page I am loading 16 (yes, a bit worrisome) Content Query WebParts, yet only a few are showing at a time because of my tab system. Again, check the code at the bottom for all of the wrapping divs that will work with jQuery.

<div class="webpart hs">High School Stuff</div>
<div class="webpart ms">Middle School Stuff</div>
<div class="webpart es">Elementary School Stuff</div>


Add the jQuery


First, make sure you're calling the jQuery script (I have a local copy installed). Then I'll split up my code into several parts and explain it.

I've wrapped everything in a function that runs when the tabs are loaded and ready to go:

$("ul.div-nav").ready(function(){
});

Then I hide all of the panels, and fade in the first one (in this case the High School panel, as I have the High School tab activated).

$("#daily-wrapper .webpart").hide();
$("#daily-wrapper .webpart.hs").fadeIn('slow');

Next I set the tab magic. Each tab needs to have a toggleClass attribute attached to it so you'll know which tab you're on. Then you'll want to deactivate the activated class on all other tabs.

$("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});
$("ul.div-nav li.choice").click(function(){$(this).siblings("ul.div-nav li").removeClass("activated")});

Finally, anytime a tab is clicked I fade everything out, and then only fade in the particular panel that the tab calls for.

$("ul.div-nav li.choice").click(function(){$("#daily-wrapper .webpart").fadeOut('fast')});
$("ul.div-nav li.show-hs").click(function(){$("#daily-wrapper .webpart.hs").fadeIn('slow')});
$("ul.div-nav li.show-ms").click(function(){$("#daily-wrapper .webpart.ms").fadeIn('slow')});
$("ul.div-nav li.show-es").click(function(){$("#daily-wrapper .webpart.es").fadeIn('slow')});

As you can see, it's actually quite basic. I'm sure there are some things here against best practice, and definitely let me know if you find a better way of accomplishing this. But this seems to work for us.


Full Code (CSS Below)

<%@ Register tagprefix="WebControls" namespace="Microsoft.SharePoint.Publishing.WebControls" assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%-- _lcid="1033" _version="14.0.4762" _dal="1" --%>
<%-- _LocalBinding --%>
<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"  %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>
<script type="text/javascript">
$("ul.div-nav").ready(function() {
	$("#daily-wrapper .webpart").hide();
	$("#daily-wrapper .webpart.hs").fadeIn('slow');
	$("ul.div-nav li.choice").click(function(){$(this).toggleClass("activated")});
	$("ul.div-nav li.choice").click(function(){$(this).siblings("ul.div-nav li").removeClass("activated")});
	$("ul.div-nav li.choice").click(function(){$("#daily-wrapper .webpart").fadeOut('fast')});
	$("ul.div-nav li.show-hs").click(function(){$("#daily-wrapper .webpart.hs").fadeIn('slow')});
	$("ul.div-nav li.show-ms").click(function(){$("#daily-wrapper .webpart.ms").fadeIn('slow')});
	$("ul.div-nav li.show-es").click(function(){$("#daily-wrapper .webpart.es").fadeIn('slow')});
});
</script>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<div id="daily-wrapper">
<ul class="div-nav">
<li class="choice show-hs activated">High School</li>
<li class="choice show-ms">Middle School</li>
<li class="choice show-es">Elementary School</li>
</ul>
<div class="content">
<div class="calendar">
<h2>Calendar</h2>
<div class="webpart hs">High School Stuff</div>
<div class="webpart ms">Middle School Stuff</div>
<div class="webpart es">Elementary School Stuff</div>
</div>
</div>
</div>
</asp:Content>

Full CSS


#daily-wrapper ul.div-nav li {
	font-size:1.2em;
	margin:0px;
	border-right:1px solid #fff;
}
#daily-wrapper .calendar {
	position:relative;
	border:0px solid #333;
	width:67%;
	float:left;
}
#daily-wrapper .calendar {
	margin-right:19px;
	width:30%
}

#daily-wrapper .content .calendar h2 {
	color:#fff;
	text-indent:-9999px;
	height:64px;
	background: #fff url('/Style Library/images/calendar-header.jpg') no-repeat top left;
	margin-bottom:20px;
}

ul.div-nav {
	width:100%;
	background:#999;
	float:left;
	text-align:center;
}
ul.div-nav li {
	display:block;
	float:left;
	color:#fff;
	text-decoration:none;
	padding:10px;
}
ul.div-nav li:hover {
	background:#b80000;
	cursor:pointer;
}
ul.div-nav li.activated {background:#b80000;}

How to Add a Custom Event Title to a Sharepoint Calendar

This tutorial will show you how I’ve taken 2 columns and combined them into one title to display on my Sharepoint calendar.

Step 1: Create your columns
In my example I’ve created:

  • Grade Level (choice)
  • Subject (text)

Step 2: Create a Calculated Column
In the calculated column (named “Event Title”), I’ve put a calculation that concatenates two of my columns to one field

=[Grade Level]&" - "&[Subject]

Note: This cannot be done with a multiple-select field (checkboxes)

Step 3: Modify your calendar view
In the view modification screen, go to the third option, “Calendar Columns” and change the “Month View Title”, “Week View Title”, and “Day View Title” to “Event Title”. You can leave location as is.

Now your calendar should display the concatenated, calculated column as its main title.

Enjoy!


Recurring Calendar setup in Drupal 7

What you’ll need:

Drupal 7.x
Ctools
Views
Date (includes date_api & date_views)

  1. Download the three modules (Ctools, Views, & Date). Install the modules and activate. Note: the Date module requires that you set the timezone and first day of the week settings. If you haven’t, it should alert you of that when you install the modules.
  2. Once you install these modules, you will see nothing different right away. No new content types are created…nothing useful that you can see. However, click on Structure > Views, and you’ll see what the Calendar module has done. You can see it has created a “Calendar” view. This calendar view includes a block, a feed, and a page. We’ll come back to this later.
  3. Next go to Structure > Date Tools. Here is where you will create your calendar item. It will create a bunch of views, the correct content type, etc. Follow the date wizard to setup your calendar.

Some recommended settings and things to remember.

  • In the “Date Field” section, make sure and select the correct option for “show repeating date options”. Coming back and changing this later only creates problems. Decide now whether or not you want repeating dates.
  • In “Advanced Options”, confirm the way you want this calendar to handle the timezone. If you want no timezone conversion (my suggestion for most projects), then select that option.
  • You’ll want to select “yes” for “create a calendar for this date field”.
  • And, you’re ready to go! If you go to “Add Content” you’ll see your brand new “Date” content type. The calendar tool is fairly basic in this module, but you’ll see it has quite amazing recurrence features, which is nice.