Timeline event overlap - SmartClient Forums

andyx1975 replied

9 May 2016, 03:42
okay thanks sounds good... thanks!!!
Leave a comment:
Isomorphic replied

2 May 2016, 04:19
andyx1975 - by way of a follow-up to your issues with viewing UTC dates in your browser...

As of builds dated May 3 and later, we can confirm Timeline support for the global defaultDisplayTimezone.

This code, called before creating any widgets, will have your Timelines behave as if your browser was in GMT/UTC, including dates displayed in eventCanvases, hovers and editors, and the render sizes/offsets of eventCanvases - however, note that this setting affects the formatting of date-values *globally* - all dates, everywhere, will be formatted as GMT/UTC dates, not just those in your timeline.

Code:

DateUtil.setDefaultDisplayTimezone("00:00");
Last edited by Isomorphic; 2 May 2016, 04:23.
Leave a comment:
Niels_EMP replied

18 Apr 2016, 00:29
Just tested with SmartClient Version: v11.0p_2016-04-15/Pro Deployment (built 2016-04-15) and my overlap issues are fixed :)

Thank you.
Leave a comment:

andyx1975 replied

15 Apr 2016, 11:54

Originally posted by andyx1975 View Post

you can also try this Json file... here is the endDate timestamp 23:59:59:

Code:

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

Code:

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;
}



public DataSource getDataSource()
{
DataSource ds = new DataSource();
ds.setDataURL( "List/timeline.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 );
}

public void refreshCalendarData()
{
timeLine.setDataSource( getDataSource() );
timeLine.fetchData();

rebuildCalendar();
}
}

Then your dates are 48hours instead of 24hours. [ATTACH=CONFIG]n236980[/ATTACH]

And if you uncomment "timeLine.setEventSnapGap( ( 24 * 60 ) );"... you will get this one... an 2h timeshift for each 24h event:

[ATTACH=CONFIG]n236981[/ATTACH]

Can you reproduce the above quoted case? And also this error message?

Code:

21:49:25.004:WARN:drawing:isc_Timeline_0_timelineView_eventDragTarget:negative or zero area: height: 85, width: 0, refusing to draw
    Canvas.readyToDraw()
    Canvas.draw(_1=>undef)
    Canvas.addChild(_1=>[Canvas ID:isc_Timeline_0_timelineView_eventDragTarget], _2=>undef, _3=>undef)
    TimelineView.$1731()
    TimelineView.$152e(_1=>true)
    CalendarView.rebuild(_1=>undef)
    rebuild_0_g$()
    rebuildCalendar_0_g$()
    refreshCalendarData_0_g$()
    onResponseReceived_443_g$(request_0_g$=>com.google.gwt.http.client.Request@48, response_0_g$=>com.google.gwt.http.client.ResponseImpl@49)
    fireOnResponseReceived_0_g$(callback_0_g$=>com.uds.webadmin.client.GPopUpShowPlaner$27@4a)
    onReadyStateChange_0_g$(xhr_0_g$=>[object XMLHttpRequest])
    anonymous([object Event])
    apply_0_g$(jsFunction_0_g$=>anonymous(), thisObj_0_g$=>[object XMLHttpRequest], args_0_g$=>[object Arguments])
    entry0_0_g$(jsFunction_0_g$=>anonymous(), thisObj_0_g$=>[object XMLHttpRequest], args_0_g$=>[object Arguments])
    anonymous([object Event])

Both cases still appear in 15.04. Build.

Thanks
Andy

Leave a comment:

Isomorphic replied

15 Apr 2016, 08:05
Please retest it with today's build, which should address your other overlap issues.
Leave a comment:
Niels_EMP replied

15 Apr 2016, 06:01
Hey, I just wanted to know if the overlap issue i described in post #25 http://forums.smartclient.com/forum/...949#post236949 has been seen?

I'm just a little worried that it was buried in these other posts.

Like I wrote, I don't think it is related to the first one since it occurs even when showWeekends is true.

Anyways if you could just let me know if you are aware of it, that would be awesome.
Leave a comment:

andyx1975 replied

14 Apr 2016, 06:26

you can also try this Json file... here is the endDate timestamp 23:59:59:

Code:

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

Code:

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;
    }

  

    public DataSource getDataSource()
    {
        DataSource ds = new DataSource();
        ds.setDataURL( "List/timeline.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 );
    }

    public void refreshCalendarData()
    {
        timeLine.setDataSource( getDataSource() );
        timeLine.fetchData();

        rebuildCalendar();
    }
}

