Enter the Dragon–PURE HTML GOODNESS

Will work in Office365!!

Tonight I thought I’d post my latest personal project called SPDragon – its a pure HTML version of Xaptic (my Silverlight Widget Library). Its still in early development but its going very well and I’m learning and having lots of fun.

This version of my widget library can use SPServices http://spservices.codeplex.com/ by Marc Anderson or the client object model, or anything JavaScript and HTML. Because this is pure HTML I can also host Silverlight widgets as well as flash – so I’m much happier now SmileI added a little background music for dramatic effect.

Let me know if you like it or want to offer some suggestions – feedback welcome

 

 

I thought I’d show you how the data is being stored in SharePoint – adding components is as simple as adding HTML and an icon to lists behind the scenes

Page Definition (trivial)

image

Catalog of widgets (as many as you want)

image

The pages behind the scenes

image

 

Cheers!

Creating color coded entries within the OTB SharePoint calendar

This post is a much about JQuery as it is the Calendar

The requirements for this are as follows: The calendar should display different color coded entries based on a category selection. The category list is represented as an added field of type "Choice". In this simple example I’ve preloaded Red, Blue, and Green as the category choices

The original inspiration for this came from http://planetwilson.blogspot.com/2007/09/sharepoint-2007-colour-color-calendar.html by Mark Wilson. So thanks to Mark. The original javascript code for this did not work so well but did provide some great motivation. Because I’m taking the time to learn JQuery and also because someone asked if this was possible, I thought it would be a good idea to recast Mark’s initial solution using JQuery. Limitations do exist here but the results are pretty striking.

Also, keep in mind this is sample code and my use of the content editor webpart should not be considered a production solution. In the end, this probably scales better as a webpart project (deployed as a solution). See Mark’s updated webpart http://planetwilson.blogspot.com/2008/02/version-2-of-colour-calendar-released.html

A recent post by Andrew Connell spells out his concerns using CEWP in production sites, particularly within publishing sites. See http://andrewconnell.com/blog/archive/2009/02/01/Blocking-the-use-of-the-Content-Editor-Web-Part-in.aspx

That being said, the following steps should provide a feel for how this all works. JQuery is an open source library now being adopted by Microsoft. As of this post I’m still learning JQuery so the code here could likely be tightened up a bit and made more general, or expanded upon.

Preliminary: create or use an existing SharePoint library to store the JQuery API if its not already copied to the SharePoint server. Be sure its linked properly using the code below. See http://www.jquery.com/

1. Put the calendar page in edit mode.

2. Add a Content Editor Web Part to the page.

3. Open up the CEWP and click "Source Editor"

4. Paste the following JQuery code into the webpart editor (NOTE: I use “made up” categories called “Red, Blue, Green” and pass in the colors I want to associate with them using the function “AddCategoryColor()”. The name of the categories and color choices are independent of course.

<script type="text/javascript" src="{your SP library}/jquery-1.3.js"></script>

<script type="text/javascript">

$(document).ready(function() {

        AddCategoryColor("Red", "#FF0000");
        AddCategoryColor("Green", "#00FF00");
        AddCategoryColor("Blue", "#0000FF");
        FormatDisplay();  

});

function AddCategoryColor(cat, color) {

        var cont = ":contains("+ cat +")";
        $("td.ms-cal-monthitem").filter(cont).find("a").css("color",color);
        $("td.ms-cal-eworkday").filter(cont).find("a").css("color",color);
        $("td.ms-cal-eworkhour").filter(cont).find("a").css("color",color);
        $("td.ms-cal-enoworkday").filter(cont).find("a").css("color",color);

}

function FormatDisplay() {
       $("td.ms-cal-monthitem").find("a").each(function(){
              var me = $(this), txt = me.text();
              me.html(txt.split("|||")[1]);
        });

        $("td.ms-cal-eworkday").find("a").each(function(){
              var me = $(this), txt = me.text();
              me.html(txt.split("|||")[1]);
        });

        $("td.ms-cal-eworkhour").find("a").each(function(){
              var me = $(this), txt = me.text();
              me.html(txt.split("|||")[1]);
        });

        $("td.ms-cal-enoworkday").find("a").each(function(){
              var me = $(this), txt = me.text();
              me.html(txt.split("|||")[1]);
        });

}

</script>

5. Create a new column called category on the calendar list, use type “string”

6. Create a new calculated field called CatTitle set to “=Category&"|||"&Title”

7. Click apply then Ok

8. Exit edit mode

9. Set calendar display views as follows

clip_image001

 

7. Go into the calendar and create a couple of entries

 

clip_image001[6]

 

Very cool. The best thing is the code can be made very clean. JQuery has tremendous potential and well worth developers time to learn.