Change Default Category Based On Conditions

Development

AI-generated summary

The discussion is about tweaking the Pavilion Event plugin’s calendar page on Discourse using CSS, HTML, and Theme Components. martyn_thomas aims to set the default category in the composer to ‘Event Planning’ when creating a topic from the calendar page, while keeping ‘General’ as the default category elsewhere.

martyn_thomas has already filtered the category drop-down to only include relevant categories and added custom scripts to modify the ‘Add Topic’ button text to ‘Add Event’ on the calendar page. They are now seeking help to set the default category conditionally, ideally without hardcoding the category names, and instead use the “Allow events to be added to topics in this category” setting from the Event’s plugin.

1

We have the Pavilion Event plugin which creates a /Calendar page.

I’m looking to tweak the calendar page using CSS/HTML/Theme Components to make it as user-friendly as possible.

Because we only have a few categories that we allow Events to be created in, i have successfully filtered the category drop-down in the composer to only include the relevant categories.

The part i’m struggling on is setting the default category in the composer using CSS/HTML (so i can use conditions to trigger it on the correct pages - like the calendar page).

The aim is everywhere else on the Discourse the default category is ‘General’, but if the user is creating a topic from the Calendar page ( the page already has the ‘New Topic’ functionality) - the composer’s category defaults to ‘Event Planning’ instead, and triggers the template attached to the ‘Event Planning’ category.

Can anyone point me in the right direction?

Thanks

2

For reference - the code i’ve gotten so far:

HTML Body

<!-- Used to flag Calendar page by adding calendar-page class to body -->

  <script>
    // Check if the URL ends with "/calendar"
    if (window.location.href.endsWith("/calendar")) {
      // Add a class to the body to trigger the CSS rule
      document.body.classList.add('calendar-page');
    }
  </script>

<!-- Changes 'Add Topic' to 'Add Event' in calendar screen -->

  <script>
    // Check if the body has the class "hide-on-calendar"
    if (document.body.classList.contains('calendar-page')) {
      // Update the text of the button
      const button = document.querySelector('.main-content.calendar .d-button-label');
      if (button) {
        button.textContent = 'Add Event';
      }
    }
  </script>

CSS

//Hide none Event Categories 
    
     body.calendar-page li.select-kit-row.category-row[title]:not([title="Private Events"]):not([title="Public Events"]):not([title="Induction Sessions"]):not([title="Space Bookings"]) {
      display: none;
    }

If anyone has got any suggestions on how to pick up a value set against the category settings by a plugin (in this case the Event’s plugin’s “Allow events to be added to topics in this category.” setting) so i don’t need to hard code the categories, that would be awesome too … but i know i’m pushing my luck.