Click here to Skip to main content
15,881,882 members
Articles / Web Development / HTML

Calendar UI Extender Control

Rate me:
Please Sign up or sign in to vote.
4.00/5 (3 votes)
10 Oct 20075 min read 77.2K   1.2K   45  
An AJAX calendar extender control that implements a highly customizable UI and a WYSIWYG designer preview
/*
 **************************************************************
 * AjaxCalendarToolkit 
 **************************************************************
 * Author: Rohit Gadagkar (rohit.gadagkar@gmail.com)
 * Copyright � 2007 Rohit Gadagkar
 * License:
 * Free without any restrictions whatsoever 
 * 
 * Created: 7/10/2007 
 * 
 * THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY
 * OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT
 * LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
 * FITNESS FOR A PARTICULAR PURPOSE.
 **************************************************************  
*/

Type.registerNamespace('AjaxCalendarToolkit.UI');


//  Register DateDisplaySpec Enum
AjaxCalendarToolkit.UI.DateDisplaySpec = function() {
    throw Error.invalidOperation();
}
AjaxCalendarToolkit.UI.DateDisplaySpec.prototype = 
{
        None                            :   0,
        YearPrefix                      :   0x1,
        YearSuffix                      :   0x2,
        Year4Digits                     :   0x4,
        Year2Digits                     :   0x8,
        MonthPrefix                     :   0x10,
        MonthSuffix                     :   0x20,
        MonthNumericAnyDigits           :   0x40,
        MonthNumeric2Digits             :   0x80,
        MonthFullWord                   :   0x100,
        Month3LetterAbbreviation        :   0x200,
        DatePrefix                      :   0x400,
        DateSuffix                      :   0x800,
        DateSuffix2Letter               :   0x1000,
        DateAnyDigits                   :   0x2000,    
        Date2Digit                      :   0x4000,
        DayOfWeekPrefix                 :   0x8000,
        DayOfWeekSuffix                 :   0x10000,
        DayOfWeekNumeric                :   0x20000,
        DayOfWeekFullWord               :   0x40000,
        DayOfWeek3LetterAbbreviation    :   0x80000     
}
AjaxCalendarToolkit.UI.DateDisplaySpec.registerEnum('AjaxCalendarToolkit.UI.DateDisplaySpec', true);

//  Register DateDisplayOrder Enum
AjaxCalendarToolkit.UI.DateDisplayOrder = function() {
    throw Error.invalidOperation();
}
AjaxCalendarToolkit.UI.DateDisplayOrder.prototype = 
{
        DayOfWeek_Month_Date_Year : 0, 
        DayOfWeek_Date_Month_Year : 1,  
        Year_Month_Date_DayOfWeek : 2
}
AjaxCalendarToolkit.UI.DateDisplayOrder.registerEnum('AjaxCalendarToolkit.UI.DateDisplayOrder');

//  Register DateDisplayBehaviour Enum
AjaxCalendarToolkit.UI.DateDisplayBehaviour = function() {
    throw Error.invalidOperation();
}
AjaxCalendarToolkit.UI.DateDisplayBehaviour.prototype = 
{
        ASPNetCalendarSetting               : 0, 
        DefaultPrefixSuffixBehaviour        : 1, 
        UserDefinedPrefixSuffixBehaviour    : 2
}
AjaxCalendarToolkit.UI.DateDisplayBehaviour.registerEnum('AjaxCalendarToolkit.UI.DateDisplayBehaviour');

//  Register DateValue Enum
AjaxCalendarToolkit.UI.DateValue = function() {
    throw Error.invalidOperation();
}
AjaxCalendarToolkit.UI.DateValue.prototype = 
{
        ASPNetCalendarSetting       : 0,
        TodayAlways                 : 1,
        TodayOnlyInCurrentMonth     : 2,
        SelectedDate                : 3,
        VisibleDate                 : 4
}
AjaxCalendarToolkit.UI.DateValue.registerEnum('AjaxCalendarToolkit.UI.DateValue');

//  Register DayHeaderFormat Enum
AjaxCalendarToolkit.UI.DayHeaderFormat = function() {
    throw Error.invalidOperation();
}
AjaxCalendarToolkit.UI.DayHeaderFormat.prototype = 
{
        ASPNetCalendarSetting   : 0,
        OneLetterDay            : 1,
        TwoLetterDay            : 2,
        ThreeLetterDay          : 3,
        FullName                : 4,
        Custom                  : 5
}
AjaxCalendarToolkit.UI.DayHeaderFormat.registerEnum('AjaxCalendarToolkit.UI.DayHeaderFormat');

