search

hunthu2000 / gwt-cal

Automatically exported from code.google.com/p/gwt-cal
0 stars 0 forks source link

Enable mobile-friendly view #61

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
The month view isn't working on Safari. Works in IE and FireFox.
To reproduce run the live demo on this site.

Running:
Safari 5.0 (7533.16)
Firefox 3.6.3
Internet Explorer 8.0.7600.16385

Best regards
Tobias

Original issue reported on code.google.com by lovestad...@gmail.com on 15 Jun 2010 at 12:30

GoogleCodeExporter commented 9 years ago 
The header should only say Safari! Sorry.
This is a problem trying to view the created webpage on iPhone which is running 
just Safari...

Original comment by lovestad...@gmail.com on 15 Jun 2010 at 12:32

GoogleCodeExporter commented 9 years ago 
Tobias, the MonthView and DayView are not formatted for the iphone or ipad. 
Google takes the approach of rendering appointments on the iphone or ipad in a 
simple listView... probably due to the lack of scroll bar breaking their 
dayView implementation and also because the "two finger scroll" on iframes / 
divs is just not very intuitive to end users.

At some point we will create a mobile-friendly list view, but re-working the 
DayView and MonthView for mobile devices is not planned.

Original comment by Brad.Ryd...@gmail.com on 15 Jun 2010 at 2:32

GoogleCodeExporter commented 9 years ago 
Issue 59 has been merged into this issue.

Original comment by Brad.Ryd...@gmail.com on 15 Jun 2010 at 2:34

GoogleCodeExporter commented 9 years ago 
I don't think that issue 59 is the same as this one at all. This issue is about 
the calendar not working on a safari browser and the issue 59 is about the 
calendar should have some tooltip and/or some customized graphics when showing 
many appointments.

Still this is essential for us to use the calendar for commercial purpose.

Best regards

Original comment by lovestad...@gmail.com on 23 Jun 2010 at 8:22

GoogleCodeExporter commented 9 years ago 
I have done some quick fixes to this problem (with the +2 more label) with a 
clickable image showing a popup menu with actions for the appointments not 
showing. Also made the appointment heights configurable.

I attached the changed files. All changes have a marker before it saying // 
TODO, tope: some text...

Maybe not the most smooth solution, but it works for our purpose. Is it 
possible that you can add something like this in the "real" code?

Best regards
Tobias

Original comment by lovestad...@gmail.com on 23 Jun 2010 at 1:39

Attachments:

GoogleCodeExporter commented 9 years ago 
May you release all layout solution in 0.9.1?

Original comment by fornasie...@gmail.com on 23 Jun 2010 at 3:12

GoogleCodeExporter commented 9 years ago 
Thanks for providing a patch to the community, but i'm not sure that is the 
route we are looking to go in our code. I'd prefer to alter the 
DateRequestEvent and provide the clicked label (in addition to the date 
clicked), allowing the develop to implement the popup insider their own code.

The problem with having the popup in the MonthView is that it forces *every* 
developer to use your popup. What if they don't want to? Or they want to create 
their own type of rollover or use some completely different UI widget?

Also, recommended setting the appointment height through CSS. you can easily 
override the following style: .gwt-cal-MonthView .appointment { 
position:absolute;height:20px; overflow:hidden;text-decoration:none; }

If you look at our gwt-cal-demo you can see how we override the default DateBox 
style to look like ical. The same approach should be used for the MonthView 
appointment styles.

I think we can easily alter the DateRequestEvent to meet your needs. We will 
try to include this in our 0.9.1 release along with an example in the demo of 
how to implement.

Original comment by Brad.Ryd...@gmail.com on 23 Jun 2010 at 6:15

GoogleCodeExporter commented 9 years ago 
Thanks for your respons! Of cource your solution is much better (mine where 
just a fix for our specific problems). This would be great to have implemented 
in the calendar! Do you know approximately when this release will be done?

Original comment by lovestad...@gmail.com on 24 Jun 2010 at 6:41

GoogleCodeExporter commented 9 years ago 
I modified the DateRequestHandler in trunk to include the clicked label. You 
will use "event.getClicked()" which returns the Element that was clicked. It 
needs to be cast. This should allow you to extract you Popup code from the 
MonthView so that you don't have to maintain your own version.

Here is basic example of how it could work:

calendar.addDateRequestHandler(new DateRequestHandler<Date>(){
   @Override
   public void onDateRequested(DateRequestEvent<Date> event) {
      Element label = (Element)event.getClicked();
      PopupPanel popupPanel = new PopupPanel();
      popupPanel.add(new Label("show something in popup..."));
      popupPanel.setPopupPosition(
         label.getAbsoluteLeft() - label.getOffsetWidth() + label.getClientHeight(), 
         label.getAbsoluteTop() + label.getClientHeight());         
      popupPanel.show();
   }
});

In order to add an image next to the Label you could override the "+ n more" 
label's style: .moreAppointments { 
position:absolute;text-align:center;text-decoration:underline; 
background-image: [YOUR IMAGE HERE]}

Original comment by Brad.Ryd...@gmail.com on 28 Jun 2010 at 12:17

GoogleCodeExporter commented 9 years ago 
Thanks for the patch. Looks nice, but still I think there should be a way to 
not show the "+ n more" label which clutter the calendar when the calendar is 
rather small (see my screenshot in issue 59). Better to just show this text in 
a tooltip on a little image. What if the calendar should be in a different 
language?

I don’t understand how the modified DateRequestHandler should let me get the 
appointments that isn’t showing and do some actions on them (like the popup 
with a button for each appointment). I can get the label like you shown but 
this element is just good to have for getting the position and so of the label, 
not the actual data that is interesting… On the visible Appointments one can 
add very smoothly some actions by addOpenHandler(new 
OpenHandler<Appointment>(), but on the ones not showing I can’t figure that 
out (if there is a way).

Sorry if I start to get a little too demanding, but we really wants to use this 
calendar in our commercial products and then we have to fulfil our needs before 
buying the licence…

Best regards
Tobias

Original comment by lovestad...@gmail.com on 28 Jun 2010 at 2:09

GoogleCodeExporter commented 9 years ago 
Tobias, inside the DateRequestHandler you can get the list of appointments for 
the Date that was clicked:

List<Appointment> appointments = AppointmentUtil.filterListByDateRange(
   calendar.getAppointments(),event.getTarget(),1);

You could then add each Appointment to your popup with a button. It would 
display ALL appointments for that day, even if they are already displayed on 
the calendar, but is that really a show stopper?

Based on your screenshot it seems you need a mobile-friendly view for smaller 
screens. For example, Google Calendar on a mobile device will display a date 
picker and then when you click a particular day it will list all appointments 
underneath the date picker. See the screenshot in the bottom-left of this 
image: http://www.webguild.org/images/google-mobile-iphone-apps.jpg  ... maybe 
you can help me better understand your use case and your system so I can be 
more help.

Another option would be to include the List of non-visible appointments in the 
DateRequestHandler. I could filter out any currently displayed appointments by 
cross-referencing the appointmentsWidgets collection. Perhaps if you purchase a 
commercial license I can add that feature :)

Original comment by Brad.Ryd...@gmail.com on 28 Jun 2010 at 3:44

GoogleCodeExporter commented 9 years ago 
Thank again for your quickly answer. That method to get the appointment at a 
specific day did the trick (didn't know that existed, should look more at the 
API of course)! Now we are almost where we want to be.

Still I can't override the appointments height (the more label worked fine to 
override the CSS). I tried .gwt-cal-MonthView .appointment { 
position:absolute;height:10px; overflow:hidden;text-decoration:none; } and I 
tried just .appointment { position:absolute;height:10px; 
overflow:hidden;text-decoration:none; } but still can't get it to override the 
height of the appointments.

Still I think the programmer should be able to not show the more-label and show 
the text '+n more' as a HTML-title (tooltip) on the image/text or whatever 
showing when no more space. This is not just a problem on a mobile screen. As 
we are planning to use it the calendar is just a little bit of the screen and 
therefor hasn't all the space of the screen and then it gets cluttered 
unfortunately.

Another problem we are facing now is that the appointments is positioned wrong 
when changing the visible month (see my screenshots and sample code). Maybe I'm 
doing it the wrong way, but it seems right... I have a appointment from 3 June 
to 2 July and it looks good when viewing 'June' but when changing it to view 
'July' the appointment is positioned as it would be from 20 July to 24 July... 
I have tried to do a sample code as clean as possible.

Any suggestions?

Best regards
Tobias

Original comment by lovestad...@gmail.com on 29 Jun 2010 at 12:14

Attachments:

GoogleCodeExporter commented 9 years ago 
What is the status on this issue? As mentioned before we want to purshace a 
commercial license, but want this to be solved first...

Best regards

Original comment by lovestad...@gmail.com on 12 Jul 2010 at 2:27

GoogleCodeExporter commented 9 years ago 
@lovestadsif, we are looking at the Appointment positioning in the MonthView 
and will have that fixed in trunk as soon as I can steal some of Carlos' time 
(he is our MonthView layout guru). We are planning a release this month (July).

Our goal is to align as closely as possible to Google Calendar, and if you look 
at their Month Calendar component in WebElements they show the "+ n more" label 
even when the size is 300x300. We therefore do not plan to change this aspect 
of gwt-cal.
See http://www.google.com/webelements/calendar/#
And test with calendar: dev-community-calendar@google.com

That being said, I am willing to update the MonthView to make it make it easier 
to subclass (override methods, etc), and inject your own implementation (using 
GWT.create and deferred binding), so that you have the ability to extend and 
customize to meet your unique requirements. I will have to do some analysis on 
how to make this happen, but have no ETA at this time.

Original comment by Brad.Ryd...@gmail.com on 13 Jul 2010 at 1:40

GoogleCodeExporter commented 9 years ago 
That sounds as a very good idea! I see that Google Calendar have the 
functionality on the '+ n more'-label to get a popup-menu with all the 
appointments not showing (very similar to the one that I (maybe not so good but 
still) implemented). Looks nice and very good that your goal is to align to 
Google Calendar so this function maybe will be included in gwt-cal.
Thanks for your great work by the way!

Original comment by lovestad...@gmail.com on 13 Jul 2010 at 6:21