Announcement

**Niels_EMP** · 12 Apr 2016, 08:15

Awesome thanks

**andyx1975** · 12 Apr 2016, 09:28

Hi,

I tried latest Build from 12.04. and I am still having a timeshift of 2 hours in the timeline.

My server submits the dates via Json as follows:
"startDate":"2017-04-01T00:00:00.000","endDate":"2017-04-02T00:00:00.000"

The above mentioned date will appear in the calendar as follows;

My browser time is GMT+0200... but adding a timezone is not wanted because those dates are 24h dates and always local time.

Code:

        Timeline timeLine = new Timeline();

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

        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 ) );
        timeLine.setAllowDurationEvents( true );

        // // Sets start and end date of calendar
        timeLine.setStartDate( getStartDate() );
        timeLine.setEndDate( getEndDate());

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

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

        // Sets the indicators
        timeLine.setShowIndicators( false );
        timeLine.setIndicators( getIndicators() );

        // Inits Calendar Header
        initHeaderLevels();

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

Code:

private DataSource getDataSource()
{
        DataSource ds = new DataSource();
        ds.setDataURL( "rest/getTimeLine" );
        ds.setClientOnly( true );
        ds.setID( "timeline" + CParser.getRandomLetters( 5 ) );
        ds.setDataFormat( DSDataFormat.JSON );

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

        DataSourceDateTimeField startDateField = new DataSourceDateTimeField( "startDate" "Start" );
        DataSourceDateTimeField endDateField = new DataSourceDateTimeField( "endDate", "End");
        DataSourceTextField laneField = new DataSourceTextField( lane, "Lane" );
        DataSourceTextField nameField = new DataSourceTextField( name, "Name" );
        DataSourceTextField descField = new DataSourceTextField( description, "Description" );

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

        return ds;

Attached Files

**andyx1975** · 13 Apr 2016, 05:21

I have serious issues with this timeline... there really seems to be something wrong... when I uncomment "timeline.setStartDate(getStartDate())" and "timeline.setEndDate(getEndDate())" my timeline looks like this:

**Isomorphic** · 13 Apr 2016, 05:23

We're not really sure what you're getting at.

If you have an issue, show a standalone testcase we can run and detail the steps we can take to see what you're seeing, versus what you expect to be seeing.

**andyx1975** · 13 Apr 2016, 05:28

Setting "timeline.setStartDate(getStartDate())" and uncomment "timeline.setEndDate(getEndDate())" let the table look like this:

Okay I try to create a standalone case, but thats not easy since I get the dates as json from a server.

**Isomorphic** · 13 Apr 2016, 05:30

Right - but what is it that you see as wrong with that picture?

**andyx1975** · 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

**Isomorphic** · 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.

**Isomorphic** · 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.

**Niels_EMP** · 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;  
        }  
    }

**andyx1975** · 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 );
    }
}

**andyx1975** · 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!!!

**andyx1975** · 13 Apr 2016, 22:38

The above mentioned error also appears with latest nightly build from 13.04.

**andyx1975** · 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:

**Niels_EMP** · 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.

Announcement

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment