schedule - day, week, month, today events

UI Components for JSF
eunnini
Posts: 67
Joined: 28 Jun 2011, 00:07

08 Feb 2012, 09:36

Hi people,

Is there any possibility to add events on day, week, month, today buttons. For example, there is a possibility to add events on dateSelect or eventSelect, but we need a possibility to have other events too

Code: Select all

<p:ajax event="dateSelect" listener="#{cc.attrs.calendarForm.onDateSelect}" update="calendar-view"/>  
<p:ajax event="eventSelect" listener="#{cc.attrs.calendarForm.onEventSelect}" update=":mainForm:MainAdminToolbar" disabled="#{!cc.attrs.disaleUpdateContent}"/>  
Somethig like this

Code: Select all

<p:ajax event="todaySelect" listener="#{cc.attrs.calendarForm.onTodaySelect}" update="calendar-view"/>  
Or just, is there any way to recognize that today or month buttons are clicked. We are using lazyModel

Regards
Jsf 2.2.x, Primefaces 5.1, tomcat 7

eunnini
Posts: 67
Joined: 28 Jun 2011, 00:07

09 Feb 2012, 12:56

It has already been accepted as a New Feature

http://code.google.com/p/primefaces/iss ... %20Summary
Jsf 2.2.x, Primefaces 5.1, tomcat 7

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

09 Feb 2012, 15:28

1. You may want to add a NEW FEATURE in issue tracker and add to this forum topic, since Issue 930 currently has 16 people that voted for this, but the issue has not been fixed or added to p:schedule, yet.

2. p:schedule is fullCalendar (jQuery)

3. See the following links and see if you can write xhtml/js to do what you want:

FullCalendar: viewDisplay

stackoverflow fullcalendar jquery function(view)

FullCalendar: views

FullCalendar - Full-sized Calendar jQuery Plugin

FullCalendar documentation

FullCalendar - Sending view via ajax; see related links as well on the right side of this page on stackoverflow.com.

Search stackoverflow and forum.primefaces.org (via google) for jquery ajax (post) requests.
Last edited by smithh032772 on 09 Feb 2012, 17:00, edited 2 times in total.
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

eunnini
Posts: 67
Joined: 28 Jun 2011, 00:07

09 Feb 2012, 16:42

I've just created an issue on issue tracker

Do you have maybe an idea how could I update some component ids after Today, Prev, Next, Month, Week or Day button is clicked
Jsf 2.2.x, Primefaces 5.1, tomcat 7

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

09 Feb 2012, 16:50

Issue # 3488

In the future, please update forum topics with the issue # and URL of the new issue # like I just did for you. My previous response should help. You need to research it. Once you are able to do it via jQuery in your xhtml, then please reply here with the code, and then, we can discuss getting the view change details back to the bean.

EDIT: added one more URL to my previous response above. I hope it helps.
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

eunnini
Posts: 67
Joined: 28 Jun 2011, 00:07

09 Feb 2012, 23:30

Unfortunately, I haven't managed to solve my problem. I hope there would be a possibility to use these ajax events in some future version. For now, I will use it with the limitations, but it is still a very useful component. Anyway, thanks for advice, maybe I'll do more research in future, depending on free time... I hope somebody else will found this topic as useful and found and share the solution
Jsf 2.2.x, Primefaces 5.1, tomcat 7

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

09 Feb 2012, 23:49

1. Create your own buttons or UIComponents to manipulate p:schedule
2. Create several pages to represent each 'view' of p:schedule, and configure p:schedule 'view' via the properties of p:schedule
3. when user clicks your custom buttons to change 'view', then your bean will be informed via ajax, and you can quickly change the view/xhtml via ajax, and update the xhtml/page, accordingly.
4. I use ui:include src="#{bean.page}" a lot in JSF/PrimeFaces web app that I'm developing, and this allows me to change 'xhtml' page/view depending on menuitem click, button click, etc...
5. I am currently using p:schedule as-is, and have no need to inform my bean when p:schedule 'view' changes. Honestly, i like the month view most of all with p:schedule, and don't like the other p:schedule views.

If this functionality was added to p:schedule, then that would be great, and I would probably use it. I know there is jQuery code available, but I'm not really interested in jQuery code right now; i rather do JSF coding, and this is your chance to do some JSF coding (create new xhtml, uicomponents, and bean to support).
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

eunnini
Posts: 67
Joined: 28 Jun 2011, 00:07

10 Feb 2012, 00:12

Thanks a lot! It is a very good solution to make custom pages and custom buttons, depending of need. I will do it for sure. I'm not interested in jQuery code too, but this solution with JSF is applicable and would solve my problems
Jsf 2.2.x, Primefaces 5.1, tomcat 7

smithh032772
Posts: 6144
Joined: 10 Sep 2011, 21:10

10 Feb 2012, 06:39

Please share your implementation/coding, after you're done. :)
Howard

PrimeFaces 6.0, Extensions 6.0.0, Push (Atmosphere 2.4.0)
TomEE+ 1.7.4 (Tomcat 7.0.68), MyFaces Core 2.2.9, JDK8
JUEL 2.2.7 | OmniFaces | EclipseLink-JPA/Derby | Chrome

