I'm using the PrimeFaces p:schedule
component in my JSF application with a custom JavaScript extender that adds additional content to each event using the eventContent
property in FullCalendar. However, I’m facing a two-part issue with keeping this extender logic applied after updates.
Problem Breakdown:
<h:panelGroup id="scriptPanel">
<script type="text/javascript">
#{appointmentsController.generateJsCustomization()}
</script>
</h:panelGroup>
public String generateJsCustomization() {
ScheduleConfig config = new ScheduleConfig(
"", // dayCellContent
"", // slotLaneContentDay
"", // slotLaneContentWeek
scheduleConfig.getBusinessHours() // businessHours
);
this.jsExtenderCode = JavaScriptGenerator.generateCustomizeSchedule(config,
appointments.stream()
.flatMap(appointment -> appointment.getPatientAppointments().stream())
.collect(Collectors.toList())
);
return this.jsExtenderCode;
}
The JavaScript extender function (jsExtenderCode
) is generated correctly, but when I update the schedule, the generated JavaScript isn’t re-rendered on the page. It seems the scriptPanel
doesn’t re-render with each update.
PF('myScheduleWidgetVar').update()
to refresh the schedule, it fetches event data efficiently without a full re-render, meaning that my custom extender logic for modifying eventContent
does not reapply automatically after each update.Documentation Insight According to the PrimeFaces documentation:
“Schedule provides a simple client-side API and the update method. Whenever you call update, schedule will query its server-side ScheduleModel instance to check for updates... this approach is much more effective than updating with regular PPR.”
Given that update()
doesn’t trigger a full re-render, my extender logic needs to be reapplied after every update.
Question
How can I:
generateJsCustomization()
is re-rendered on the page after each update?p:schedule
component to add custom eventContent
after calling update()
?Any suggestions on how to handle both parts of this issue effectively would be greatly appreciated!
After extensive testing, I’ve concluded that there is no need to reapply the extender logic or trigger any AJAX update to customize <p:schedule> after updates or date changes. Instead, the best and smoothest way is to directly access the underlying FullCalendar instance using the PrimeFaces widget and apply desired changes via its API.
Final Solution:
let calendar = PF('scheduleWidgetVar').getCalendar();
if (calendar) {
// Update visual or behavioral options
calendar.setOption('dayHeaderFormat', { weekday: 'short' });
// Navigate to a specific date
calendar.gotoDate('2025-05-10');
// You can also use calendar.changeView('timeGridDay') etc.
}
Why this works better:
Use the FullCalendar API via PF('schedule').getCalendar() to apply runtime changes. It’s cleaner, faster, and avoids all the extender-related headaches.