Event is not spanned on multiple days in 24h format if start time is greater than end time

[fcraboui]

What happened?

With Grafana 12.2.1 and the Business Calendar plugin 4.2.0, events are not correctly spanned over multiple days when using the 24-hour format and if the start time is greater than the end time.

Example:

What did you expect to happen?

The event 'test_ko' should be spanned over the 2 days, as for 'test_ok' one.

Did this work before?

Not sure.

How do we reproduce it?

1. Create a postgres table:
   create table bug_calendar (id serial primary key, name varchar, description varchar, start_ts timestamp, end_ts timestamp);

2. Insert sample data:
   insert into bug_calendar (name, description, start_ts, end_ts) values ('test_ok', 'description', '2025-10-01 10:00:00.000', '2025-10-02 15:00:00.000'); insert into bug_calendar (name, description, start_ts, end_ts) values ('test_ko', 'description invalid case', '2025-10-01 17:00:00.000', '2025-10-02 15:00:00.000');

3. Create the data source on the postgres database

4. Create the Business Calendar panel based on the following query:
   select $__time(start_ts), name, description, end_ts, concat('Duration: ', end_ts - start_ts) as "Duration" from bug_calendar;

5. Panel configuration:

• Data = Name
• Start time = time
• End time = end_ts

Note: 'Date & Time format' can be set as English or English 24h, it does not fix the issue.

Is the bug inside a dashboard panel?

Key	Value
Panel	marcusolsson-calendar-panel @ 4.2.0
Grafana	Grafana v12.2.1 (Homebrew) // Open Source

Panel debug snapshot dashboard

