Skip navigation
Currently Being Moderated

Adjusting Datepicker Widget for size?

Dec 15, 2011 12:40 PM

Has anyone used the datepicker widget (Scott Richards)?  I am looking for an easy way to adjust the dimensions of the calendar display - I can't seem to find anything about the size of that monster in the docs!  Any hints?

 
Replies
  • Currently Being Moderated
    Dec 15, 2011 1:16 PM   in reply to MurraySummers

    Hi Muz,

     

    Set the font size as per or similar

    #datepicker .ui-widget {

        font-size: 80%;

    }

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 15, 2011 1:21 PM   in reply to MurraySummers

    If you mean the jQuery UI DatePicker from Widget Exchange,

    look at ui.datepicker.css

     

    Change this:

    .ui-datepicker { width: 17em; padding: .2em .2em 0; }

     

    to this:

    .ui-datepicker { width: 45%; padding: .2em .2em 0; }

     

    Adjust font-sizes in the embedded CSS.

     

    #datepicker .ui-datepicker-title {

    font-size: 0.75em

    }

     

    /* Text attributes for the Days of Week Text */

            #datepicker .ui-datepicker table th

            {

                font-size: .8em;

                color: #000000;

                font-weight: bold;

            }

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 15, 2011 2:40 PM   in reply to MurraySummers

    Try adding this to the bottom of your embedded styles.

     

    .ui-datepicker { width: 40%; padding: .2em .2em 0; }

    .ui-datepicker { font-size: 25% }

     

     

     

    Do you use this thing?

    No.   You might like Clean Calendar for this.  

    http://marcgrabanski.com/articles/clean-calendar

     

    You can get it from Github

    https://github.com/1Marc/javascript-clean-calendar

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 15, 2011 6:14 PM   in reply to MurraySummers

    Sorry Muz,

     

    In my earlier reply I did not realise that you had attached the datepicker to an input field. The following will help in your case

    #ui-datepicker-div { font-size: 12px; }

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points