Introducing RockCalendar: A Powerful and Flexible Calendar Module for ProcessWire

[bernhard]

Hey ProcessWire community!

I'm excited to introduce RockCalendar, a new calendar module that brings powerful event management capabilities to your ProcessWire sites. 

Key features include:

• Full calendar view in the ProcessWire admin
• Easy event creation and management
• Drag-and-drop event scheduling
• Recurring events (SSE powered, needs RockGrid)
• Seamless integration with ProcessWire pages and fields

I've created a detailed video walkthrough showcasing RockCalendar's features and installation process:

Check it out and let me know what you think! I'm here to answer any questions you might have about RockCalendar.

Download & Docs: https://www.baumrock.com/en/processwire/modules/rockcalendar/

Happy coding!

[panx]

Nice module, thanks. Do you provide a easy frontend view (readonly) option? Any example?

[bernhard]

Hey @panx thank you for your question!

I have added docs with an example implementation here: https://www.baumrock.com/en/processwire/modules/rockcalendar/docs/frontend/

[Stefanowitsch]

Hi @bernhard, I showed this module to a client and we want to integrate your module in an existing project.

I am talking about this site here which holds roundabout 85 "recurring event" pages:

https://www.kibis-itzehoe.de/

The site structure looks like this (just a snippet)

As far as I understand the integration of the RockCalendar module from your youtube video, my question is: What is the best practice to integrate already existing pages into the calendar without re-creating or moving them?

Right now every "event page" is actually called a "group page" (because it is a group that meets on a specific recurring date).

I understand that i have to re-adjust the recurring event details when integrating it into the RockCalendar view again. What I like to avoid is to create each of the 85 group pages as a new "event page" from the RockCalendar view in the first place. 

 

[bernhard]

Hi @Stefanowitsch thx for your interesting question 🙂 

I think you have two options:

1. Create a central event calendar and manage events from there
2. Add the calendar field to the "group" template and then manage events as children of that group, eg "AA 12 Schritte" would show a calendar and there you create "January Meetup", "February Meetup" etc.

I think the module should work for you already as it is. It has two hookable methods for modifying the events that the calendar shows on each admin page and the data that is used for each single event:

Maybe we need to add another hook for the endpoint that creates recurring events, as this is at the moment hardcoded to use the current page as parent of new events, but that should not be a big deal.

I think you could also combine both options: Have a calendar for every group where you manage the group's events. And have one central calendar that shows all events combined. Maybe that would be the easiest way to go, because on the combined calendar you'd have to code something that tells the calendar which group the created recurring events belong to. If you have a calendar directly on the group page then this is not necessary.

But I'm happy to help you with anything you need and I'm sure we'll make it work 🙂 

BTW: You have a design issue on your page at a special resolution:

[Craig]

Thanks for making this module! I've installed it on a development site along with RockGrid (for recurring events), but the RockGrid assets aren't loading. The styles and scripts are outputting paths instead of the URLs:

	<link type='text/css' href='C:\Users\Craig\Documents\Projects\Code\<site>\public_html\site\modules\RockGrid/lib/tabulator.min.css?v=3.0.241' rel='stylesheet' />
	<link type='text/css' href='C:\Users\Craig\Documents\Projects\Code\<site>\public_html\site\modules\RockGrid/RockGrid.min.css?v=3.0.241' rel='stylesheet' />


	<script type='text/javascript' src='C:\Users\Craig\Documents\Projects\Code\<site>\public_html\site\modules\RockGrid/lib/math.min.js?v=3.0.241'></script>
	<script type='text/javascript' src='C:\Users\Craig\Documents\Projects\Code\<site>\public_html\site\modules\RockGrid/lib/tabulator.min.js?v=3.0.241'></script>
	<script type='text/javascript' src='C:\Users\Craig\Documents\Projects\Code\<site>\public_html\site\modules\RockGrid/RockGrid.js?v=3.0.241'></script>
	<script type='text/javascript' src='C:\Users\Craig\Documents\Projects\Code\<site>\public_html\site\modules\RockGrid/scripts/buttons.js?v=3.0.241'></script>
	<script type='text/javascript' src='C:\Users\Craig\Documents\Projects\Code\<site>\public_html\site\modules\RockGrid/scripts/extensions.js?v=3.0.241'></script>

I imagine this is due to the way the rockgrid->url() function works and because it's running on Windows but not 100% sure. Would you consider changing this? The RockCalendar assets load fine 🙂 

[bernhard]

Hey @Craig thank you for your purchase! 🤗

Please download RockGrid v1.0.2 and let me know if that fixes the issue! https://www.baumrock.com/en/releases/rockgrid/

[Craig]

4 hours ago, bernhard said:

Hey @Craig thank you for your purchase! 🤗

Please download RockGrid v1.0.2 and let me know if that fixes the issue! https://www.baumrock.com/en/releases/rockgrid/

That worked, thank you so much! 🙌 🙂

[bernhard]

@Stefanowitsch is already implementing the module in the mentioned Project:

Now the question arose how one could add an event schedule like "Every last Friday of the Month"

With the current settings this was not possible:

Version 1.1.0 adds some more options to the dropdown 😎 https://www.baumrock.com/releases/rockcalendar/

 

 

[bernhard]

Just pushed v1.1.1 which fixes an interesting bug that @Stefanowitsch sent me via video that showed up when multiple checkboxes have been checked (eg on weekdays mo+tu+we...). Interestingly it only happened when MO was selected together with other days.

The reason was that my reactive GUI unintentionally updated the "value" attribute of the first checkbox whenever other checkboxes have been checked. So the value of the first checkbox was not "mo" but "mo,tu" or "mo,tu,we" etc. 😄 That's now fixed and the value of the "mo" checkbox stays "mo" whatever other checkboxes are selected or not 😎

[bernhard]

Hey @Stefanowitsch another update 😍

RockCalendar v1.2.0 is now translated to German (and Finnish, if AI did a good job 😄 )

https://www.baumrock.com/en/processwire/modules/rockcalendar/docs/translations/

If you find anything that is not translated yet please let me know!

[Stefanowitsch]

hi @bernhard

I need a hint how to sort the events based on the "start time" in the rockcalendar_date field.

I am collecting multiple events from multiple pages and put them all into one page array. Since the events are already sorted by date in the backend this works fine. But i need to sort those collected events by the time they start to print them out in order in the frontend.

Right now it looks like this:

As you can see the start time is not ascending but random.

I need to sort the events like this. This selector is not working, but see it as an example how I thought it could work 🙂

$events = $pages->find("parent=$groups, rockcalendar_date.inRange='".$startDate." - ".$endDate."', sort=rockcalendar_date.start");

Edit: Sorting does work when using the "rockcalendar_date" field as query parameter.

$pages->find("template=event, rockcalendar_date.inRange='".$startDate." - ".$endDate."', sort=rockcalendar_date");

 

[bernhard]

v1.4.1 is now fully translatable 😎 Every aspect of the module! You can translate day names, month names, set start day of the week, set labels of all buttons, etc.!

Docs are also updated: https://www.baumrock.com/en/processwire/modules/rockcalendar/docs/translations/

[Stefanowitsch]

I just finished integrating this module on a client website (it's not live yet!) .

The client has roundabout 85 groups. Each group meets on a specific date - recurring! So I added a RockCalendar field for each group and created the recurring events for each group depending on their meeting times.

 

The group meeting times vary massively and you can think about every possible combination for example:

"every second and last tuesday in every second month" and so on...

This was no problem with this module! After that you can easily view and modify the events for the specific group:

 

After creating recurring events for all of the 85 groups we now have about 5000+ event pages in the backend. This is huge! As expected from ProcessWire I did not notice any downgrades in the performance. 

The last thing I did - with the help of @bernhard- was to set up an "overview calendar" in the backend to get a quick look at all occurring events (for all groups):

 

If you know how to do it this is an easy thing. You can hook into the "getEvents" method of the RockCalendar module and return custom - or modified - event data.

In my case the overview calendar field is placed on the "group overview" template. This template has no direct event page children, so the overview calendar did not display anything.

I used this hook to collect all event pages within the range of a month and return those events as an PageArray to the module as event data (this hook needs to be placed into the init.php!)

wire()->addHookAfter('RockCalendar::getEvents', function ($event) {

    $pageId = $event->arguments(0);

    $startDate = $event->arguments(1);
    $endDate = $event->arguments(2);

    $template = wire('pages')->get($pageId)->template->name;

    if ($template === 'gruppe-overview') {
        $events = wire('pages')->find("template=event, rockcalendar_date.inRange='".$startDate." - ".$endDate."'");
        $event->return = $events;
    }

});

There you go!

[bernhard]

Very nice! Great to see it in action and great to know that it performs well 😍 Thanks for sharing!

[Stefanowitsch]

@bernhard another quick question:

Is it possible to change the color (the tiny little dot) or even better, the text or background color of a type of event?

Each parent page of an event has a specific category. Every category has a primary color and I want to reflect this in the event overview calendar.

[bernhard]

Hey @Stefanowitsch thank you for your question.

That's easy! 🙂 

I've updated the docs about hooks for you: https://www.baumrock.com/en/processwire/modules/rockcalendar/docs/hooks/

[FireWire]

@bernhard Outstanding module and perfect timing for a project!

Found an odd bug that only occurs if the calendar field is added to a fieldset tab:

If I resize the browser window it loads fine.

[bernhard]

On 11/10/2024 at 6:34 PM, FireWire said:

@bernhard Outstanding module and perfect timing for a project!

Thx, looking forward to seeing what you build with it 🙂 

On 11/10/2024 at 6:34 PM, FireWire said:

Found an odd bug that only occurs if the calendar field is added to a fieldset tab:

If I resize the browser window it loads fine.

Thx for the good description!

Please check v1.4.2!

[FireWire]

@bernhard outstanding! Many thanks!