{
  "panels": [
    {
      "id": 2,
      "type": "marcusolsson-calendar-panel",
      "title": "Reproduced with embedded data",
      "gridPos": {
        "h": 13,
        "w": 15,
        "x": 0,
        "y": 0
      },
      "fieldConfig": {
        "defaults": {
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "super-light-yellow",
                "value": 5
              },
              {
                "color": "#efefef",
                "value": 10
              },
              {
                "color": "blue",
                "value": 80
              },
              {
                "color": "red",
                "value": 100
              }
            ]
          },
          "color": {
            "mode": "thresholds"
          },
          "links": []
        },
        "overrides": []
      },
      "pluginVersion": "4.2.0",
      "targets": [
        {
          "refId": "A",
          "datasource": {
            "type": "grafana",
            "uid": "grafana"
          },
          "queryType": "snapshot",
          "snapshot": [
            {
              "schema": {
                "refId": "Outscale maintenances",
                "meta": {
                  "typeVersion": [
                    0,
                    0
                  ],
                  "executedQueryString": "select start_ts AS \"time\", name, description, end_ts, concat('Duration: ', end_ts - start_ts) as \"Duration\"\nfrom bug_calendar"
                },
                "fields": [
                  {
                    "name": "time",
                    "type": "time",
                    "typeInfo": {
                      "frame": "time.Time",
                      "nullable": true
                    },
                    "config": {}
                  },
                  {
                    "name": "name",
                    "type": "string",
                    "typeInfo": {
                      "frame": "string",
                      "nullable": true
                    },
                    "config": {}
                  },
                  {
                    "name": "description",
                    "type": "string",
                    "typeInfo": {
                      "frame": "string",
                      "nullable": true
                    },
                    "config": {}
                  },
                  {
                    "name": "end_ts",
                    "type": "time",
                    "typeInfo": {
                      "frame": "time.Time",
                      "nullable": true
                    },
                    "config": {}
                  },
                  {
                    "name": "Duration",
                    "type": "string",
                    "typeInfo": {
                      "frame": "string",
                      "nullable": true
                    },
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    1759312800000,
                    1759338000000
                  ],
                  [
                    "test_ok",
                    "test_ko"
                  ],
                  [
                    "description",
                    "description invalid case"
                  ],
                  [
                    1759417200000,
                    1759417200000
                  ],
                  [
                    "Duration: 1 day 05:00:00",
                    "Duration: 22:00:00"
                  ]
                ]
              }
            }
          ]
        }
      ],
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "options": {
        "scrollToTime": {
          "hours": 0,
          "minutes": 0
        },
        "timeRangeType": "default",
        "views": [
          "week",
          "month"
        ],
        "defaultView": "month",
        "dateFormat": "en24",
        "showMonthTime": true,
        "colors": "thresholds",
        "quickLinks": true,
        "showEventTooltip": true,
        "displayFields": [
          "description"
        ],
        "preformattedDescription": false,
        "locationLabel": "",
        "annotations": true,
        "annotationsType": "",
        "annotationsLimit": 100,
        "colorField": "color",
        "endTimeField": "end_ts",
        "labelFields": [
          "emplacement",
          "tags",
          "Duration"
        ],
        "textField": "name",
        "timeField": "time",
        "descriptionField": []
      }
    },
    {
      "gridPos": {
        "h": 7,
        "w": 9,
        "x": 15,
        "y": 0
      },
      "id": 5,
      "options": {
        "content": "<table width=\"100%\">\n    <tr>\n      <th width=\"2%\">Panel</th>\n      <td >marcusolsson-calendar-panel @ 4.2.0</td>\n    </tr>\n    <tr>\n      <th>Queries</th>\n      <td>Outscale maintenances[grafana-postgresql-datasource]</td>\n    </tr>\n    \n    <tr><th>Data</th><td> 1 frames, 5 fields, 2 rows </td></tr>\n    \n    <tr>\n      <th>Grafana</th>\n      <td>Grafana v12.2.1 (Homebrew) // Open Source</td>\n    </tr>\n  </table>",
        "mode": "html"
      },
      "title": "Debug info",
      "type": "text"
    },
    {
      "id": 6,
      "title": "Original Panel JSON",
      "type": "text",
      "gridPos": {
        "h": 13,
        "w": 9,
        "x": 15,
        "y": 7
      },
      "options": {
        "content": "{\n  \"id\": 4,\n  \"type\": \"marcusolsson-calendar-panel\",\n  \"title\": \"Calendrier des opérations\",\n  \"gridPos\": {\n    \"x\": 0,\n    \"y\": 25,\n    \"h\": 25,\n    \"w\": 22\n  },\n  \"fieldConfig\": {\n    \"defaults\": {\n      \"mappings\": [],\n      \"thresholds\": {\n        \"mode\": \"absolute\",\n        \"steps\": [\n          {\n            \"color\": \"green\",\n            \"value\": null\n          },\n          {\n            \"color\": \"super-light-yellow\",\n            \"value\": 5\n          },\n          {\n            \"color\": \"#efefef\",\n            \"value\": 10\n          },\n          {\n            \"color\": \"blue\",\n            \"value\": 80\n          },\n          {\n            \"color\": \"red\",\n            \"value\": 100\n          }\n        ]\n      },\n      \"color\": {\n        \"mode\": \"thresholds\"\n      },\n      \"links\": []\n    },\n    \"overrides\": []\n  },\n  \"pluginVersion\": \"4.2.0\",\n  \"targets\": [\n    {\n      \"dataset\": \"calendrier\",\n      \"editorMode\": \"code\",\n      \"format\": \"table\",\n      \"rawQuery\": true,\n      \"rawSql\": \"select $__time(start_ts), name, description, end_ts, concat('Duration: ', end_ts - start_ts) as \\\"Duration\\\"\\nfrom bug_calendar\",\n      \"refId\": \"Outscale maintenances\",\n      \"sql\": {\n        \"columns\": [\n          {\n            \"parameters\": [],\n            \"type\": \"function\"\n          }\n        ],\n        \"groupBy\": [\n          {\n            \"property\": {\n              \"type\": \"string\"\n            },\n            \"type\": \"groupBy\"\n          }\n        ],\n        \"limit\": 50\n      },\n      \"table\": \"maintenances\"\n    }\n  ],\n  \"datasource\": {\n    \"type\": \"grafana-postgresql-datasource\",\n    \"uid\": \"af4lzw5ci9zwgd\"\n  },\n  \"options\": {\n    \"scrollToTime\": {\n      \"hours\": 0,\n      \"minutes\": 0\n    },\n    \"timeRangeType\": \"default\",\n    \"views\": [\n      \"week\",\n      \"month\"\n    ],\n    \"defaultView\": \"month\",\n    \"dateFormat\": \"en24\",\n    \"showMonthTime\": true,\n    \"colors\": \"thresholds\",\n    \"quickLinks\": true,\n    \"showEventTooltip\": true,\n    \"displayFields\": [\n      \"description\"\n    ],\n    \"preformattedDescription\": false,\n    \"locationLabel\": \"\",\n    \"annotations\": true,\n    \"annotationsType\": \"\",\n    \"annotationsLimit\": 100,\n    \"colorField\": \"color\",\n    \"endTimeField\": \"end_ts\",\n    \"labelFields\": [\n      \"emplacement\",\n      \"tags\",\n      \"Duration\"\n    ],\n    \"textField\": \"name\",\n    \"timeField\": \"time\",\n    \"descriptionField\": []\n  }\n}",
        "mode": "code",
        "code": {
          "language": "json",
          "showLineNumbers": true,
          "showMiniMap": true
        }
      }
    },
    {
      "id": 3,
      "title": "Data from panel above",
      "type": "table",
      "datasource": {
        "type": "datasource",
        "uid": "-- Dashboard --"
      },
      "gridPos": {
        "h": 7,
        "w": 15,
        "x": 0,
        "y": 13
      },
      "options": {
        "showTypeIcons": true
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "-- Dashboard --"
          },
          "panelId": 2,
          "withTransforms": true,
          "refId": "A"
        }
      ]
    }
  ],
  "schemaVersion": 37,
  "title": "Debug: Operations // 2025-11-24 09:22:53",
  "tags": [
    "debug",
    "debug-marcusolsson-calendar-panel"
  ],
  "time": {
    "from": "2025-09-30T22:00:00.000Z",
    "to": "2025-10-31T22:59:59.999Z"
  }
}

Environment (with versions)?

Grafana: 12.2.1
OS: MacOS Tahoe 26.1
Browser: Firefox 145.0

Grafana platform?

A downloaded binary

Datasource(s)?

Grafana 12.2.1 / Business Calendar plugin 4.2.0

[fcraboui]

This seems to be due to this check to be unecessary. It would be interesting to have the possibility to choose if an event is displayed at 2 blocks, or as only 1.

In this case, the 2nd part of the check should check how the user wants to display that kind of events:
const crossesMidnight = !start.isSame(end, 'day') && durationInHours < 24;
^^^^^^^^^^^^^^^^^^^^

In my case, I want to see only 1 block spanning over the 2 days, corresponding to only 1 operation, rather than seeing 2 blocks, implicitely meaning 2 different operations.