/*****************************************************************************
    CalendarUIBehaviour -
    Customize display of date title and day headers
*****************************************************************************/

AjaxCalendarToolkit.UI.CalendarUIBehavior = function(element) {

    AjaxCalendarToolkit.UI.CalendarUIBehavior.initializeBase(this, [element]);    
    // format of day header names (custom => user specified header names)
    this._dayHeaderFormat = 
                    AjaxCalendarToolkit.UI.DayHeaderFormat.ASPNetCalendarSetting;        
    // ASPNETCalendar, use default prefix-suffix bahaviour, use user specified prefix-suffix 
    this._titleDateDisplayBehaviour = 
            AjaxCalendarToolkit.UI.DateDisplayBehaviour.ASPNetCalendarSetting;                    
    // user may set custom day header names 
    this._customDayHeaders = null;            
    // bitwise spec
    this._titleDateDisplaySpecs = AjaxCalendarToolkit.UI.DateDisplaySpec.None;            
    // Order of display of date components - Day of week, month, date, year
    this._titleDateDisplayOrder = null;            
    // Today's date, Selected date, visible date
    this._titleDateValueBehaviour = null;
    // TitleDateValue to transfer state to the client side prototype
    this._titleDateValue = null;  
    this._autoGenerateDateSuffixForTitleDate = false;
    // control to customize header display           
    this._customizeHeader = false;
    // control to customize title date display           
    this._customizeTitle = false;
}

