I need to update the version of primefaces roma to use the template calendar

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
jlemus
Posts: 1
Joined: 17 Dec 2019, 18:54

05 Nov 2020, 21:31

How are you

I need to update my version of Rome to be able to use the CALENDAR as shown on the next page

https://www.primefaces.org/roma/calendar.xhtml

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

09 Nov 2020, 10:03

Hi,

Unfortunately, almost all style files were changed. Please review the changes between versions in CHANGELOG.md in zip.
Also, the sample in calander.xhtml has p:schedule component. Maybe, you can try it in your page.
calendar.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">Calendar</ui:define>


    <ui:define name="viewname">
        <li>PAGES</li>
        <li><i class="pi pi-chevron-right"></i></li>
        <li>
            <p:link outcome="/calendar">CALENDAR</p:link>
        </li>
    </ui:define>

    <ui:param name="viewname" value="CALENDAR" />

    <ui:define name="content">
        <h:form>
            <div class="p-grid">
                <div class="p-col-12">
                    <div class="card">
                        <p:growl id="messages" showDetail="true" />
                        
                        <h5>Calendar</h5>
                        <p:schedule id="schedule" value="#{calendarDemoView.eventModel}" widgetVar="myschedule" >
                            <p:ajax event="dateSelect" listener="#{calendarDemoView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                            <p:ajax event="eventSelect" listener="#{calendarDemoView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                            <p:ajax event="eventMove" listener="#{calendarDemoView.onEventMove}" update="messages" />
                            <p:ajax event="eventResize" listener="#{calendarDemoView.onEventResize}" update="messages" />
                        </p:schedule>
    
                        <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="fade" width="350" responsive="true">
                            <p:outputPanel id="eventDetails" styleClass="ui-fluid">
                                <div class="p-field">
                                    <p:outputLabel for="title" value="Title" />
                                    <p:inputText id="title" value="#{calendarDemoView.event.title}" required="true" />
                                </div>
                                <div class="p-field">
                                    <p:outputLabel for="from" value="From" />
                                    <p:datePicker id="from" value="#{calendarDemoView.event.startDate}" pattern="dd/MM/yyyy" showTime="true" appendTo="@(body)"  />
                                </div>
                                <div class="p-field">
                                    <p:outputLabel for="to" value="To" />
                                    <p:datePicker id="to" value="#{calendarDemoView.event.endDate}" pattern="dd/MM/yyyy" showTime="true" appendTo="@(body)" />
                                </div>
                                <div class="p-field-checkbox">
                                    <p:selectBooleanCheckbox id="allDay" value="#{calendarDemoView.event.allDay}" />
                                    <p:outputLabel for="allDay" value="All Day" />
                                </div>
                            </p:outputPanel>
                            <f:facet name="footer">
                                    <p:commandButton id="addButton" value="Save" action="#{calendarDemoView.addEvent}" icon="pi pi-check" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
                                    <p:commandButton type="reset" value="Reset" styleClass="secondary-button" icon="pi pi-refresh" />
                                </f:facet>
                        </p:dialog>   
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>

</ui:composition>
Best Regards,

Post Reply

Return to “Roma - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests