package test; import java.util.Date; import com.google.gwt.core.client.EntryPoint; import com.smartgwt.client.types.TimeUnit; import com.smartgwt.client.widgets.calendar.CalendarEvent; import com.smartgwt.client.widgets.calendar.CalendarView; import com.smartgwt.client.widgets.calendar.HeaderLevel; import com.smartgwt.client.widgets.calendar.Lane; import com.smartgwt.client.widgets.calendar.ShowDateCustomizer; import com.smartgwt.client.widgets.calendar.Timeline; import com.smartgwt.client.widgets.grid.ListGridField; import com.smartgwt.client.widgets.layout.VLayout; public class Test implements EntryPoint { private int eventId = 0; @Override public void onModuleLoad() { // demo shows date August 29th 2019 Date periodStart = new Date(119, 7, 29); Date periodEnd = new Date(119, 7, 29, 23, 59, 59); Date end2 = new Date(119, 8, 5, 23, 59, 59); VLayout body = new VLayout(10); body.setWidth100(); body.setMembers(build30MinuteBasedTimeline(periodStart, end2), build3HourBasedTimeline(periodStart, periodEnd), build6HourBasedTimeline(periodStart, periodEnd)); body.draw(); } private Timeline build30MinuteBasedTimeline(Date periodStart, Date periodEnd) { Timeline timeline = createTimeline(periodStart, periodEnd); timeline.setEventSnapGap(1); // display the whole day as blocks of 30 minutes timeline.setResolution(new HeaderLevel[] { new HeaderLevel(TimeUnit.DAY), new HeaderLevel(TimeUnit.MINUTE) }, TimeUnit.MINUTE, 7 * 24 * 60 - 1, 30); timeline.setLanes(new Lane("lane1", "Lane 1"), new Lane("lane2", "Lane 2")); timeline.setData(buildData()); return timeline; } private Timeline build3HourBasedTimeline(Date periodStart, Date periodEnd) { Timeline timeline = createTimeline(periodStart, periodEnd); timeline.setEventSnapGap(3); // display the whole day as blocks of 3 hours timeline.setResolution(new HeaderLevel[] { new HeaderLevel(TimeUnit.DAY), new HeaderLevel(TimeUnit.MINUTE) }, TimeUnit.MINUTE, 24 * 60 - 1, 180); timeline.setLanes(new Lane("lane1", "Lane 1"), new Lane("lane2", "Lane 2")); timeline.setData(buildData()); return timeline; } private Timeline build6HourBasedTimeline(Date periodStart, Date periodEnd) { Timeline timeline = createTimeline(periodStart, periodEnd); timeline.setEventSnapGap(10); // display the whole day as blocks of 6 hours timeline.setResolution(new HeaderLevel[] { new HeaderLevel(TimeUnit.DAY), new HeaderLevel(TimeUnit.MINUTE) }, TimeUnit.DAY, 24 * 60 - 1, 60 * 6); timeline.setLanes(new Lane("lane1", "Lane 1"), new Lane("lane2", "Lane 2")); timeline.setData(buildData()); return timeline; } private CalendarEvent[] buildData() { // lane 1 has more realistic events, lane 2 has only events that start and end in minute 0 or 30, to illustrate the difference in behaviour of the timeline return new CalendarEvent[] { createEvent("event 0", "lane1", 0, 0, 0, 11, 34, 9), createEvent("event 1", "lane1", 11, 34, 9, 11, 34, 59), createEvent("event 2", "lane1", 11, 34, 59, 11, 54, 34), createEvent("event 3", "lane1", 11, 54, 34, 12, 3, 18), createEvent("event 4", "lane1", 12, 3, 18, 23, 59, 59), createEvent("event 5", "lane2", 0, 0, 0, 5, 37, 2), createEvent("event 6", "lane2", 5, 37, 2, 5, 45, 34), createEvent("event 7", "lane2", 5, 45, 34, 6, 13, 25), createEvent("event 8", "lane2", 6, 13, 25, 6, 19, 46), createEvent("event 9", "lane2", 6, 19, 46, 10, 17, 42), createEvent("event 10", "lane2", 10, 17, 42, 10, 24, 22), createEvent("event 11", "lane2", 10, 24, 22, 23, 59, 59) }; } private Timeline createTimeline(Date startDate, Date endDate) { Timeline timeline = new Timeline(); timeline.setHeight(250); timeline.setShowEventDescriptions(false); timeline.setSizeEventsToGrid(false); timeline.setShowLaneRollOver(true); timeline.setShowTimelineView(true); timeline.setAlternateLaneStyles(true); timeline.setShowControlsBar(false); timeline.setShowAddEventButton(false); timeline.setShowDatePickerButton(false); timeline.setShowDateChooser(false); // would be nice to enable this with only the selected period (for data) available timeline.setShowDateCustomizer(new ShowDateCustomizer() { @Override public boolean shouldShowDate(Date date, CalendarView calendarView) { return date.equals(startDate) || date.equals(endDate) || date.after(startDate) && date.before(endDate); } }); timeline.setSnapVDirection("nearest"); timeline.setLaneFields(new ListGridField[] { new ListGridField("title", "My Lanes", 100) }); timeline.setShowZones(true); timeline.setShowIndicators(true); timeline.setTimelineRange(startDate, endDate); return timeline; } private CalendarEvent createEvent(String name, String lane, int startHours, int startMinutes, int startSeconds, int endHours, int endMinutes, int endSeconds) { CalendarEvent event = new CalendarEvent(++eventId, name, name, new Date(119, 7, 29, startHours, startMinutes, startSeconds), new Date(119, 7, 29, endHours, endMinutes, endSeconds), lane); event.setCanEdit(false); return event; } }