Timeline eventDragTarget styling

[mabboud]

Hello Isomorphic

Trying to customize the style of the Event Dragging Red Dotted box ... but i was unable to find where that can be styled ... looks like that is hard coded and not assigned a certain style class

looks like the ListGrid has dragTrackerStyle but the TimeLine/Calendar doesnt have something similar

let me know if i am missing any thing

thanks

[mabboud]

any updates on this

[Isomorphic]

You didn't mention your version, but there's no existing public (documented) way to do this, in any version.

However, there *is* an existing autoChild that allows this control, but is not documented. If you want to try this code below and let us know if it does what you need, we'll consider exposing this autoChild and/or providing a Calendar-level styling attribute for it.

Note, though, that if we do make this autoChild public in the framework, the change is unlikely to be ported back further than 12.0.

// CSS
.tlDragTarget {
    background-color: green;
    opacity: 0.5;
    border: 4px solid blue;
}

// JS
isc.Timeline.create({
   timelineViewProperties: {
       eventDragTargetProperties: {
           border: null,  // clear the framework default border
           styleName: "tlDragTarget" // apply the custom style
       }
   }
})

[mabboud]

Sorry Yes i am Using the 12.0

that would be great if its added to the public framework and documented

thank you

[Isomorphic]

We've made some changes here - the autoChild we mentioned is now public, but has been renamed as part of this change, from eventDragTarget to eventDragCanvas.

We also added a shortcut attribute, CalendarView.eventDragCanvasStyleName, default "eventDragCanvas", and added a class with that name to the builtin skins.

As of builds dated September 15, you can override that style with either technique:

// JS 
isc.Timeline.create({
    timelineViewProperties: {
        // set the className
        eventDragCanvasStyleName: "customDragCanvas",
        // or you can set the class directly on the autoChild with
        eventDragCanvasProperties: {
            styleName: "customDragCanvas" // apply the custom style
        }
    }
})