Then your dates are 48hours instead of 24hours.

And if you uncomment "timeLine.setEventSnapGap( ( 24 * 60 ) );"... you will get this one... an 2h timeshift for each 24h event:

Last edited by andyx1975; 14 Apr 2016, 06:34.

Leave a comment:

andyx1975 replied

13 Apr 2016, 22:38
The above mentioned error also appears with latest nightly build from 13.04.
Leave a comment:

andyx1975 replied

13 Apr 2016, 10:32

By moving 2 Items via Drag & Drop to the same day... now I get the following error:

Code:

[ERROR] [com.uds.webadmin.GBookingAdmin] - 20:40:15.443:WARN:drawing:isc_Timeline_0_timelineView_eventDragTarget:negative or zero area: height: 85, width: 0, refusing to draw
    Canvas.readyToDraw()
    Canvas.draw(_1=>undef)
    Canvas.addChild(_1=>[Canvas ID:isc_Timeline_0_timelineView_eventDragTarget], _2=>undef, _3=>undef)
    TimelineView.$1731()
    TimelineView.$152e(_1=>true)
    CalendarView.rebuild(_1=>undef)
    anonymous()
    anonymous(thisObj=>com.google.gwt.http.client.RequestBuilder$1@9a39800, dispId=>49020930, p0=>[object XMLHttpRequest])
    anonymous([object Event])
    anonymous(jsFunction=>anonymous(), thisObj=>[object XMLHttpRequest], args=>[object Arguments])
    anonymous(thisObj=>null, dispId=>65588, p0=>anonymous(), p1=>[object XMLHttpRequest], p2=>[object Arguments])
    anonymous([object Event])

You can reproduce this issue with the following code:

Code:

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

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;
    }

   

    public DataSource getDataSource()
    {
        DataSource ds = new DataSource();
        ds.setDataURL( "List/timeline.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 );
    }

    public void refreshCalendarData()
    {
        timeLine.setDataSource( getDataSource() );
        timeLine.fetchData();

        rebuildCalendar();
    }
}

Hugh... complicated story... sorry for confusing you!!!

Last edited by andyx1975; 13 Apr 2016, 11:59.

Leave a comment:

andyx1975 replied

13 Apr 2016, 09:32

Somehow I did not manage that the timeshift is visible in the timeline... but please have a look at this example... I deliver the following Json file:

Code:

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

So I deliver 24h events from 0:00 to 0:00 o clock. If you open an event you can see the startTime is 2:00 and the endTime is 2:00. But the timeline draws them as startTime 0:00 and endTime 0:00. Which is really strange. This did not happen in smartGWT 5.1 and 5.0. When I deliver a timestamp without a timezone... the local browser timezone was used and when I deliver a timestamp with timezone... the timestamp was converted to local browser time.

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
{

    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 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;
    }

   

    public DataSource getDataSource()
    {
        DataSource ds = new DataSource();
        ds.setDataURL( "List/timeline.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 );
    }
}

Leave a comment:

Niels_EMP replied

13 Apr 2016, 07:44

Isomorphic I just spotted another overlap issue in my timeline while showWeekends was set to true so I don't think it is related to the other one.

I am still using SmartClient Version: v11.0p_2016-04-09/Pro Deployment (built 2016-04-09) and Chrome

