Add custom classes to event on calendar

I would like to see this functionality too.

I'm really interested too!
Any way?
ThanX!

Two ways:
- help porting https://www.drupal.org/project/colors and Fullcalendar Colors submodule to D8
- use hook_fullcalendar_classes() and hook_fullcalendar_classes_alter() which provides $entity as context

If anybody's interested, I've used hook_fullcalendar_classes_alter() to add classes to events based on event information. My code is integrating FullCalendar with Recurring Events, so I've taken out some of the code specific to that interaction.

/**
 * Alter the CSS classes for an entity.
 */
function [custom_module_name]_fullcalendar_classes_alter(&$classes, $entity) {
	// Determine some information about this event
	...

	// Set the appropriate classes
	$classes[] = ($boolIsRegistrationOpen ? "registration-open" : "registration-closed");
	$classes[] = ($intAvailableSlots > 0 ? "slots-available" : "registration-full");
	$classes[] = ($boolHasWaitlist ? "waitlist-available" : "no-waitlist");
	$classes[] = ($boolAlreadyRegistered_Instance ? "already-registered-instance" : "not-yet-registered-instance");
	$classes[] = ($boolAlreadyRegistered_Series ? "already-registered-series" : "not-yet-registered-series");
}

Then, on the CSS side, it's as simple as setting your rules. I plan on using this more for CSS-only tooltips and before/after icons than color-coding events.

  .fullcalendar .fc-view table tbody a.fc-event.already-registered-instance {
	border-color: slategray !important;
	background-color: slategray !important;
  }

@ryankavalsky,
Do you replace $entity in function [custom_module_name]_fullcalendar_classes_alter(&$classes, $entity) { with $node ?

I can't make it work...

Hi @kazah, I am still using $entity in the noted function call:

function [custom_module_name]_fullcalendar_classes_alter(&$classes, $entity) {...}

Thank you!

Could you please provide more code here // Determine some information about this event

I try to use this code to add classes to my events based on my field "status" with options:

• Pending
• Paid
• Delivered

But couldn't understand how to do it...maybe your example helps me.

Thank you in advance.

Hi @kazah,

I've included a little more of the code below, leaving out anything proprietary though. You can probably use $entity->get("status")->value to determine your events' status and work from there.

function [custom_module_name]_fullcalendar_classes_alter(&$classes, $entity) {
	// Get the instance and series IDs
	$intEventID = $entity->id();
	$intEventSeriesID = $entity->getEventSeries()->id();

	// Determine some information about this event
	$objEventDate = $entity->get("date")->value;
	$boolEventPassed = (date("Y-m-d\TH:i:s") > $objEventDate);

	...

	// Set the appropriate classes
	if (!$boolEventPassed) {
		$classes[] = ($boolIsRegistrationOpen ? "registration-open" : "registration-closed");
		$classes[] = (($intAvailableSlots > 0 || $intAvailableSlots == -1) ? "slots-available" : "registration-full");
		$classes[] = ($boolHasWaitlist ? "waitlist-available" : "no-waitlist");
		$classes[] = ($boolAlreadyWaitlisted ? "already-on-waitlist" : "not-on-waitlist");
	}
	if ($boolAlreadyRegistered_Series || $boolAlreadyRegistered_Instance) {
		$classes[] = "registered-event-instance-id-" . $intRegisteredEventInstanceID;
	}
	if ($boolAlreadyRegistered_Series) {
		$classes[] = "already-registered-series";
		$classes[] = "registration-id-$intExistingRegistrationID";
	}
	else {
		$classes[] = "not-yet-registered-series";
	}
	$classes[] = ($boolAlreadyRegistered_Instance ? "already-registered-instance" : "not-yet-registered-instance");
	$classes[] = ($boolRegistrationRequired ? "registration-required" : "registration-not-required");
	$classes[] = "instance-id-$intEventID";
	$classes[] = "series-id-$intEventSeriesID";
}

Hope this helps!

I couldn't get it to work...maybe because my site on drupal 9, or maybe because I use webform submissions.

I really appreciate your help! Thank you!

How about simply adding non-specific classes to print such as; .tax1, .tax2, etc with the class name related to the number of taxonomy terms based on their order in the vocabulary?

In the example below I've placed the "tax1" class in the tag which would allow me to target it and all tags within so I could have a yellow background with black text.

<td class="fc-event-container"><a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable tax1" href="/event/some-event-name" style="background-color:#ffff00"><div class="fc-content"><span class="fc-time">07:00 am</span> <span class="fc-title">SOME EVENT NAME</span></div></a></td>

Currently, I can not have dark and light color backgrounds because the text color can not be easily altered without a custom module.

Closing this as outdated since hook_fullcalendar_classes() and hook_fullcalendar_classes_alter() exist.