AjaxCalendarToolkit.UI.CalendarUIBehavior.prototype = {

    initialize : function() {
        AjaxCalendarToolkit.UI.CalendarUIBehavior.callBaseMethod(this, 'initialize');
        
        var elt = this.get_element();
        if(elt.tagName != "TABLE") return;
        
        this._customizeHeader = this._dayHeaderFormat == 
                AjaxCalendarToolkit.UI.DayHeaderFormat.Custom;
        this._customizeTitle = 
        this._titleDateDisplayBehaviour != AjaxCalendarToolkit.UI.DateDisplayBehaviour.ASPNetCalendarSetting;                
        if(this._customizeHeader) 
            this.renderDayHeaders(elt);
        if(this._customizeTitle)
            this.renderTitleDate(elt);
        
    },

    renderTitleDate : function(elt)
    {        
        var topRow = null;
        var date = this.get_titleDateValue();
        //debugger;
        if(elt.tBodies.length > 0)   
            if(elt.tBodies[0].rows.length > 0) {
                topRow = elt.tBodies[0].rows[0];
                if(topRow != null) {
                    if(topRow.cells && topRow.cells.length>0) 
                        if(topRow.cells[0].childNodes && topRow.cells[0].childNodes.length>0)
                            if(topRow.cells[0].childNodes[0].tBodies && 
                                topRow.cells[0].childNodes[0].tBodies.length>0)
                                if(topRow.cells[0].childNodes[0].tBodies[0].rows && 
                                    topRow.cells[0].childNodes[0].tBodies[0].rows.length>0) 
                                {
                                    if(topRow.cells[0].childNodes[0].tBodies[0].rows[0].cells.length > 1)    {
                                        var cell = topRow.cells[0].childNodes[0].tBodies[0].rows[0].cells[1];
                                        this.setCellText(cell, date);                            
                                    }                            
                                }                    
                    }
            }        
    },
    
    renderDayHeaders : function(elt)
    {
        var headerRow = null;
        if(elt.tBodies.length > 0 )
            if(elt.tBodies[0].rows.length > 1) headerRow = elt.tBodies[0].rows[1];
        if(headerRow != null && this._customizeHeader)  {
            var headers = this.get_customDayHeaders().split(',');
            if(headers.length != 7)
            throw Error.argument('customDayHeaders', 'customDayHeaders must be a comma seperated list of day header names starting from Sunday and ending with Saturday.');
            for(i=0;i<headerRow.cells.length;i++) 
                this.setCellText(headerRow.cells[i],headers[i]);
        }    
    },
    
    getCellText : function (cell)
    {
        return Sys.Browser.agent == Sys.Browser.InternetExplorer ? cell.innerText : cell.textContent;
    },
    
    setCellText : function (cell, text)
    {
        if(Sys.Browser.agent == Sys.Browser.InternetExplorer)
            cell.innerText = text;
        else {
            if(cell.childNodes && cell.childNodes.length>0) cell.childNodes[0].textContent = text;
        }
    },
    
    dispose : function() {
        // TODO: add your cleanup code here

        AjaxCalendarToolkit.UI.CalendarUIBehavior.callBaseMethod(this, 'dispose');
    },
    
    get_titleDateDisplayBehaviour : function() {
        return this._titleDateDisplayBehaviour;
    },

    set_titleDateDisplayBehaviour : function(value) {
        this._titleDateDisplayBehaviour = value;
    },

    get_titleDateDisplaySpecs : function() {
        return this._titleDateDisplaySpecs;
    },

    set_titleDateDisplaySpecs : function(value) {
        this._titleDateDisplaySpecs = value;
    },
    
    get_titleDateDisplayOrder : function() {
        return this._titleDateDisplayOrder;
    },

    set_titleDateDisplayOrder : function(value) {
        this._titleDateDisplayOrder = value;
    },
    
    get_titleDateValueBehaviour : function() {
        return this._titleDateValueBehaviour;
    },

    set_titleDateValueBehaviour : function(value) {
        this._titleDateValueBehaviour = value;
    },
    
    get_titleDateValue : function() {
        return this._titleDateValue;
    },

    set_titleDateValue : function(value) {
        this._titleDateValue = value;
    },
    
    get_autoGenerateDateSuffixForTitleDate : function() {
        return this._autoGenerateDateSuffixForTitleDate;
    },

    set_autoGenerateDateSuffixForTitleDate : function(value) {
        this._autoGenerateDateSuffixForTitleDate = value;
    },
    
    get_titleDateDatePrefix : function() {
        return this._titleDateDatePrefix;
    },

    set_titleDateDatePrefix : function(value) {
        this._titleDateDatePrefix = value;
    },
    
    get_titleDateDateSuffix : function() {
        return this._titleDateDateSuffix;
    },

    set_titleDateDateSuffix : function(value) {
        this._titleDateDateSuffix = value;
    },
    
    get_titleDateDayOfWeekPrefix : function() {
        return this._titleDateDayOfWeekPrefix;
    },

    set_titleDateDayOfWeekPrefix : function(value) {
        this._titleDateDayOfWeekPrefix = value;
    },
    
    get_titleDateDayOfWeekSuffix : function() {
        return this._titleDateDayOfWeekSuffix;
    },

    set_titleDateDayOfWeekSuffix : function(value) {
        this._titleDateDayOfWeekSuffix = value;
    },
    
    get_titleDateMonthPrefix : function() {
        return this._titleDateMonthPrefix;
    },

    set_titleDateMonthPrefix : function(value) {
        this._titleDateMonthPrefix = value;
    },
    
    get_titleDateMonthSuffix : function() {
        return this._titleDateMonthSuffix;
    },

    set_titleDateMonthSuffix : function(value) {
        this._titleDateMonthSuffix = value;
    },
    
    get_titleDateYearPrefix : function() {
        return this._titleDateYearPrefix;
    },

    set_titleDateYearPrefix : function(value) {
        this._titleDateYearPrefix = value;
    },
    
    get_titleDateYearSuffix : function() {
        return this._titleDateYearSuffix;
    },

    set_titleDateYearSuffix : function(value) {
        this._titleDateYearSuffix = value;
    },
    
    get_customDayHeaders : function() {
        return this._customDayHeaders;
    },
    
    set_customDayHeaders : function(value) {
        this._customDayHeaders = value;
    },
    
    get_dayHeaderFormat : function() {
        return this._dayHeaderFormat;
    },
    
    set_dayHeaderFormat : function(value) {
        this._dayHeaderFormat = value;
    }
}

AjaxCalendarToolkit.UI.CalendarUIBehavior.registerClass('AjaxCalendarToolkit.UI.CalendarUIBehavior', AjaxControlToolkit.BehaviorBase);

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
I am a tech lead working for Cap Gemini. Although I primarily work with the Microsoft technology stack (including .NET and legacy technologies) I like to keep myself informed about developments in the Java world.

Comments and Discussions