Code:

    public Timeline getTimeline()
    {
        final Timeline timeline = new Timeline();  
        timeline.setHeight100();
        timeline.setCanRemoveEvents(false);
        timeline.setCanEditLane(true);  
        timeline.setShowEventDescriptions(false); 
        timeline.setEventSnapGap(1440); // 60 * 24
        timeline.setShowIndicators(true);
        timeline.setUseEventCanvasRolloverControls(false); 
        timeline.setFirstDayOfWeek(0);
        timeline.setLaneEventPadding(2); // add a little space around events 
        timeline.setShowWeekends(true);
        HeaderLevel[] headerLevels = new HeaderLevel[]{  
            new HeaderLevel(TimeUnit.WEEK),
            new HeaderLevel(TimeUnit.DAY)
        };  
        timeline.setHeaderLevels(headerLevels);  
        timeline.setLaneFields(new ListGridField[]{ new ListGridField("title", "Developer", 120)});  
        timeline.setLanes(TimelineLaneData.getRecords());  
        timeline.setData(TimelineData.getRecords());
        Date startDate = new Date(116, 3, 14);
        // if you don't call this, you'll get defaultTimelineColumnSpan columns (20)
        timeline.setStartDate(startDate);
        Date endDate = new Date(116, 4, 14);
        timeline.setEndDate(endDate);
        
        return timeline;
    }
    
    public static class TimelineData {  
          
        private static CalendarEvent[] records;  
        
        public TimelineData() {  
        }  
        public static CalendarEvent[] getRecords() {  
            if (records == null) {  
                records = getNewRecords2();  
            }  
            return records;  
        }  
      
        public static CalendarEvent[] getNewRecords2() {  
            
            return new CalendarEvent[]{  
                    new CalendarEvent(1, "Test 1", "", new Date(116, 3, 8), new Date(116, 3, 29), "charlesMadigen"),  
                    new CalendarEvent(2, "Test 2", "", new Date(116, 4, 1), new Date(116, 6 ,1), "charlesMadigen"),
                    new CalendarEvent(3, "Test 3", "", new Date(116, 4, 4), new Date(116, 4, 11), "charlesMadigen"),  
                    new CalendarEvent(4, "Test 4", "", new Date(116, 4, 4), new Date(116, 4, 11), "charlesMadigen")
            };  
        }
    }  
    
    public static class TimelineLaneData {  
          
        private static Lane[] records;  
      
        public static Lane[] getRecords() {  
            if (records == null) {  
                records = getNewRecords();  
            }  
            return records;  
        }  
      
        public TimelineLaneData() {  
        }  
      
        public static Lane[] getNewRecords() {  
            Lane[] lanes = new Lane[]{  
            getLane("charlesMadigen", "Charles Madigen", "Managers"),  
            getLane("tamaraKane", "Tamara Kane", "Developers"),  
            getLane("darcyFeeney", "Darcy Feeney", "Managers"),  
            getLane("kaiKong", "Kai Kong", "Developers"),  
            getLane("shelleyFewel", "Shelley Fewel", "Managers"),  
            getLane("garretMonroe", "Garret Monroe", "Developers")  
            };  
            return lanes;  
        }  
      
        private static Lane getLane(String name, String title, String devGroup) {  
            Lane lane = new Lane(name, title);  
            lane.setAttribute("devGroup", devGroup);  
            return lane;  
        }  
    }

Leave a comment:

Isomorphic replied

13 Apr 2016, 06:33
Actually, the timeshift difference is most likely due to the specific dates you were using - they probably happened to include the Daykight Savings Time cross-over dates. We'll take a look at that too.
Leave a comment:
Isomorphic replied

13 Apr 2016, 06:22
Right, yes. You might want to read the Date and Time Storage overview in the docs, but to quote from there:

Code:

When using the SmartClient server framework, "datetime" values are automatically transmitted such that the resulting Date object has the same GMT/UTC timestamp (milliseconds since epoch).

The UTC dates are displayed in the browser's local timezone.

In theory, you would alter this via defaultDisplayTimezone - but this isn't documented to have an effect in Calendar widgets. There's an investigation planned into adding that support.

Bearing this in mind, when you say that the timeshift gets larger or smaller when you use setStartDate() or setEndDate(), we don't understand why that might happen - we'll need to see a sample that shows that.
Leave a comment:
andyx1975 replied

13 Apr 2016, 06:11
Ah okay... now I understand your question... sorry... There is always a timeshift in the calendar events... the calendar events are 24h events from 0:00 until 24:00 o clock... but in the timeline they appear as events from 2:00 until 2:00 o clock.

For example the first calendar event in this screenshot comes in as json in the following format:
"startDate":"2016-04-13T00:00:00.000"
"endDate":"2016-04-14T00:00:00.000"

In the calendar the dates appear as follows... look at the mouseover... there is a timeshift of 2 hours:

The timeshift gets larger or smaller when I uncomment some methods like:
- timeline.setStartDate(getStartDate())
- timeline.setEndDate(getEndDate())
- timeLine.setEventSnapGap( ( 24 * 60 ) )

So you understand me right now? I can do what I want, I always see some timeshifts.

Thanks
Andy
Leave a comment:
Isomorphic replied

13 Apr 2016, 05:30
Right - but what is it that you see as wrong with that picture?
Leave a comment:

Previous 1 2 3 template Next

Announcement

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment: