The schedule component provides many options already, but it does not offer the full suite of options supported by the underlying FullCalendar library. This is an advanced option that lets you configure the schedule to your your needs. Use the extender option and provide a custom JavaScript function. That function is called before the schedule is initialized. Within that function, you can use the this keyword to access the current schedule component and modify the this.cfg options passed to FullCalendar. See the FullCalendar documentation for more details and all available options.
<div class="card">
<h:form>
<p:growl id="messages" widgetVar="messagesGrowl" showDetail="true"
globalOnly="true"/>
<p:panel id="settings" header="Extender settings" styleClass="mb-6">
<!-- Additional CSS or JavaScript required by the extender example -->
<h:outputText escape="false"
value="#{not empty scheduleJava8View.extenderExample ? scheduleJava8View.extenderExample.html : ''}">
</h:outputText>
<div class="flex flex-column gap-3">
<p:selectOneMenu id="examples" label="Examples"
style="width: 100%;"
value="#{scheduleJava8View.selectedExtenderExample}">
<f:selectItem noSelectionOption="true"
itemLabel="Select an example..." itemValue=""/>
<f:selectItems value="#{scheduleJava8View.extenderExamples}"/>
<f:selectItem itemLabel="Custom extender code" itemValue="custom"/>
<p:ajax event="change" update="@form" process="@this"
listener="#{scheduleJava8View.onExtenderExampleSelect}"/>
</p:selectOneMenu>
<p:message id="examplesMessage" escape="false" severity="info"
showSummary="true" for="examples"
rendered="#{not empty scheduleJava8View.extenderExample}"/>
<h:outputLink value="#{scheduleJava8View.extenderExample.link}"
target="_blank" rel="nofollow noopener"
rendered="#{not empty scheduleJava8View.extenderExample and not empty scheduleJava8View.extenderExample.link}">
<h:outputText
value="See FullCalendar docs for more details on this option."/>
</h:outputLink>
<p:inputTextarea id="extenderCustomCode" rows="6"
style="width: 100%;" autoResize="true"
value="#{scheduleJava8View.extenderCode}"
rendered="#{scheduleJava8View.selectedExtenderExample eq 'custom'}"/>
<ui:fragment
rendered="#{not empty scheduleJava8View.extenderExample}">
<pre class="line-numbers"><code class="language-javascript">#{scheduleJava8View.extenderCode}</code></pre>
</ui:fragment>
<ui:fragment
rendered="#{not empty scheduleJava8View.extenderExample and not empty scheduleJava8View.extenderExample.html}">
<h:outputText
value="Additional CSS or JavaScript required for this example"/>
<pre class="line-numbers"><code class="language-xml">#{scheduleJava8View.extenderExample.html}</code></pre>
</ui:fragment>
<p:commandButton id="update" styleClass="extender-update align-self-start"
value="Apply extender and update schedule" process="@form"
update="@form:schedulePanel" icon="pi pi-refresh"/>
</div>
</p:panel>
<p:outputPanel id="schedulePanel">
<!-- Load the extender and catch errors -->
<script>
window.ExtenderShowcase = undefined;
</script>
<script>
window.ExtenderShowcase = function () {
try {
#{ scheduleJava8View.extenderCode }
} catch (e) {
console.error("Error while running extender", e);
PF("messagesGrowl").renderMessage({
severity: "error",
summary: "Invalid extender",
detail: "The extender you entered threw an error - you might want to check your browser's dev tools. The error was: " + e.message
});
}
// Callback :: eventRender // more about fullcalendar events: https://fullcalendar.io/docs/event-render-hooks
this.cfg.options.eventDidMount = function(e) {
//Add title as attribute of element
if(e.event.title){
e.el.setAttribute('customProperty', e.event.title);
}
};
};
</script>
<script>
if (typeof window.ExtenderShowcase === "undefined") {
PF("messagesGrowl").renderMessage({
severity: "error",
summary: "Invalid extender",
detail: "The extender you entered seems to be syntactically invalid - you might want to check your browser's dev tools."
});
}
</script>
<!-- Remote command for deleting events, for the 'delete button' example -->
<p:remoteCommand id="deleteEvent" name="deleteEvent"
actionListener="#{scheduleJava8View.onEventDelete}" process="@this"
update="@none" oncomplete="PF('schedule').update()">
</p:remoteCommand>
<!-- The actual schedule component -->
<p:schedule id="schedule" value="#{scheduleJava8View.eventModel}"
widgetVar="schedule" extender="window.ExtenderShowcase"
timeZone="#{scheduleJava8View.serverTimeZone}" clientTimeZone="#{scheduleJava8View.serverTimeZone}"/>
</p:outputPanel>
</h:form>
</div>