TimeLine: Event is moving to the background of another event

[andyx1975]

Hi,

can you try this timeline? All events are 24h events. When I try to move two events to the same day, only one event is visible... the other one is in background.

Thanks
Andy



TimeLine Code

import java.util.Date;

import com.google.gwt.i18n.client.DateTimeFormat;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.fields.DataSourceDateTimeField;
import com.smartgwt.client.data.fields.DataSourceSequenceField;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.types.DSDataFormat;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.TimeUnit;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.calendar.Calendar;
import com.smartgwt.client.widgets.calendar.HeaderLevel;
import com.smartgwt.client.widgets.calendar.HeaderLevelTitleCustomizer;
import com.smartgwt.client.widgets.calendar.Lane;
import com.smartgwt.client.widgets.calendar.Timeline;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.VLayout;

public class GTestTimeLine
{

    private Timeline timeLine;

    public GTestTimeLine()
    {
        initPopUp();
    }

    private void initPopUp()
    {
        VLayout layout = new VLayout();
        layout.setSize( "100%", "100%" );
        layout.setMembers( getTimeLine() );
        layout.setOverflow( Overflow.HIDDEN );

        Window window = new Window();
        window.setOverflow( Overflow.HIDDEN );
        window.setShowShadow( true );
        window.setShadowSoftness( 10 );
        window.setShadowOffset( 5 );
        window.setSize( "100%", "100%" );
        window.setCanDragResize( true );
        window.setShowMaximizeButton( true );
        window.setShowMinimizeButton( true );
        window.setShowCloseButton( false );
        window.setAnimateMinimize( true );
        window.setShowCloseButton( true );
        window.setModalMaskOpacity( 50 );
        window.setIsModal( true );
        window.setShowModalMask( true );
        window.centerInPage();
        window.addItem( layout );

        window.draw();
    }

    private Timeline getTimeLine()
    {
        timeLine = new Timeline();

        timeLine.setShowEventDescriptions( true );
        timeLine.setShowQuickEventDialog( false );
        timeLine.setShowAddEventButton( false );

        timeLine.setCanCreateEvents( true );
        timeLine.setCanRemoveEvents( true );
        timeLine.setCanResizeEvents( false );

        // Sets Hover
        timeLine.setHoverWidth( 500 );

        // Activate weekends
        timeLine.setDisableWeekends( false );
        timeLine.setShowWeekends( true );

        // 60min x 24h (Ignore Time)
        timeLine.setEventSnapGap( ( 24 * 60 ) );

        // // Sets start and end date of calendar
        timeLine.setStartDate( parseStringToDate( "12.04.2016", "dd.MM.yyyy" ) );
        timeLine.setEndDate( parseStringToDate( "20.04.2016", "dd.MM.yyyy" ) );

        // Sets lane field (first Columns)
        timeLine.setLaneFields( new ListGridField[] { new ListGridField( "title", "Name", 350 ) } );

        HeaderLevel headerDays = new HeaderLevel( TimeUnit.DAY );
        headerDays.setHeaderWidth( 100 );
        headerDays.setTitleFormatter( new HeaderLevelTitleCustomizer()
        {

            @Override
            public String getTitle( HeaderLevel headerLevel, Date startDate, Date endDate, String defaultValue,
                                    Calendar calendar )
            {
                DateTimeFormat fmt = DateTimeFormat.getFormat( "EEE,dd.MMM" );
                return fmt.format( startDate );
            }
        } );

        HeaderLevel[] headerLevels = new HeaderLevel[] { new HeaderLevel( TimeUnit.WEEK ), headerDays };

        // // Sets Header Levels
        timeLine.setHeaderLevels( headerLevels );

        // Init Lanes
        timeLine.setLanes( getLanes() );

        // Can not move via drag & drop to another lane
        timeLine.setCanEditLane( false );
        timeLine.setCanReorderLanes( true );
        timeLine.setLaneEventPadding( 2 );

        // Gets DataSource
        timeLine.setDataSource( getDataSource() );
        timeLine.setAutoFetchData( true );

        return timeLine;
    }

    public Lane[] getLanes()
    {
        Lane[] lanes = new Lane[] { getLane( "648", "Test Lane 648" ), getLane( "01", "Test Lane 01" ),
            getLane( "02", "Test Lane 02" ) };
        return lanes;
    }

    private Lane getLane( String name, String title )
    {
        Lane lane = new Lane( name, title );
        return lane;
    }

    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    /**
     * Rebuilds Calendar
     */
    // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    public void rebuildCalendar()
    {
        timeLine.getSelectedView().rebuild();
    }

    public DataSource getDataSource()
    {
        DataSource ds = new DataSource();
        ds.setDataURL( "List/timelineTest.json" );
        ds.setClientOnly( true );
        ds.setID( "timelinetest" );
        ds.setDataFormat( DSDataFormat.JSON );

        DataSourceSequenceField eventIdField = new DataSourceSequenceField( "eventId", "eventId" );
        eventIdField.setPrimaryKey( true );

        DataSourceDateTimeField startDateField = new DataSourceDateTimeField( "startDate", "startDate" );
        DataSourceDateTimeField endDateField = new DataSourceDateTimeField( "endDate", "endDate" );
        DataSourceTextField laneField = new DataSourceTextField( "lane", "lane" );
        DataSourceTextField nameField = new DataSourceTextField( "name", "name" );
        DataSourceTextField descriptionField = new DataSourceTextField( "description", "description" );

        ds.setFields( eventIdField, nameField, descriptionField, laneField, startDateField, endDateField );

        return ds;
    }

    public static Date parseStringToDate( String dateString, String format )
    {
        return DateTimeFormat.getFormat( format ).parse( dateString );
    }
}

JSON Data file content:

[
  {"eventId":1538,"name":"test1","description":"Desc1","lane":648,"startDate":"2016-04-13T00:00:00+01:00","endDate":"2016-04-13T00:00:00+01:00"},
  {"eventId":1539,"name":"test2","description":"Desc2","lane":648,"startDate":"2016-04-14T00:00:00+01:00","endDate":"2016-04-14T00:00:00+01:00"},
  {"eventId":1537,"name":"test3","description":"Desc3","lane":648,"startDate":"2016-04-15T00:00:00+01:00","endDate":"2016-04-15T00:00:00+01:00"}
]
​

this issue is still present in latest build from 27.04. (6.0p)

Best regards
Andy

[Isomorphic]

You didn't indicate your version - but if it's 5.1 or higher, please retest with tomorrow's build. We just made some changes today.

[andyx1975]

yeah you are right... I am sorry... I used 6.0p latest Build.

[andyx1975]

You can also try the above mentioned code with the json on the bottom.. here the startDateTime ist set to "00:00:00" and the endDateTime is set to "23:59:00"... you will get 48h events instead of 24h events. The method "timeLine.setEventSnapGap( ( 24 * 60 ) );" seems to be the reason. It adds a snap gap to the startDate and to the endDate too... so that a 24h event appears as a 48h event. This was not the case in 5.1.

Thanks
Andy

[
  {"eventId":1538,"name":"test1","description":"Desc1","lane":648,"startDate":"2016-04-13T00:00:00+01:00","endDate":"2016-04-13T23:59:00+01:00"},
  {"eventId":1539,"name":"test2","description":"Desc2","lane":648,"startDate":"2016-04-14T00:00:00+01:00","endDate":"2016-04-14T23:59:00+01:00"},
  {"eventId":1537,"name":"test3","description":"Desc3","lane":648,"startDate":"2016-04-15T00:00:00+01:00","endDate":"2016-04-15T23:59:00+01:00"}
]