How can I show the month name instead of date range in wdCalendar jquery plugin?

Question

I have recently started using the wdClendar jquery plugin for one of my intranet sites. It works great but there have been a couple requests made that I cannot seem to work out. I have the calendar defaulted to displaying a month view. When the page is first loaded, the location where the date range should be just says "Loading". I have tried several ways to force it to refresh but it will not until i change months or change the view. That is the first problem and even the demo site shows the same behavior.

I have been using Firefox/Firebug for debugging javascript. If i set a break point in the code at var p = $("#gridcontainer").bcalendar(op).BcalGetOp(); and step through it, it works. The date range display is update. But not on a regular display of the page and there are no errors when the page loads. It seems that piece of code is running before the page is fully loaded. Here is a snippet.

    $(document).ready(function() {    
    $("#content_table").width("95%");
       var view="month";          

        var DATA_FEED_URL = "/media/js/wdCalendar/php/datafeed.php";
        var op = {
            view: view,
            theme:3,
weekstartday:0,
            showday: new Date(),
            EditCmdhandler:Edit,
            DeleteCmdhandler:Delete,
            ViewCmdhandler:View,    
            onWeekOrMonthToDay:wtd,
            onBeforeRequestData: cal_beforerequest,
            onAfterRequestData: cal_afterrequest,
            onRequestDataError: cal_onerror, 
            autoload:true,
            url: DATA_FEED_URL + "?method=list",  
            quickAddUrl: DATA_FEED_URL + "?method=add", 
            quickUpdateUrl: DATA_FEED_URL + "?method=update",
            quickDeleteUrl: DATA_FEED_URL + "?method=remove"        
        };
        var $dv = $("#calhead");
        var _MH = document.documentElement.clientHeight;
        var dvH = $dv.height() + 2;
        op.height = _MH - dvH;
        op.eventItems =[];

        var p = $("#gridcontainer").bcalendar(op).BcalGetOp();
        if (p && p.datestrshow) {
            $("#txtdatetimeshow").text(p.datestrshow);
        }
        ...});

That last 4 lines is what should be changing the display. Everything else (...) in the file are functions and jQuery selectors.

The second issue is my client wants the month name to display, instead of the date range, when in month view. I am not advanced enough with javascript to make this change on my own.

Any help will be greatly appreciated.

Answer 1

I think this will solve both of your problems...replace your cal_afterrequest method with the one below.

Cheers,

Mike

        function cal_afterrequest(type)
        {
            switch(type)
            {
                case 1:
                    $("#loadingpannel").hide();
                    var theMonths= new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
                    //$("#txtdatetimeshow").text(this.datestrshow);
                    $("#txtdatetimeshow").text(theMonths[this.showday.getMonth()] + " " + this.showday.getFullYear());
                    break;
                case 2:
                case 3:
                case 4:
                    $("#loadingpannel").html("Success!");
                    window.setTimeout(function(){ $("#loadingpannel").hide();},2000);
                break;
            }
        }