JavaScript and Date Time formatting

Scenario: Working with SP client object model , I was getting formatted date string. Not very good for display purpose.
Solution: I asked our in house JavaScript expert sanjay and got a kick start , here's a little bit modified version of that outputting UTC date time.
Code:

//function for the getting the formatted date and time 
// current output April 20, 2012 7:04 PM
function formattedUTCDateTime(d) {

    // code for the year
    var m_names = new Array("January", "February", "March",
    "April", "May", "June", "July", "August", "September",
    "October", "November", "December");

//    var d = new Date();
    var curr_date = d.getUTCDate();
    var sup = "";
    if (curr_date == 1 || curr_date == 21 || curr_date == 31) {
        sup = "st";
    }
    else if (curr_date == 2 || curr_date == 22) {
        sup = "nd";
    }
    else if (curr_date == 3 || curr_date == 23) {
        sup = "rd";
    }
    else {
        sup = "th";
    }

    var curr_month = d.getUTCMonth();
    var curr_year = d.getUTCFullYear();

    //code for the time    
    var hours = d.getUTCHours()
    var minutes = d.getUTCMinutes()

    var suffix = "AM";
    if (hours >= 12) {
        suffix = "PM";
        hours = hours - 12;
    }
    if (hours == 0) {
        hours = 12;
    }

    if (minutes < 10)
        minutes = "0" + minutes;

    var datetimevalue = (m_names[curr_month] + " " + curr_date + ", " + curr_year + "  " + hours + ":" + minutes + " " + suffix);
    return datetimevalue;

}

SP2010 : Color coded Calendar

Scenario:
I have used color coded calendar in MOSS 2007 but using it in SP2010 was little tricky. Here's some of the things which can make you life easier.



Steps:
1. Create or open a calendar with some data

2. Add a new column named "Color" of "Choice" type with some color choices. Color selection available

3. Add a new column named "CalendarText"
>>>> Column Type is Calculated
>>>> Insert Column Field value should be 'Color' (created in the step 2).
>>>> Data type returned = single line of text.
>>>> Formula is: ="<span style='color:white;background-color:"&Color&"'>"&Title&"</span>"

4. Modify the existing view, or create a new view of 'Calendar View' type.

5. Change the field used for the Month View Title, Day View Title and Week View Title to "CalendarText".

6. Save and exit (The HTML for "<span" will now be displayed.

Some JavaScript/Jquery will be needed to fix the HTML tags.

7. Download this text file

8. Download this DWP file

9. Save the text file in Shared Documents library. ( as of now this is hard-coded location ).If you uploading it to a different location , you will need to open DWP file and change text file location accordingly.

10. Navigate to the calendar view and edit page

11. Import the DWP webpart BELOW the calendar WP. You are all set now.

SharePoint 2007 : Edit option missing

Scenario:
While I myself is wondering that I don't have it posted. I come across this problem every now and then.

Edit option is missing on some Content pages , like NewItem.aspx , EditItem.aspx etc. and you want to add some message / webpart to these page.

Solution:
1. Navigate to the page
2. In the browser address bar type the following line of code below.

javascript:MSOLayout_ToggleLayoutMode();

3. Hit the enter key.

Recommendation
In case you often need this, you can save the page as favorite and in the url section specify the javascript. So next time onwards , when ever you want to toggle the mode, navigate to the page and click on page link you saved.

SP2010 Model window closing automatically

Scenario:
Now since SP2010 have lot of support in-build for client side programming, I thought to leverage the same for one of the Pop Up requirement. User will click a button and there will a model popup to select values , selected value will be returned back to main window.

Issue : Model window was poping up but getting closed right away.

Reason:
I was using a ASP.Net server side Button , and so I realized that it is calling the client script on button click which is poping up the model window properly but then as soon as postback happens it was getting closed.

Solution:
There are 2 solutions to it in my opinion
1. Switch to HTML input control
2. return false from the function which you are using to open model window, which will prevent the server side event.

Code:

function myCallback(dialogResult, returnValue) {alert('Hello');}

function openSPModel(
var options = {url: '/_layouts/mypage.aspx', width: 500, dialogReturnValueCallback:myCallback};

SP.UI.ModalDialog.showModalDialog(options);
return false;
}

Article:

Client Object Model Javascript and web url

Scenario:
While I found so many blog posts on how to use Client Object Model in javascript.

One thing was missing, they all had examples with hardcoded Urls. Now thats not gonna work for a real world, we need context info like web relative url.

Workaround:
I will call it a workaround until I found the perfect solution. Check the view source of any sharepoint page in SP2010. I found a javascript variable 'L_Menu_BaseUrl' which holds the web relative url.

Code:

function OpenDialog() {
       var options = SP.UI.$create_DialogOptions();
       options.url =  L_Menu_BaseUrl + "/_layouts/xClient/MyPage.aspx";
       options.width = 500;
       options.height = 400;
       options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
       SP.UI.ModalDialog.showModalDialog(options);
   }

Solutions:
1. Using Object model itself read the ServerRelativeUrl into a variable and use it.

 <script type="text/javascript">

     ExecuteOrDelayUntilScriptLoaded(getWebProperties, "sp.js");

     var relativeUrl;

     function getWebProperties() {
         var ctx = new SP.ClientContext.get_current();
         this.web = ctx.get_web();
         ctx.load(this.web, 'Title', 'Id', 'Created', 'ServerRelativeUrl');
         ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));
     }

     function onSuccess(sender, args) {
         relativeUrl = this.web.get_serverRelativeUrl();
     }

     function onFail(sender, args) {
         alert('failed to get list. Error:' + args.get_message());
     }

</script>

2. Using code you can output a javascript variable with Web Server Url and use it.

 this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "someData",  "<script type=\"text/javascript\">var WebRelativeUrl='" + SPContext.Current.Web.Url + "';</script>");

Articles:
SharePoint-2010-Client-Object-Model-for-JavaScript