Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Calendar - (Completely) Custom Event edition Window

    Hi,

    I am using the Calendar component in order to show data related to Medical Appointments. Each Appointment has a lot of associated data and that is why I have a custom window to handle Appointment addition/edition.

    I want to know how to REPLACE the default EventWindow with my custom Window. I don't want to add/remove fields from default EventWindow, I really want to replace it completely.

    One addition information...Currently, the project is built above gwtext and I am just using the calendar component of smartgwt. The Appointment Edition Window is already coded, that is one more reason to just replace the default EventWindow.

    Could someone tell me how to replace the default EventWindow ? Or at least how to disable it and get the event when the user clicks on a calendar event/slot or in the add button.

    Thank you in advance
    Samuel Pessorrusso

    #2
    Hi Samuel,

    Sorry, there's not really an override available for your use case yet. You could create an issue and see if others need similar APIs and will vote for it.

    Comment


      #3
      Humm...

      I know that it is possible to set all events as not editable, this would "disable" the default editor.

      Isnīt it possible to get the add and the timeslot selection event?

      If it is not possible I believe I will need to go for the change the API source code option and make a special version of smartgwt for myself.

      Comment


        #4
        If you're willing to read source code you can probably figure out how to do this via SmartClient's AutoChild system, possibly without core modifications. However if you make this possible it would be great if you shared your changes with the community.

        Comment


          #5
          Still no changes in this way?

          Comment


            #6
            You can use Calendar.setEventEditorFields to customize the fields in the event dialog. If you don't want the default fields to appear, create field instances corresponding to the default ones (see the javadoc) and call setVisible(false) on them. This will effectively remove existing fields from the event editor.

            Comment


              #7
              I want to use a TabSet in that dialog. Is this possible?

              Comment


                #8
                You could try adding a CanvasItem and call canvasItem.setCanvas(TabSet).

                Sanjiv

                Comment


                  #9
                  Thanks. I will try it.

                  Comment


                    #10
                    Calendar custom Event Window

                    Hi! I have done my own Event Window. I replace function "show" in calendar.eventDialog. First what we need is show Calendar.. Then we get this JavaScriptObject by JSNI method.
                    Where object ActivityWindow you need to create your own class. There are some extra functionality added to default Calendar class
                    Code below:

                    Code:
                    import com.google.gwt.core.client.JavaScriptObject;
                    import com.smartgwt.client.core.Function;
                    import com.smartgwt.client.util.JSOHelper;
                    import com.smartgwt.client.widgets.calendar.Calendar;
                    import com.smartgwt.client.widgets.calendar.CalendarEvent;
                    import com.smartgwt.client.widgets.calendar.events.CalendarEventClick;
                    import com.smartgwt.client.widgets.calendar.events.DayBodyClickEvent;
                    import com.smartgwt.client.widgets.calendar.events.DayBodyClickHandler;
                    import com.smartgwt.client.widgets.calendar.events.EventClickHandler;
                    import java.util.Date;
                    
                    public class Calendars extends Calendar{
                    
                        public Calendars(){
                    
                            setID("myCalendar");
                            initialSettings();
                            addPrivateHandlers();
                            addEvent();
                    
                            setWidth100();
                            setHeight100();
                    
                            draw();
                            addExtraHandler();        
                    
                        }
                    
                        public void addExtraHandler() {
                    
                            JavaScriptObject obs = getMyCalendar();
                    
                            Function fun = new Function() {
                    
                                public void execute() {
                                    
                                    String startT = getStartTimeFromSelected();
                                    String endT = getEndTimeFromSelected();
                    
                                    Date stDate = null;
                                    Date enDate = null;
                                    try{
                                        stDate = new Date(new Long(startT));
                                        enDate = new Date(new Long(endT));
                                    }catch(Exception e)
                                    {
                                        e.printStackTrace();
                                    }
                    
                                    ActivityWindow aw = new ActivityWindow(Calendars.this, null);
                                    aw.setStartDate(stDate);
                                    aw.setEndDate(enDate);
                    
                                }
                            };
                    
                            JSOHelper.setAttribute(obs, "show", fun);
                        }
                    
                        private void initialSettings(){
                    
                            setEventSnapGap(15);
                            setShowAddEventButton(false);
                            setCanCreateEvents(true);
                            setCanEditEvents(true);
                            setCanDeleteEvents(true);
                            setShowQuickEventDialog(false);
                            setShowShadow(true);
                            setShowDragShadow(true);
                            setShowResizeBar(true);
                            setWeekEventBorderOverlap(true);
                            setDisableWeekends(false);
                            setFirstDayOfWeek(1);
                            
                        }
                    
                        private void addPrivateHandlers(){
                    
                            addEventClickHandler(new EventClickHandler() {
                    
                                public void onEventClick(CalendarEventClick event) {
                                    event.cancel();
                                    CalendarEvent eventC = event.getEvent();
                                    ActivityWindow aw = new ActivityWindow(Calendars.this, eventC.getEventId());
                                }
                            });
                    
                            addDayBodyClickHandler(new DayBodyClickHandler() {
                    
                                public void onDayBodyClick(DayBodyClickEvent event) {                
                                    event.cancel();
                                }
                            });
                        }
                    
                        private void addEvent(){
                    
                            long end = new Date().getTime();
                            end = end + (1000*60*60*5);
                            CalendarEvent ce = new CalendarEvent(55, "Test", "Descr", new Date(), new Date(end));
                            ce.setCanEdit(true);
                            setData(new CalendarEvent[]{ce});
                        };
                    
                        public void addEventCalendar(CalendarEvent eventToAdd){
                    
                            if (eventToAdd==null)
                                return;
                    
                            CalendarEvent[] actualEventsData = getData();
                    
                            if (actualEventsData==null)
                                actualEventsData = new CalendarEvent[0];
                    
                            CalendarEvent[] newEventsData = new CalendarEvent[actualEventsData.length + 1];
                    
                            int count = 0;
                            for (CalendarEvent e : actualEventsData)
                            {
                                newEventsData[count] = e;
                                count++;
                            }
                    
                            newEventsData[count] = eventToAdd;
                            setData(newEventsData);        
                        }
                    
                        public int getEventsSize(){
                            CalendarEvent[] actualEventsData = getData();
                    
                            if (actualEventsData==null)
                                actualEventsData = new CalendarEvent[0];
                    
                            return actualEventsData.length;
                        }
                    
                        public native String getStartTimeFromSelected() /*-{
                            cal = $wnd.myCalendar;
                            var dates = cal.eventDialog.currentStart;
                            var timeInLong = "" + dates.getTime();
                            return timeInLong;
                        }-*/;
                    
                        public native String getEndTimeFromSelected() /*-{
                    
                            cal = $wnd.myCalendar;
                            var dates = cal.eventDialog.currentEnd;
                            var timeInLong = "" + dates.getTime();
                            return timeInLong;
                        }-*/;
                    
                        public native void unselectCalendar() /*-{
                            ev = $wnd.myCalendar;
                            ev.weekView.clearSelection();
                    
                        }-*/;
                    
                        public native JavaScriptObject getMyCalendar() /*-{
                            ev = $wnd.myCalendar.eventDialog;
                            return ev;
                        }-*/;
                    
                    }

                    Comment


                      #11
                      CalendarEventAdd code

                      Hi !

                      I used nazir80 code to make a new event which is fired when the user tries to add a new event (with the button, by dragging on the calendar or by clicking in month view).
                      You can use it to customize event dialog window and event editor window.

                      You will find attached four classes :
                      ExtendedCalendar : the new calendar with the addEventAddHandler
                      - in package events :
                      CalendarEventAdd : the event which is fired
                      EventAddHandler
                      HasEventAddHandlers

                      To customize your windows :
                      Code:
                      calendar.addEventAddHandler( new EventAddHandler()
                      {
                          public void onEventAdd( CalendarEventAdd event )
                          {
                      	Window myWindow = new Window();
                              myWindow.show();
                      
                              event.cancel(); // this will prevent the default windows to show 
                          }
                      }
                      Use the addEventClickHandler to handle editing events.

                      I hope that will help.
                      Feel free to comment.

                      Laure
                      And sorry for my english...
                      Attached Files

                      Comment


                        #12
                        Thanks for posting this Laure. I'm sure others will find it useful.

                        Comment


                          #13
                          Thank you for the code. I needed that functionality too.

                          Comment


                            #14
                            I've found a problem with this implementation. I have this:

                            Code:
                            ExtendedCalendar cal = new ExtendedCalendar();
                            
                            cal.addEventClickHandler(new EventClickHandler() {
                            				
                            	public void onEventClick(CalendarEventClick event) {
                            		Window.alert("Editing record");
                            		editor.show(event.getEvent());
                            		event.cancel();
                            	}
                            });
                            						
                            cal.addEventAddHandler(new EventAddHandler() {
                            				
                            	public void onEventAdd(CalendarEventAdd event) {
                            		Window.alert("Creating record");
                                            editor.show(event.getStartTime(),event.getEndTime());
                            		event.cancel();				
                                    }
                            });
                            editor.show shows my custom editor in a popup initialized with either, a record or a new record with the selected dates. When I load the calendar I get the expected behavior. If I click on an event, I get the CalendarEventClick event, and when I click on an empty area, I get the CalendarEventAdd event.
                            The strange thing is when I try to add an event but I cancel the dialog. From this time on, every time that I click on the calendar even when I click on an event, I get the EventAddHandler (for this reason I have the Window.alert line, I see the event that gets fired). This is failing until I enter a new event and accept the dialog, instead of closing the window, so it appears that the CalendarEventAdd event is blocking the other events until an event is really added to the calendar.

                            Comment


                              #15
                              Clear selection

                              Hi

                              Sorry for the delay getaceres.

                              Your issue comes from the fact that you didn't call clearCalendarSelection() after cancelling the event. I should have explain it.
                              So it should be :
                              Code:
                              cal.addEventAddHandler(new EventAddHandler() {
                              				
                              	public void onEventAdd(CalendarEventAdd event) {
                              		Window.alert("Creating record");
                                              editor.show(event.getStartTime(),event.getEndTime());
                              		event.cancel();
                              		cal.clearCalendarSelection();
                                      }
                              });
                              I added it to be automatically called when you cancel the event in the attached file.
                              I also added some features about dates.

                              Hope it will help.
                              Laure
                              Attached Files

                              Comment

                              Working...
                              X