Support » Plugin: Event Calendar » [Plugin: Ajax Event Calendar] Can I change the width of the calendar?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter kailas108

    (@kailas108)

    Hi Eran,

    I figured out how to make the calendar smaller by setting the height to 300px and then embedding the page in an iFRAME that had a fixed width of 300px. The HTML you wrote responded very well. However, then when I clicked on a date/event, the overlay appeared but it did not adjust so it displayed the event information but it was in the overflow, and out of view.

    Is it possible to have the option of opening the event in an overlay that wraps the information to display at smaller sizes?

    Thread Starter kailas108

    (@kailas108)

    Modified CSS to get the desired width after reading more of your FAQ.

    #aec-menu{float:left;padding:10px 0;max-width: 300px;}
    #aec-header{width:100%;clear:both;padding:0;margin-bottom:0;max-width: 300px;}
    #aec-calendar{font-size:13px;line-height:16px;max-width: 300px;}
    #aec-calendar table{margin:0 !important;max-width: 300px;}
    #aec-container{position:relative;float:none;max-width: 300px;}

    HOWEVER – fc-header is a table, and apparently is inheriting an overriding width of 100%. I have added the modification:

    fc-header {max-width: 300px%} – didn’t work

    So I tried fc-header table {max-width: 25%} – didn’t work.

    Could you help me to limit the table with the header, because even though I got the calendar to fit nicely, the header is not respondign and is still set at 100%.

    Kailas

    Thread Starter kailas108

    (@kailas108)

    Ok. I solved this by

    .fc-header td{white-space:normal;background-color: red; max-width: 300px;}
    .fc-header-title h2{margin-top:0;white-space:normal}

    When whitespace is set to normal, the table wraps and the elements reflow.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: Ajax Event Calendar] Can I change the width of the calendar?’ is closed to new replies.