Java EE 6 Tutorial|NetBeans|Google|Stackoverflow|PrimeFaces|Apache

eunnini
Posts: 67
Joined: 28 Jun 2011, 00:07

10 Feb 2012, 10:33

I've basically done it. Here is the code
1. Above scheduler put your header with all buttons that you need

Code: Select all

	<h:panelGrid columns="3">
		<p:commandLink value="Month" update=":mainForm:schedule:schedule" actionListener="#{calendar.calendarListForm.selectView}" process="@this">
			<f:attribute name="view" value="month"/>
		</p:commandLink>
		<p:commandLink value="Week" update=":mainForm:schedule:schedule" actionListener="#{calendar.calendarListForm.selectView}" process="@this">
			<f:attribute name="view" value="agendaWeek"/>
		</p:commandLink>
		<p:commandLink value="Day" update=":mainForm:schedule:schedule" actionListener="#{calendar.calendarListForm.selectView}" process="@this">
			<f:attribute name="view" value="agendaDay"/>
		</p:commandLink>
		<p:commandLink value="Previous" update=":mainForm:schedule:schedule" actionListener="#{calendar.calendarListForm.nextPrevious}" process="@this">
			<f:attribute name="increment" value="previous"/>
		</p:commandLink>
		<p:commandLink value="Next" update=":mainForm:schedule:schedule" actionListener="#{calendar.calendarListForm.nextPrevious}" process="@this">
			<f:attribute name="increment" value="next"/>
		</p:commandLink>
		<p:commandLink value="Today" update=":mainForm:schedule:schedule" actionListener="#{calendar.calendarListForm.today}" process="@this"/>
	</h:panelGrid>
2. In java bean add these methods and populate initial date (it is the most important thing because lazy model will do all you need for you)

Code: Select all

	public void selectView(ActionEvent event){
		String view = (String) event.getComponent().getAttributes().get("view");
		this.getModel().setView(view);
	}

	public void nextPrevious(ActionEvent event){
		String increment = (String) event.getComponent().getAttributes().get("increment");
		int moveValue = increment.equals("next")?1:-1;
		Calendar cal = DateUtil.createCalendar(this.getModel().getInitialDate());
		if(this.getModel().getView().equals(TxScheduleModel.VIEW_DAY_AGENDA))
			cal.add(Calendar.DAY_OF_MONTH, moveValue);
		else if(this.getModel().getView().equals(TxScheduleModel.VIEW_WEEK_AGENDA))
			cal.add(Calendar.WEEK_OF_MONTH, moveValue);
		else if(this.getModel().getView().equals(TxScheduleModel.VIEW_MONTH))
			cal.add(Calendar.MONTH, moveValue);
		this.getModel().setInitialDate(cal.getTime());
	}

	public void today(ActionEvent event){
		Calendar cal = DateUtil.createCalendar(new Date());
		this.getModel().setInitialDate(cal.getTime());
	}
3. Make schedule with no header at all

Code: Select all

  <p:schedule value="#{cc.attrs.calendarForm.model}" rightHeaderTemplate="none" centerHeaderTemplate="none"
	style="width:1000px;" leftHeaderTemplate="none" editable="true" firstHour="#{cc.attrs.calendarForm.model.firstHour}" initialDate="#{cc.attrs.calendarForm.model.initialDate}"
	locale="#{userSessionBean.lang.langIso}" minTime="#{cc.attrs.calendarForm.model.minTime}" maxTime="#{cc.attrs.calendarForm.model.maxTime}"
	showWeekends="#{cc.attrs.calendarForm.model.showWeekends}" startWeekday="1" view="#{cc.attrs.calendarForm.model.view}" id="schedule">
		<p:ajax event="dateSelect" listener="#{cc.attrs.calendarForm.onDateSelect}" update="calendar-view, :mainForm:MainAdminToolbar"/>  
	        <p:ajax event="eventSelect" listener="#{cc.attrs.calendarForm.onEventSelect}" update=":mainForm:MainAdminToolbar" disabled="#{!cc.attrs.disaleUpdateContent}"/>  
	        <p:ajax event="eventSelect" listener="#{cc.attrs.calendarForm.onEventSelect}" update="@form, :mainForm:MainAdminToolbar" disabled="#{cc.attrs.disaleUpdateContent}" />
  </p:schedule>  					
4. In constructor add lazy model

Code: Select all

	public AbstractCalendar(CalendarSearch search, TxModuleManagedBean bean){
    	super(bean);
    	model = new TxScheduleModel(){
			private static final long serialVersionUID = 7003881993658609275L;

			@Override
    		        public void loadEvents(Date start, Date end) {
    			      doPaging(start, end);
    		       }
    	};
    }
You could save start and end dates from loadEvents method as local variables and read them for displaying title in header - e.g - 24. Mar - 12. Maj 2012

With this code I don't have different xhtml pages for every view, but just one p:schedule, and I have a possibility to update different components after Prev, Next, Today or Day, Week, Month View is fired

Smithh, thanks again!
Jsf 2.2.x, Primefaces 5.1, tomcat 7

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 45 guests