Announcement

**Isomorphic** · 14 Dec 2015, 14:14

See the documentation for getDayBodyHTML() - that method is monthView specific. getDateLabelText() is also unrelated to the images you showed (and is defeated anyway, by showControlsBar: false).

You want to use getDateHTML() instead.

**SimonF** · 15 Dec 2015, 00:45

Thanks for the fast response. So the usage of getDateHTML seems ok for me, I didn't know if this was the right method to use to archive this.

Like I stated out at beginning of the sponsorship the label of the day, should be in front of the event. Currently I'm not able to to so. I've tried to get this done with higher z-index. I would like to achieve that the number is in front of the event.

Code:

    getDateHTML : function (date, rowNum, colNum, view) {
        return "<div style='text-align:center; z-index: 1000000'>" + (date.getDate()) + "</div>";
    },

Here is the full-code for reproduction:

Code:

isc.Timeline.create({
    ID : "timelines0",
    timelineViewProperties : {
        border : "0px solid",
        height : 53
    },
    showCellHovers : true,
    getCellHoverHTML : function (view, record, rowNum, colNum, date, defaultValue) {
        return "<div>" + date.getDate().toString() + "." + (date.getMonth() + 1).toString() + ".2015</div>";
    },
    height : 1,
    overflow : "visible",
    border : "0px solid",
    eventEditorLayoutProperties : {
        defaultHeight : 0
    },
    showDayHeaders : false,
    startDate : new Date(2015, 0, 1),
    endDate : new Date(2015, 0, 31),
    lanes : [{
            name : "1",
            title : "January",
            height : 30
        }
    ],
    getDateHTML : function (date, rowNum, colNum, view) {
        return "<div style='text-align:center; z-index: 1000000'>" + (date.getDate()) + "</div>";
    },
    headerLevels : [{
            "unit" : "day",
            "headerWidth" : 30,
            "titleFormatter" : function (headerLevel, startDate, endDate, defaultValue, viewer) {
                return "" + startDate.getDate();
            }
        }
    ],
    laneFields : [{
            name : "title",
            title : " ",
            width : 100
        }
    ],
    "data" :
    [{
            "lane" : "1",
            "description" : "Important event",
            "startDate" : new Date(2015, 0, 2, 0, 0),
            "timelineGeneratedIndex" : "1",
            "backgroundColor" : "#CF0",
            "showDate" : true,
            "endDate" : new Date(2015, 0, 2, 23, 59),
            "name" : "&nbsp"
        }
    ],
    canEditLane : false,
    showEventDescriptions : false,
    labelColumnWidth : 200,
    showControlsBar : false,
    "canEditEvents" : false,
    "canCreateEvents" : false,
    "showControlsBar" : false,
    "firstDayOfWeek" : 1,
    "showEventDescriptions" : false,
    "showEventHeaders" : false
})

Is there a way to get this done? Am I missing something where I can set the z-index of the return of the getDateHTML-method?

Best Regards

**Isomorphic** · 15 Dec 2015, 01:20

Cells and their content are part of the grid-body itself - EventCanvas instances are children of the grid-body, and thus above grid content in the zorder.

If you want to see what's behind EventCanvas widgets, you can use Calendar.eventCanvasProperties to set a suitable opacity. See the doc for that attribute.

**SimonF** · 15 Dec 2015, 05:42

Changing the opacity of the event would also lead to a change of the color. The colors could be set by our customers themselves so, any change on this color might confuse our customers because they could use similar (mut different) colors, which might look the same with opacity.
I've seen it is also possible to set the opacity only on hover, but then the user has to move the mouse over an event to see which numbers are beneath.

I have described especially this case also in the first feature sponsorship-request.

Because there are also calendarEvents on a lane, this situation should be dealt with. Having a self rendered text by our wished method in a day cell the html should always be in the front of each event. The rendered html should not prevent the normal prompt-area of the event. This would be our wished behaviour.

Because there were no additional question I thought this would be clear.
By now we are working with an self-created year-calendar with drawpanes.

This feature sponsorship was supposed to replace this xear overview. If the user has multiple events (maybe also a whole month) the numbers/text returned by getDateHTML should be over the event.

Could be achive this without setting the opacity of the event?

**Isomorphic** · 15 Dec 2015, 05:59

This isn't possible because, as we said, the cell-content is part of the grid itself. Event canvases are rendered in front of this, and they have to be, because event-overlap calculations and the handling of Indicators and Zones manipulate the zorder. Also, of course, showing arbitrary DIVs in front of mouse-active canvases would be expected to cause useability problems. Presumably you could have whatever color-picker you use also apply opacity, so that users see the exact colors they select.

**Isomorphic** · 15 Dec 2015, 19:18

Regarding your comment from the Feature Sponsorship request, as we've pointed out, it makes little sense to place arbitrary HTML in front of other HTML and just ignore it for interactivity purposes. We do understand that for your very specific use case of numbers and events that show no titles at all, floating a number over your blank events makes sense - but this does not make sense as a Feature Sponsorship.

So, between the odd way the requirement was phrased, the fact that it makes no sense as a general feature, and the fact that it also happens to be impossible in some supported browsers, 3 different developers interpreted your requirement to be that the event occludes the background HTML rather than the other way around.

Let us know where you want to go from here - what you had in mind as a requirement is impossible cross-browser, but with the API we delivered you can still make your numbers visible with the opacity approach we recommended, which might actually look better. By darkening the color to compensate for the opacity, you may be able to keep the original color tone, or at least create a near match.

**SimonF** · 17 Dec 2015, 07:45

Thanks for the explanation, it would have been nice to get informed earlier that this would not be possible in contrast of the ordered feature sponsorhsip.

This solution involves additional work from our side to change every color-picker for colors used in the timeline.

By now we are using the smartclient-colorpicker like here: http://www.smartclient.com/docs/10.1...ariousControls .
Like you described, is there an option to display the colors with a opacity of for example 70 percent in the ColorItem??
Nevertheless the color should be saved without the opacity, because the opacity is set in the eventCanvas. This would help the user select a color, which will be shown in the timeline like he selected.

**Isomorphic** · 17 Dec 2015, 11:45

Thanks for the explanation, it would have been nice to get informed earlier that this would not be possible in contrast of the ordered feature sponsorhsip.

It would not have been possible to do this, since as we've explained, we misunderstood what you were asking for. If we had understood you really wanted arbitrary HTML floating in front of calendarEvents, we would of course have told you this wasn't feasible.

About the colorPicker, there wouldn't be a way to alter the ColorPicker to adjust for opacity in some way on display. You'll need to take the chosen color and compute a color that will look about the same once opacity is applied.

Announcement

getDayBodyHTML in Timeline

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment