possible to make Kendo calendar act like a "full sized wall calendar" -- as big as the browser window?

[Tim R]

My users would like a full-screen calendar-view, with cells capacious enough to display short blurbs of text, rather like a personal wall-calendar. It would occupy 100% of its container div, like a grid, so it could grow as wide as the browser window. Is it possible for the developer to modify the Kendo calendar to behave like this, or would it be better to search for such a dedicated widget?

[Alexander Valchev]

Hello Tim,

This effect is not supported out of the box, however you can achieve it by overriding the corresponding CSS rules. Please check this example: http://jsbin.com/ihuguw/2/edit

You may adjust the size of widget (.k-widget.k-calendar) and its cells (.k-content tbody td) according to your specific requirements.

Regards,
Alexander Valchev
the Telerik team

[Tim R]

Excellent. Thanks very much for the sample, Alexander.

[Tim R]

I haven't been able to figure out how to make the calendar stretch to 100% of the browser window height, although the calendar does expand to make use of the width.  Would be grateful for advice on how to do that. 
Thanks

EDIT:
#calendar table {height: 90%, width: 100%}

accomplishes this vertical stretch in Chrome and Opera and Firefox but not in IE9.

[Tim R]

Also, how to prevent the calendar from displaying an extra week at the bottom from the next month?  Even if max is set to the 28th day of February, for example, the grid displays through March 9th.

    var CAL = $("#calendar").data("kendoCalendar");
    CAL.min = new Date("2013/02/01");
    CAL.max = new Date("2013/02/28")

EDIT: This kludge seems to be working --

function deleteFinalRow() {  

    var deleteRowFlag = true;  

        $("#calendar tbody tr:last").children("td").each(function (cellIndex, cellElem) {               

            if ( $(cellElem).hasClass("k-other-month")===false) { 

                deleteRowFlag = false;

            }

        });

        if (deleteRowFlag) {         

            $("#calendar tbody tr:last").remove();

        }   

}

[Alexander Valchev]

Hi Tim,

In order to stretch the calendar to 100% of the browser window you should  stretch the html and body elements.

body, html {
    margin:0;
    height:100%;
    width:100%;
}
.k-widget.k-calendar {
    width: 100%;
    height: 100%;
}
.k-widget.k-calendar .k-content tbody td {
    width: 75px;
    height: 90px;
}

Regarding min/max dates, the syntax you used is incorrect. You have to set those value in the configuration of the widget or to use the respective methods. Please check the following documentation:

• http://docs.kendoui.com/api/web/calendar#min-datedefault
• http://docs.kendoui.com/api/web/calendar#max-datedefault
• http://docs.kendoui.com/api/web/calendar#min
• http://docs.kendoui.com/api/web/calendar#max

All the best,
Alexander Valchev
the Telerik team