Broken calendar rendering with eventwindowstlye

[miskolczi.peter]

Smart GWT 4.0p (2013-10-15)

It did work perfectly, but suddenly it went wrong.This is a big concern for using Smart GWT: sometimes features are broken, and it isn't easy to explain or create repeat steps because they usually strange errors. Hope you guys will be able to avoid these kind of problems (new bugs in existing features) - makes us unhappy, and generates us extra working hours.

But focusing on our current problem: the first week Oct 14 - 18 the styles are OK. See screen shot "correct-styles".

But if we go another week (Oct 21-25; it seems usually it failures on the second page/refresh) the two events with blockStyle gets rendering with invalid/other styles. See screen shot "invalid-styles-rendered..."

Events #11 and #6 should have the blockStyle background color (orange), but the are yellow and green.

For easiest understanding and repeating you can find out the code and the css below.

Please let me know if you need anything else to fix this bug (critical for us).

Thank you!

public class CalendarEventWindowStyleRenderingProblem implements EntryPoint {
	
	private static Date today = new Date();   
	private static int year = today.getYear();   
	private static int month = today.getMonth();   
	private static int day = today.getDate() - today.getDay() +2;
	
	private Calendar calendar;

	@Override
	public void onModuleLoad() {
		calendar = new Calendar();
		
		calendar.setRowHeight(40);
    	calendar.setTimeFormatter(TimeDisplayFormat.TOSHORTTIME);
		
		calendar.setWorkdayStart("6:00am");
		calendar.setWorkdayEnd("8:00pm");

		calendar.setShowWeekends(false);
		//calendar.setDisableWeekends(false);
		calendar.setWorkdays(new int[]{1,2,3,4,5,6});
		calendar.setFirstDayOfWeek(1); // Monday
	    
        calendar.setShowWorkday(true);  
        calendar.setScrollToWorkday(true);
		calendar.setCanEditEvents(false);
        
		calendar.setCanCreateEvents(true);
		calendar.setCanRemoveEvents(false);
		
		calendar.setCanDragEvents(false);
		calendar.setCanDrop(false);
		calendar.setSaveButtonTitle("Start Request");
		calendar.setEventOverlap(true);
		calendar.setEventOverlapPercent(80);
		calendar.setEventOverlapIdenticalStartTimes(true);
    	calendar.setEventSnapGap(15);
    	
		calendar.setEventNameFieldTitle("Request Comment");
		
        TextItem tiName = new TextItem();   
        tiName.setType("text");   
        tiName.setName("name");
        tiName.setTitle("Name title");

		long t = System.currentTimeMillis();
		CalendarEvent[] events = getEvents();
		for(CalendarEvent e : events) {
			e.setName(e.getName() + " " + e.getEventWindowStyle());
		}
		
		calendar.setData(events);
		System.out.println("set events: " + (System.currentTimeMillis() - t) + " ms,   count: " + events.length);
		
		calendar.draw();
		
	}
	
	public static CalendarEvent[] getEvents() {
		List<CalendarEvent> eventList = new ArrayList<CalendarEvent>();
		CalendarEvent event;
		
		event = new CalendarEvent(1, "#1", "", new Date(113, 9, 16, 7, 0, 0), new Date(113, 9, 16, 7, 15, 0), false, "appointmentStyle");
		eventList.add(event);

		event = new CalendarEvent(2, "#2", "", new Date(113, 9, 15, 7, 15, 0), new Date(113, 9, 15, 8, 15, 0), false, "pendingStyle");
		eventList.add(event);

		event = new CalendarEvent(3, "#3", "", new Date(113, 9, 15, 9, 30, 0), new Date(113, 9, 15, 10, 30, 0), false, "pendingStyle");
		eventList.add(event);

		event = new CalendarEvent(4, "#4", "", new Date(113, 9, 2, 7, 0, 0), new Date(113, 9, 2, 13, 0, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(5, "#5", "", new Date(113, 9, 9, 7, 0, 0), new Date(113, 9, 9, 13, 0, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(6, "#6", "", new Date(113, 9, 23, 7, 0, 0), new Date(113, 9, 23, 13, 0, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(7, "#7", "", new Date(113, 9, 30, 7, 0, 0), new Date(113, 9, 30, 13, 0, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(8, "#8", "", new Date(113, 8, 30, 7, 0, 0), new Date(113, 8, 30, 15, 30, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(9, "#9", "", new Date(113, 9, 7, 7, 0, 0), new Date(113, 9, 7, 15, 30, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(10, "#10", "", new Date(113, 9, 14, 7, 0, 0), new Date(113, 9, 14, 15, 30, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(11, "#11", "", new Date(113, 9, 21, 7, 0, 0), new Date(113, 9, 21, 15, 30, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(12, "#12", "", new Date(113, 9, 28, 7, 0, 0), new Date(113, 9, 28, 15, 30, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(13, "#13", "", new Date(113, 9, 16, 12, 0, 0), new Date(113, 9, 16, 16, 0, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(14, "#14", "", new Date(113, 9, 16, 9, 0, 0), new Date(113, 9, 16, 16, 0, 0), false, "blockStyle");
		eventList.add(event);

		event = new CalendarEvent(15, "#15", "", new Date(113, 9, 16, 9, 0, 0), new Date(113, 9, 16, 16, 0, 0), false, "blockStyle");
		eventList.add(event);		
		CalendarEvent[] events = new CalendarEvent[eventList.size()];
		eventList.toArray(events);		
		return events;
	}
	
}

Actually we use TreeFrog theme, and here is the css if you need:

/* Calendar Event Styles */

/* Calendar Appointment (Appointment)*/

.appointmentStyle,
.appointmentStyleHeader,
.appointmentStyleBody {
   font-size:9px;
   background-color: #BCEDAC;
}

.appointmentStyle {
   border: 1px solid #035F03;
}

.appointmentStyleHeader {
    font-weight:bold;
    background-color:#0B610B; 
    color: white;
}

.appointmentStyleBody {
    padding: 3px;
}

.appointmentStyleResizer {
    border-top:1px solid white;
    border-bottom: 1px solid white;
}

/* Calendar Foreign (Foregin Appointment) */

.foreignStyle,
.foreignStyleHeader,
.foreignStyleBody {
    font-size:9px;
    background-color:#DEF6D6; /* E0E6F8; */
}

.foreignStyle {
   	border: 1px solid #A4A4A4;
}

.foreignStyleHeader {
	font-weight:bold;
	color: #DEF6D6; /* #424242; */
    background-color:#0B610B; /* #A9BCF5; */ 
}

.foreignStyleBody {
    padding: 3px;
}

.foreignStyleResizer{
    border-top:1px solid white;
    border-bottom: 1px solid white;
}

/* Calendar Other (Other Appointment) */

.otherStyle,
.otherStyleHeader,
.otherStyleBody {
    font-size:9px;
    background-color:#F5FFF1; /* #F3FAFC; */
}

.otherStyle {
   	border: 1px solid #A4A4A4;
}

.otherStyleHeader {
	font-weight:bold;
	color:#F5FFF1; /* #424242; */
    background-color:#0B610B; /* #A9BCF5; */ 
}

.otherStyleBody {
    padding: 3px;
}

.otherStyleResizer{
    border-top:1px solid white;
    border-bottom: 1px solid white;
}

/* Calendar Pending  (Appointment Request) */

.pendingStyle,
.pendingStyleHeader,
.pendingStyleBody {
    font-size:9px;
    background-color:#F4FA58; /* #F7FE2E; #FFFF00;  #F4FA58; #F3F781;  F2F5A9;   F4FA58; #F6CECE;  F5D0A9;  D7D9E0; */
}

.pendingStyle {
   	border: 1px solid #A4A4A4;
}

.pendingStyleHeader {
	font-weight:bold;
	color: #424242; /*#F7F7F7; */ /*424242; */ 
    background-color: #FFFF00; /* #F6CECE;  #F78181; #FA5858; 8F8F92;  BDBDBD; */
}

.pendingStyleBody {
    padding: 3px;
}

.pendingStyleResizer{
    border-top:1px solid white;
    border-bottom: 1px solid white;
}

/* Calendar Other Pending  (Appointment Other Request) */

.otherpendingStyle,
.otherpendingStyleHeader,
.otherpendingStyleBody {
    font-size:9px;
    background-color:#F2F5A9; /*#F3F781; #F7F8E0; #FBEFEF; F7F7F7; */ 
}

.otherpendingStyle {
   	border: 1px solid #A4A4A4;
}

.otherpendingStyleHeader {
	font-weight:bold;
	color: #424242; /* #F7F7F7; */ /*424242; */ 
    background-color:#FFFF00; /* #F78181; #FA5858; 8F8F92;  BDBDBD; */
}

.otherpendingStyleBody {
    padding: 3px;
}

.otherpendingStyleResizer{
    border-top:1px solid white;
    border-bottom: 1px solid white;
}

/* Calendar Block (Appointment Template) */

.blockStyle,
.blockStyleHeader,
.blockStyleBody {
    font-size:9px;
	background-color:#FFD5A8; /*#F7BE81; /*#D7F5DE; */ 
}

.blockStyle {
   	border: 1px solid #A4A4A4;
}

.blockStyleHeader {
	font-weight:bold;
	color: #424242;
    background-color:#F7BE81;
}

.blockStyleBody {
    padding: 3px;
}

.blockStyleResizer{
    border-top:1px solid white;
    border-bottom: 1px solid white;
}

/* Calendar Other Block (Appointment Other Template) */

.otherblockStyle,
.otherblockStyleHeader,
.otherblockStyleBody {
    font-size:9px;
    background-color:#FFF6EB; /* #FCE9D4; #FAFFFF; */ 
}

.otherblockStyle {
   	border: 1px solid #A4A4A4;
}


.otherblockStyleHeader {
	font-weight:bold;
	color: #424242;
    background-color:#F7BE81;
}

.otherblockStyleBody {
    padding: 3px;
}

.otherblockStyleResizer{
    border-top:1px solid white;
    border-bottom: 1px solid white;
}

[Isomorphic]

When was the last time you updated, before October 15? Calendar code in this branch hasn't been changed since toward the beginning of September.

However, the last changes made there were some necessary optimizations that involved the pooling of event windows, where before they were re-created every time - so, its possible that updating of color/style regressed at that point and re-used windows aren't being styled properly.

We'll take a look and update this thread when we have more information.

[miskolczi.peter]

We didn't see this problem in build dated 2013-08-19.

The first it was identified was yesterday with on test drive using 2013-09-25, but wanted to rested with the latest 2013-10-15 where it is still exists.

[Isomorphic]

This is fixed for builds dated October 18 and later

[miskolczi.peter]

Still waiting for it, because the latest build today (10/21) is dated 2013-10-17 for 4.0p.

[miskolczi.peter]

Fix doesn't work

Smart GWT 4.0p (2013-10-22)

Very interesting: the test app works fine, but the problem still exists in the real application. I am disappointed because I need to create new test case for you (again for the same bug).

[Isomorphic]

Sorry to hear that. Unfortunately - yes, we will need a way to reproduce the (new) problem. There must be some other configuration in your real app which causes a separate problem from the one we addressed.

[miskolczi.peter]

Maybe fixed

When I tried to create new tests, I continuously switched between the test and the real app. I was never able to fail the test app, but suddenly I wasn't able to get the bad rendered week also in our real app either. I don't know what to think, but it seems it fixed itself :-)

The only thing I could think it may some caching problem in the browser (even I refreshed it several times).

Anyhow now it is OK.

Thank you. Hope it keeps working from now.

(Will put it to our test drive and will let you know if it comes back) Will let you know.