title: Loading PrimeFaces Schedule JSF page through ajax into another JSF page
body: <p>When I run the prime faces "Scheduler" component as a normal "xhtml" page, everything is going fine, but when I try to load the "schedule.xhtml" page through AJAX into another "xhtml" page, then I am getting unexpected behavior like :</p>
  
  <ol>
  <li>The "schedule.xhtml" page is not loading the default events attached with its Java class (those events are sample ones).</li>
  <li>No events are fired like ("addEvent", "onEventSelect", "onDateSelect", "onEventMove", "onEventResize")</li>
  </ol>
  
  <p>I am running JSF 2.2 Mojarra 2.2.0
  Prime Faces 5.0</p>
  
  <p>Below is my main xhtml page</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;html 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"&gt; 
  
  &lt;h:head&gt;
  &lt;h:outputStylesheet library="css" name="default.css"  /&gt;
  &lt;/h:head&gt; 
      &lt;body&gt; 
  
  &lt;p:layout fullPage="true" &gt;
      &lt;p:layoutUnit position="north" size="185"  resizable="false" closable="false" collapsible="false" &gt;     
          &lt;div align="center" id="header"&gt;
           &lt;h:graphicImage url="images/layout/banner.png" &gt;&lt;/h:graphicImage&gt;
          &lt;/div&gt;
      &lt;/p:layoutUnit&gt;
  
      &lt;p:layoutUnit position="west" size="210" header="Booking System" resizable="true" closable="false" collapsible="true" &gt;
          &lt;h:form&gt;                
              &lt;p:growl autoUpdate="false"/&gt;
              &lt;p:growl id="growl" life="2000" /&gt;
  
              &lt;p:panelMenu  style="width:200px" &gt;
                  &lt;p:separator /&gt;
                  &lt;p:submenu label="Navigations" ajax="false" &gt;
  
                       &lt;p:menuitem ajax="false" value="Book Meeting"  action="#{menuView.setMyPage}"  icon="ui-icon-calendar"  update=":formCenter:content"&gt;
                          &lt;f:param name="page" value="scheduler" /&gt;
                       &lt;/p:menuitem&gt;                                      
                   &lt;/p:submenu&gt;
              &lt;/p:panelMenu&gt;                                  
          &lt;/h:form&gt;       
      &lt;/p:layoutUnit&gt;
  
      &lt;p:layoutUnit position="center" &gt;   
          &lt;h:form id="formCenter"  &gt;
  
          &lt;p:outputPanel autoUpdate="false"&gt;
              &lt;h:panelGroup id="content" layout="block"  &gt; 
                   &lt;ui:include  src="#{menuView.page}.xhtml" /&gt;
              &lt;/h:panelGroup&gt;
          &lt;/p:outputPanel&gt;                   
           &lt;/h:form&gt; 
      &lt;/p:layoutUnit&gt;  
  &lt;/p:layout&gt;
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>The scheduler xhtml page as below :</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;html 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"&gt; 
  
  &lt;h:head&gt;
  
  &lt;style type="text/css"&gt;
      .value {
          width: 1000px;
      }
  &lt;/style&gt;
  
  &lt;/h:head&gt; 
  &lt;body&gt; 
  
  &lt;h:form&gt;
      &lt;p:growl id="messages" showDetail="true" /&gt;
  
      &lt;h:panelGrid columnClasses="value"&gt;
          &lt;h3 style="margin-top: 0"&gt;Editable Schedule&lt;/h3&gt;
          &lt;p:schedule id="schedule" value="#{scheduleView.eventModel}" widgetVar="myschedule" timeZone="GMT+2"&gt;
  
              &lt;p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" /&gt;
              &lt;p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" /&gt;
              &lt;p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" /&gt;
              &lt;p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" /&gt;
  
          &lt;/p:schedule&gt;
  
          &lt;h3&gt;Locale Support ( Example: Turkish )&lt;/h3&gt;
          &lt;p:schedule id="scheduleLocale" value="#{scheduleView.eventModel}" locale="tr" /&gt;
  
          &lt;h3&gt;Lazy Schedule&lt;/h3&gt;
          &lt;p:schedule value="#{scheduleView.lazyEventModel}" /&gt;
      &lt;/h:panelGrid&gt;
  
      &lt;p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip"&gt;
          &lt;h:panelGrid id="eventDetails" columns="2"&gt;
              &lt;h:outputLabel for="title" value="Title:" /&gt;
              &lt;p:inputText id="title" value="#{scheduleView.event.title}" required="true" /&gt;
  
              &lt;h:outputLabel for="from" value="From:" /&gt;
              &lt;p:inputMask id="from" value="#{scheduleView.event.startDate}" mask="99/99/9999"&gt;
                  &lt;f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/&gt;
              &lt;/p:inputMask&gt;
  
              &lt;h:outputLabel for="to" value="To:" /&gt;
              &lt;p:inputMask id="to" value="#{scheduleView.event.endDate}" mask="99/99/9999"&gt;
                  &lt;f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/&gt;
              &lt;/p:inputMask&gt;
  
              &lt;h:outputLabel for="allDay" value="All Day:" /&gt;
              &lt;h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" /&gt;
  
              &lt;p:commandButton type="reset" value="Reset" /&gt;
              &lt;p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" /&gt;
          &lt;/h:panelGrid&gt;
      &lt;/p:dialog&gt;    
  &lt;/h:form&gt;
  
  &lt;script type="text/javascript"&gt;
      PrimeFaces.locales['tr'] = {
          closeText: 'kapat',
          prevText: 'geri',
          nextText: 'ileri',
          currentText: 'bugün',
          monthNames: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran',
              'Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
          monthNamesShort: ['Oca','Şub','Mar','Nis','May','Haz',
              'Tem','Ağu','Eyl','Eki','Kas','Ara'],
          dayNames: ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'],
          dayNamesShort: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
          dayNamesMin: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
          weekHeader: 'Hf',
          firstDay: 1,
          isRTL: false,
          showMonthAfterYear: false,
          yearSuffix: '',
          month: 'Ay',
          week: 'Hafta',
          day: 'Gün',
          allDayText : 'Tüm Gün'
      };
  &lt;/script&gt;
  
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestions ?
  Thank you.</p>