Hour labels and the appointments not aligned.

[GoogleCodeExporter]

What steps will reproduce the problem?
1.Add 3 appointments to the Calendar. The appointments should have following 
times:
start time  End time
13:00         13:30
14:00         14:30      
14:00         14:30

What is the expected output? What do you see instead?
The appointments should start exactly from 13:00, 14:00 lines. But, they are 
offset from the hour labels. The one that starts at 13:00 is shown starting 
after 13:30. Similarly with other 2 appts. as well.

What version of the product are you using? On what operating system?
gwt-cal 0.9.3 on Window 7 professional. Gxt version is 2.2.4

Please provide any additional information below.
Please see the attched screen shot.

Original issue reported on code.google.com by uisand...@gmail.com on 3 May 2012 at 3:09

Attachments:

• Appointment.png

[GoogleCodeExporter]

Are you using gwt-cal inside a get web app? 

I would need some extra info to replicate:
- browser version
- demo code showing how are you using it inside get
- gwt version

Original comment by ctasada on 3 May 2012 at 5:56

[GoogleCodeExporter]

I am using gwt-cal inside a GXT web app. I dont know what you meant by get web 
app?
Following are the versions:
browser - Firefox 7.0.1, IE 8.0. 

gwt-version- I found a jar file that my project uses by the name:
gxt-2.2.4-gwt22.jar.

Code snippet: The code below is to create a dummy calendar and hence you can 
find it written in not the perfect way. I had to give a demo of this Calendar 
to my project manager and stake holders. The demo is done and this issue has 
come as a show stopper. The decission to purchase this calendar will be done if 
I am able to get rid of this problem.

import com.bradrydzewski.gwt.calendar.client.Appointment;
import com.bradrydzewski.gwt.calendar.client.AppointmentStyle;
import com.bradrydzewski.gwt.calendar.client.Calendar;
import com.bradrydzewski.gwt.calendar.client.CalendarSettings;
import com.bradrydzewski.gwt.calendar.client.CalendarViews;
import com.extjs.gxt.ui.client.widget.HorizontalPanel;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.Style.LayoutRegion;

    public void init() {
        setLayoutOnChange(true);
        Calendar calendar = createCalendar("Calendar for xxx", "BLUE");
        calendar.setSize("1100px","730px");
        addToolTip(calendar1);

        VerticalPanel vPanel1 = new VerticalPanel(); 
        HorizontalPanel hPanel1 = new HorizontalPanel();
        Label label1 = new Label("some text");

        hPanel1.add(label1);
        vPanel1.add(hPanel1);
        vPanel1.add(calendar1);

        setLayout(new BorderLayout());

        add(vPanel1,centreData);        

    }

    private Calendar createCalendar(String title, String style) {
        final Calendar calendar = new Calendar();
        CalendarSettings settings = new CalendarSettings();
        calendar.setSize("375px","730px");
        settings.setIntervalsPerHour(4);
        settings.setOffsetHourLabels(false);
        calendar.setSettings(settings);
        calendar.setDate(new Date()); //calendar date, not required
        calendar.setView(CalendarViews.DAY,3);
        DeferredCommand.addCommand(new Command(){
            @Override
            public void execute() {
                calendar.scrollToHour(8);
            }
        });

        calendar.setSettings(settings);
        calendar.addAppointments(createDummyAppts(style));
        return calendar;
    }

    private ArrayList<Appointment> createDummyAppts(String style) {
        ArrayList<Appointment> appointmentList = new ArrayList<Appointment>();
        Appointment appt1 = new Appointment(); 
        appt1.setStart(createStartDate(13,00)); 
        appt1.setEnd(createEndDate(13,30)); 
        appt1.setTitle("Meeting for Guardian Object Record 10"); 
        appt1.setReadOnly(true);
        if (style.equalsIgnoreCase("blue")) {
            appt1.setStyle(AppointmentStyle.BLUE);
        } else if (style.equalsIgnoreCase("red")) {
            appt1.setStyle(AppointmentStyle.RED);
        } else {
            appt1.setStyle(AppointmentStyle.GREEN);
        }
        appointmentList.add(appt1);

        // adding second appointment.
        Appointment appt2 = new Appointment(); 
        appt2.setStart(createStartDate(14,00)); 
        appt2.setEnd(createEndDate(14,30)); 
        appt2.setTitle("Briefing Notes"); 
        if (style.equalsIgnoreCase("blue")) {
            appt2.setStyle(AppointmentStyle.BLUE);
        } else if (style.equalsIgnoreCase("red")) {
            appt2.setStyle(AppointmentStyle.RED);
        } else {
            appt2.setStyle(AppointmentStyle.GREEN);
        }
        appt2.setReadOnly(true);
        appointmentList.add(appt2);

        // adding third appointment.
        Appointment appt3 = new Appointment(); 
        appt3.setStart(createStartDate(14,00)); 
        appt3.setEnd(createEndDate(14,30)); 
        appt3.setTitle("Meeting for Guardian Object Record 12"); 
        appt3.setStyle(AppointmentStyle.BLUE);
        if (style.equalsIgnoreCase("blue")) {
            appt3.setStyle(AppointmentStyle.BLUE);
        } else if (style.equalsIgnoreCase("red")) {
            appt3.setStyle(AppointmentStyle.RED);
        } else {
            appt3.setStyle(AppointmentStyle.GREEN);
        }
        appt3.setReadOnly(true);
        appointmentList.add(appt3);

        return appointmentList;
    }

Thanks.

Original comment by uisand...@gmail.com on 4 May 2012 at 10:35

[GoogleCodeExporter]

Hi,
Please try to give me some solution ASAP as time is running out. I have to 
report to my PM / Stake holders about this issue and they have to decide 
immediately whether to buy it or not. Development is awaiting to be started on 
the module that will use calendar soon.

Original comment by uisand...@gmail.com on 8 May 2012 at 1:49

[GoogleCodeExporter]

Have you tried to do the same using GWT layout widgets? I see that you use gxt 
layouts and I remember problems mixing both frameworks.

Also, I see that gxt 3 is just released, can you test with this one? what about 
using a newer firefox version? does it change anything?

Original comment by ctasada on 11 May 2012 at 5:08

[GoogleCodeExporter]

I'm having the same problem, as described. Except, I'm using a recent version 
of Chrome in Ubuntu Linux. 
Screen shot example is attached, demonstrating an appointment at "noon" but 
rendering about 15-30 mins after 12:00.  Very difficult to read the calendar at 
a glance this way.

Version info: 
Ubuntu 12.04
Chrome version: 18.0.1025.168 (Developer Build 134367 Linux) 

Original comment by k...@drent.org on 6 Aug 2012 at 4:30

Attachments:

• Selection_057.png