I am working with Primefaces 6.2 Schedule component for a few days now and I can't find an answer to solve my issues using the component. I need some technical advice on this matter.
I've created a view with the Schedule component inside a composition like so:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:form id="content-form">
<p:outputPanel id="page-title-myevents">
<h3>#{translations['pvm_myevents']}</h3>
</p:outputPanel>
<h5>#{translations['misc_myscheduler']}</h5>
<p:schedule id="myScheduler" value="#{myEventsBean.eventModel}" widgetVar="myscheduler" timeZone="#{appSettingsBean.uiTimeZone}">
<p:ajax event="dateSelect" listener="#{myEventsBean.onDateSelect}" update="myEventDetails" oncomplete="PF('myEventDialog').show();" />
<p:ajax event="eventSelect" listener="#{myEventsBean.onEventSelect}" update="myEventDetails" oncomplete="PF('myEventDialog').show();" />
<p:ajax event="eventMove" listener="#{myEventsBean.onEventMove}" update="myEventMessages" />
<p:ajax event="eventResize" listener="#{myEventsBean.onEventResize}" update="myEventMessages" />
</p:schedule>
<p:dialog widgetVar="myEventDialog" header="Event details" modal="true">
<h:panelGrid id="myEventDetails" columns="2">
<p:outputLabel for="myEventTitle" value="#{translations['fld_eventtitle']}" />
<p:inputText id="myEventTitle" value="#{myEventsBean.event.title}" required="true" />
<p:outputLabel for="myEventFrom" value="#{translations['fld_from']}" />
<p:calendar id="myEventFrom" value="#{myEventsBean.dateFrom}" timeZone="#{appSettingsBean.uiTimeZone}" pattern="#{appSettingsBean.uiDateTimePattern}" />
<p:outputLabel for="myEventTo" value="#{translations['fld_to']}" />
<p:calendar id="myEventTo" value="#{myEventsBean.dateTo}" timeZone="#{appSettingsBean.uiTimeZone}" pattern="#{appSettingsBean.uiDateTimePattern}" />
<p:outputLabel for="myEventAllDay" value="#{translations['fld_allday']}" />
<h:selectBooleanCheckbox id="myEventAllDay" value="#{myEventsBean.event.allDay}" />
<p:commandButton id="myEventResetForm" type="reset" value="#{translations['btn_reset']}" />
<p:commandButton id="myEventUpdate" value="Save" action="#{myEventsBean.addEvent}" oncomplete="PF('myscheduler').update();PF('myEventDialog').hide();" />
</h:panelGrid>
</p:dialog>
<p:messages id="myEventMessages" showDetail="true" closable="true">
<p:autoUpdate />
</p:messages>
<hr></hr>
</h:form>
</ui:composition>
I have various compositions and they all get loaded inside my dashboard.xhtml like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:include src="/themes/theme.xhtml"/>
<h:body>
<ui:insert name="header" >
<ui:include src="/main-dashboard/my-topnav.xhtml"/>
</ui:insert>
<ui:insert name="content" >
<ui:include src="/main-dashboard/my-sidenav.xhtml"/>
<p:outputPanel id="dashboard-container">
<ui:include src="/main-dashboard/my-sidenavtoggler.xhtml"/>
<p:outputPanel id="content-window">
<p:outputPanel id="content-panel">
<ui:include src="#{contentLoaderBean.mainContent}" />
</p:outputPanel>
</p:outputPanel>
</p:outputPanel>
</ui:insert>
</h:body>
</html>
This is my first composition that's actually built (others are still empty). I load a simple ScheduleModel to it on @PostConstruct inside a @ViewScoped bean.
Since I'don't have any events in my database yet, I set the model like so: setEventModel(new DefaultScheduleModel());
FIRST ISSUE: If I put some random generated events inside a model, sometimes they get displayed in the view, sometimes they don't. I don't understand why this happens at all. I don't get any errors in Java or Javascript console, it's just random. Lazy model works the same.
SECOND ISSUE: Empty or full Schedule model, doesn't matter. When the page loads I usually get a Javascript warning saying:
jquery.js.xhtml?ln=primefaces&v=6.2:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/
THIRD ISSUE: You may have noticed I also have a dialog inside the content form. This dialog fires on date select event and when I try and select a date from the datepicker component it throws an interesting Javascript error (uncaught type error) like so:
It's interesting because if I try to do the same thing on Firefox it throws a different error like so:
Microsoft Edge doesn't throw errors at all.
NOTICE: Datepicker could be an issue as well since it doesn't pop up when schedule loads and shows a model with randomly generated data. If scheduler fails to load the model, datepicker will pop-up and throw the uncaught type error when any date is selected.
It doesn't matter which date I select, errors are thrown. Since Ajax requests don't fire correctly, bean methods don't fire at all, so I think it has to be something on the view side that needs to be fixed properly.
I've tried and disabled all custom css and js imports (am using Bootstrap 4.2.1 css and js for design purposes) and manually cleaned deployment directories. I also made sure my project is loaded without old resources by clearing browser history and cache. I had no luck fixing these issues so far (all warnings and errors remain the same).
I don't know if all three issues are related or not but I've put them in the same post. Sometimes solving one issue, solves others as well. Since they all happen in the same composition this just might be the case again.
Let me know if I can provide more detail in any way and I'll do what I can.
Thank you.
EDIT: Based on a received comment from @Melloware. Upgrading Primefaces 6.2 to Primefaces 7-RC2 solved some issues for me. Deprecation warnings and uncaught type errors are gone now. First issue still remains. Schedule component doesn't show schedule objects or "events". During debug mode, I've found out that schedule objects are created and are pushed to the schedule model. All I need now, is the view component to show them.
