Loading ...
Sorry, an error occurred while loading the content.
 

Is there a way to make a calendar opaque?

Expand Messages
  • markd234
    I have an app with a pop-up YAHOO.widget.calendar, and all is well except for the fact that I need it to be opaque vs. semi-transparent. It s hard to read due
    Message 1 of 2 , Sep 10, 2009
      I have an app with a pop-up YAHOO.widget.calendar, and all is well except for the fact that I need it to be opaque vs. semi-transparent. It's hard to read due to the transparency, but it also invokes objects underneath it (depending on the day selected) vs. selecting the day itself. For example, it pops up over sortable datatable column headings, and it'll invoke the sorting of a column vs. selecting the date.

      I'm new to YUI, and not very experienced with Javascript in general, so hoping there's an easy way to do this. I looked at the API and googled, but haven't found a solution.

      Thanks in advance.
    • Satyen Desai
      Hi, You should just be able to apply an opacity to the calendar DIV using CSS: /* If you just want to make one of your Calendars opaque, assuming the id of
      Message 2 of 2 , Sep 11, 2009
        Hi,

        You should just be able to apply an opacity to the calendar DIV using
        CSS:

        /* If you just want to make one of your Calendars opaque, assuming
        the id of that calendar DIV is "cal1" */
        #cal1 {
        opacity:0.8;
        filter:alpha(opacity=80);
        }

        /* Or if you want to make all calendars opaque, use the class */
        .yui-calcontainer {
        opacity:0.8;
        filter:alpha(opacity=80);
        }

        --

        IE6 caveat:

        The above code will not work with the iframe shim enabled. If your
        calendar is not going to be popping up on top of any select boxes, you
        can disable the iframe shim, which stops select boxes from bleeding
        through popup calendars in IE6, by setting iframe:false, e.g. new
        YAHOO.widget.Calendar("cal1", { iframe:false });

        With the iframe present, IE6 won't handle the opacity as defined above
        correctly (It doesn't render nested filters properly, and the iframe
        shim also has an opacity filter applied to it, e.g. http://yuiblog.com/sandbox/yui/v250/examples/container/testFilters.html
        ).

        Regards,
        Satyen

        On Sep 10, 2009, at 12:44 PM, markd234 wrote:

        > I have an app with a pop-up YAHOO.widget.calendar, and all is well
        > except for the fact that I need it to be opaque vs. semi-
        > transparent. It's hard to read due to the transparency, but it also
        > invokes objects underneath it (depending on the day selected) vs.
        > selecting the day itself. For example, it pops up over sortable
        > datatable column headings, and it'll invoke the sorting of a column
        > vs. selecting the date.
        >
        > I'm new to YUI, and not very experienced with Javascript in general,
        > so hoping there's an easy way to do this. I looked at the API and
        > googled, but haven't found a solution.
        >
        > Thanks in advance.
        >
        >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.