Skip navigation
MurraySummers
MurraySummers
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?

1846 Views   7 Replies   Latest reply: MurraySummers, Dec 16, 2011 7:02 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Dec 15, 2011 1:16 PM   in reply to MurraySummers
    Report

    Hi Muz,

     

    Set the font size as per or similar

    #datepicker .ui-widget {

        font-size: 80%;

    }

    Gramps

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Dec 15, 2011 1:21 PM   in reply to MurraySummers
    Report

    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:
  • MurraySummers
    Currently Being Moderated
    3. MurraySummers,
    Dec 15, 2011 1:31 PM   in reply to Nancy O.
    Report

    That's a pain to have to go through and adjust all those widths.  Do you use this thing?

     

    Also, your suggested changes don't seem to be having any effect for me -

     

    http://www.neapco.com/test-datepicker.php

     

    Finally, are you disturbed by the fact that you need to assign two elements the 'datepicker' id?

     

    I must be missing something.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Dec 15, 2011 2:40 PM   in reply to MurraySummers
    Report

    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:
  • MurraySummers
    Currently Being Moderated
    5. MurraySummers,
    Dec 15, 2011 2:42 PM   in reply to Nancy O.
    Report

    Thanks, Nancy.  I'll take a look!

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

    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:
  • MurraySummers
    Currently Being Moderated
    7. MurraySummers,
    Dec 16, 2011 7:02 AM   in reply to Ben Pleysier
    Report

    Thanks, Gramps - I'll give it a try.

     
    |
    Mark as:
Actions

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