backpack/calendar-operation - Performance Improvement in Month View Rendering

[tomsb]

I have approximately 150 events in the month view. Previously, it took about 3-4 seconds to render them.

With these changes, the render time has been reduced to around 1 second, representing a 3-4x performance improvement. This difference is highly noticeable.

File: calendar_view.blade.php (From line 218)

event?.remove();
- calendar.addEvent(eventData);
- applySearch();
// ....
+ .then(data => {
+     if (searchInput.value === ''){
+          calendar.addEventSource(events);
+      }
+      else{
+          applySearch();
+      }
+  })

Calendar events are now added in one batch
Search is only executed if there is something to search for, whereas previously it was called unnecessarily every time.

What do you think?

[backpack-ai-bot[bot]]

🚨 Bot is not sure about this answer. Please verify. 🚨

I apologize, but I don't have enough information in the provided knowledge sources to directly answer your question about performance improvements in the calendar-operation package for Backpack. The knowledge sources don't contain specific details about the changes you've described or their impact on performance.

However, I can provide some general context about the Calendar Operation package based on the available information:

The Calendar Operation is a premium add-on for Backpack that allows administrators to view and manage model entries on a calendar interface. It's designed to integrate seamlessly with existing Backpack CRUDs, adding calendar functionality without significant code changes Products > Calendar Operation.

Regarding performance improvements, while your specific changes are not documented in the provided sources, Backpack developers are generally receptive to performance enhancements. For instance, there have been discussions about optimizing other Backpack operations for speed with large datasets Github Issue: Slow response/render time when showing many items.

If you've made improvements that significantly enhance the performance of the Calendar Operation, it would be valuable to share your findings with the Backpack community. As this is a closed-source package, the appropriate channel for such feedback would be the community forum. According to the contributing guidelines:

Products > Calendar-operation > Calendar Operation > Contributing:
"This is a closed-source package. For bug reports, feature requests and improvement proposals, please open a discussion in our community forum."

Sharing your improvements there could potentially benefit other users and might be considered for inclusion in future updates of the package.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Calendar Operation|Changelog
Calendar Operation|Changelog
Github Issue (closed): Slow response/render time when showing many items
[4.0][Improvement][Needs feedback] Optimize reorder for speed (use DB instead of Eloquent)
Calendar Operation|Calendar Operation
Calendar Operation|Calendar Operation
Github Issue (closed): [4.0][Improvement Proposal] select2_with_ajax delay 500ms before doing the AJAX query

[karandatwani92]

Hey @tomsb

Thanks for the excellent suggestion.👍
@pxpm What do you think on this?

[pxpm]

Thanks @tomsb I think it's a great addition, thanks for the suggestion 👍 I've just released a new calendar version with that improvement. Please allow a few moments for our private repository to pick the changes and you can get the updated version with a composer update.

Cheers 🙏

[tomsb]

This optimization has introduced a small bug.

Steps to Reproduce

1. Ensure the calendar view is "larger than the screen" so that you need to scroll the browser scrollbar down to see the bottom of the calendar.
2. Open another browser tab.
3. Return to the calendar tab.

Observed Behavior

The browser scrollbar is scrolled back to the top.

Expected Behavior

The scrollbar should stay in its previous position and not scroll to the top.

Root Cause

This happens because a visibilitychange event is triggered in the background when switching tabs. This event reloads the calendar data and causes the calendar to redraw, which results in the scrollbar resetting to the top.

Attempts to Fix

I have tried several approaches, but none have fully resolved the issue. I did find one solution that works, but it is not elegant:

                // ...
		event?.remove();
+		if (isTriggeredByPageVisibilityChange) {
+			calendar.addEvent(eventData);
+			if (searchInput.value && searchInput.value !== '') {
+				applySearch();
+			}
+		}
	});

+	if (!isTriggeredByPageVisibilityChange) {
		calendar.addEventSource(events);
		if (searchInput.value && searchInput.value !== '') {
			applySearch();
		}
+	}

+	isTriggeredByPageVisibilityChange = false;
});

// ...

+ let isTriggeredByPageVisibilityChange = false;
  function pageVisibilitychange() {
    if (document.visibilityState === 'visible') {
        hideMenus();
+       isTriggeredByPageVisibilityChange = true;
        datesSet();
    }
  }