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

6 posts, 1 answers
  1. Tim R
    Tim R avatar
    131 posts
    Member since:
    Feb 2006

    Posted 28 Jan 2013 Link to this post

    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?

  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 29 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Tim R
    Tim R avatar
    131 posts
    Member since:
    Feb 2006

    Posted 29 Jan 2013 Link to this post

    Excellent. Thanks very much for the sample, Alexander.
  5. Tim R
    Tim R avatar
    131 posts
    Member since:
    Feb 2006

    Posted 16 Feb 2013 Link to this post

    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.
  6. Tim R
    Tim R avatar
    131 posts
    Member since:
    Feb 2006

    Posted 16 Feb 2013 Link to this post

    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();
            }   
    }
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 20 Feb 2013 Link to this post

    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:

    All the best,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready