FullCalendar Overlapping Events different color

Question

I am using Fullcalendar / Scheduler to show some events on a calendar. I get all my information from a REST service.

I know that Fullcalendar has a method that checks if an event is overlapping with another ( it does this when using the slotEventOverlap attribute ) so that it will make it 50% or less depending on how many events there are.

My question is this, has anyone any idea what that method is .. What I need to achieve is that when two overlapping events are on the calendar, they should be in red. Something like this:

I was thinking that somewhere in the library, when the computing is done, and the % are set, a new class can be added to these events, something like fc-overlap, that I could customize.

Or does anyone have any idea on how I could achieve this?

The only solution I can find is after I get the list of events, parse them in a function check if startTime & endTime overlap and somehow assign a class to only those that overlapp. (I can identify the events via their ID ) but this seems somehow defeating the purpose since the calendar is already doing a validation when it's rendering the events.

Answer 1

There are two ways to do this:

1. Server side: the best method in my opinion, definitely faster.

Assuming you have a DB table named events filled with your events, you can easily check if the current event overlaps some other in the current view. Example:

$output = [];
$my_start_date = $_GET['start'];
$my_end_date = $_GET['end'];
$result = $db->query("SELECT * FROM events WHERE 1;");
foreach ($result AS $row){
    $is_overlapping_class = "";
    if( isOverlapping($row['start'], $row['end']) )
        $is_overlapping_class = "my-custom-overlapping-class";

    $output[] = [
        "title" => $row['title'],
        "content" => $row['content'],
        "start" => date("Y-m-d", strtotime( $row['start'] )),
        "end" => date("Y-m-d", strtotime( $row['end'] )),
        "allDay" => boolval($row['allDay']),
        "className" => $is_overlapping_class
    ];
}

And the isOverlapping() function, very basic:

function isOverlapping( $start, $end ){
    GLOBAL $db;
    $result = $db->query("SELECT 1 FROM events WHERE date(date_start) >= date('$my_start_date') AND date(date_end) <= date('$my_end_date')");
    return $result->rowCount() > 1; // > 1 because one result will be surely the currently tested event
}

2. Client side: I don't suggest this method when you have to display many events at the same time.

Define a function (found here) to check if the current event is overlapping any other event.

function isOverlapping( event ) {
    var array = $('#calendar').fullCalendar('clientEvents');
    for(i in array){
        if(array[i].id != event.id){
            if(!(Date(array[i].start) >= Date(event.end) || Date(array[i].end) <= Date(event.start))){
                return true;
            }
        }
    }
    return false;
}

Then, on event eventRender check for overlapping and add class:

$('#calendar').fullCalendar({
    events: [ ... ],
    eventRender: function(event, element) {
        if( isOverlapping( event ) ){
            element.addClass('my-custom-overlapping-class');
        }
    }
});

NOTE: this code is not tested as no source code was provided by the OP. Should give an idea of what needs to/can be done though.

Answer 2

Answering by considering you are using full-calendar library from https://fullcalendar.io

Check the link https://fullcalendar.io/docs/slotEventOverlap which states that, whether you want to have overlapping events or not. Using keyword "slotEventOverlap" from above link, I have found out event associated to it in JS file https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.js

where a function "generateFgSegHorizontalCss" uses keyword "slotEventOverlap" to get CSS related to event being shown.

Hope that using above information, you can try to figure next probable solution to create custom css for achieving your target.