Announcement

**Isomorphic** · 25 Oct 2016, 00:12

Do you see this fixed if you setEventSnapGap(0)?

**andyx1975** · 25 Oct 2016, 22:25

Yes then the dates do not stake:

But I want to force 24h dates... always from 00:00h to 23:59h... therefore I guess I have to set "timeLine.setEventSnapGap( ( 24 * 60 ) );"... right?

Thanks
Andy

**Isomorphic** · 26 Oct 2016, 06:00

When unset, snapGaps are one cell long - in your case, 24 hours - from 00:00 on one day to 23:59:59.999 on the same day.- however, two things:

1) it's not clear how you created your event records, but their dates appear to be in GMT+1 (as you showed in your first post, and can see in your most recent image). You need to store your dates at the server in GMT, and they'll be converted for display in your browser's timezone. Either create events in GMT at the server, or create them with the Timeline in your browser, which will show them in your browser timezone, but save them to the server in GMT.

2) if you want events that end at snapGaps that end at 23:59, you want to end the events at 23:59, not at 00:00 on the next day, because that's the start of the next snapGap, and a new day (which can play havoc with changes in DST, depending on your timezone).

That said, we do have some logic that should deal with that - the real problem is almost certainly the GMT offset in your event's start and end dates.

**andyx1975** · 26 Oct 2016, 23:02

Okay... thank you I understand... and I followed your instructions... so now I am at the following point:

The dates are as follows:

Code:

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

My Code is still as mentioned in my first post:

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( "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 );
    }
}

Now the method "timeLine.setEventSnapGap( ( 24 * 60 ) );" affects that I get 48h Dates instead of 24h dates (See Screenshot). Seems that the 24h snap gap will be added to the endDateTime instead of the startdate time.

Setting the end date to 00:00 the next day leads to the same situation as in the screenshot above... I also get 48h dates instead of 24h dates:

Code:

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

Thanks
Andy

**Isomorphic** · 27 Oct 2016, 00:17

Your data values are now in GMT, but not GMT values that represent midnight in your browser. There, the events are from 1am to 00:59 the next day (hovering over an event should confirm that) - the snaps are 1-day wide, from 00:00 to 23:59, so the start and end dates are in different snaps. The start and end dates are not changed, but the events render to their closest snaps - start to the start of it's snap, end to the end of it's (different) snap - so the events are rendered two days wide.

If you're in GMT+1, and you want to see an event appear at midnight in your browser, you need to create midnight *for your browser*, but in GMT - so, 11pm the previous night.

If you use the UI to create some events, you should see things work as you expect - and you could use the RPC tab in the Dev Console to see what's going over the wire - that might help to clarify things.

Note that you can also setShowCellHovers(true) to show a mouse prompt with the dates of the snap under the mouse, and setShowDragHovers(true) so see those values during drags.

**andyx1975** · 28 Oct 2016, 01:31

ah... okay thank you... have it right now!!!

Announcement

Timeline: Move 24h dates... stacks the dates

Comment

Comment

Comment

Comment

Comment

Comment