Error when programme item spans into next day

[Simba-Mupfunya]

Hi

When using isBaseTimeFormat=true the "function formatTime" throws an invalid time exception when a programme item spans into the next day e.g starttime 23:50 -> endtime 03:00. When isBaseTimeFormat=false the timeline formatTime function doesnt throw an exception but continues as 23:00, 24:00, 25:00, 26:00, 27:00: see image below

However i have found the issue and can be solved by a small update to the internal formatTime function as follows:

`const formatTime = (index) => {
var date = new Date();
var baseDate = format(date, TIME_FORMAT.DATE);
var time = index < 10 ? "0" + index : index;

        /**** Update Code **/
        if(time>23){                
            var timeString = (time - 24).toString();
            time = timeString.length < 2 ? "0" + timeString : timeString;
        }
        /**** End update **/
    
        if (isBaseTimeFormat) {
          var _date = new Date(baseDate + "T" + time + ":00:00");
    
          var timeFormat = format(_date, TIME_FORMAT.BASE_HOURS_TIME);
          return timeFormat.toLowerCase().replace(/\s/g, "");
        }
    
        return time + ":00";
    };

`

[karolkozer]

Hi,

Thank you very much for your info.
Do you keep the program schema like below?
{
channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
description:
'Ut anim nisi consequat minim deserunt...',
id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
image: 'https://via.placeholder.com',
since: "2022-02-02T23:50:00",
till: "2022-02-02T00:55:00",
title: 'Title',
...
},

[Simba-Mupfunya]

yep example schema
[
{
"id": "session_0000089120_0",
"channelUuid": "0000005000",
"since": "2021-06-25T23:55:00",
"till": "2021-06-26T03:30:00",
"title": "PCC02: Add-ons and other debated interventions in the IVF lab - part 1",
"image": "https://via.placeholder.com"
}
]

[karolkozer]

I have to reproduce the same bug because so far nothing like this has happened and no one has reported.

@Simba-Mupfunya

1. Do you use startDate and endDate props?
2. Can you provide me some your example data to reproduce issue with timeline?
3. Do you use version 0.2.2?

[Simba-Mupfunya]

1. Do you use startDate and endDate props? YES
2. Can you provide me some your example data to reproduce issue with timeline? See Attachment
3. Do you use version 0.2.2? YES

When isBaseTimeFormat=false the timeline formatTime function doesnt throw an exception but continues as 23:00, 24:00, 25:00, 26:00, 27:00. isBaseTimeFormat=true will throw an exception. In the attachment *isBaseTimeFormat=false

planby-epg-demo-forked.zip

[karolkozer]

@Simba-Mupfunya
Thank you very much for providing your example, it's helped me a lot.

I checked out your example and you set different dates in startDate and endDate props

You have to set the same date in startDate / endDate with full clock hours only.

Example

const {
getEpgProps,
...
} = useEpg({
startDate: '2022-05-09T10:00:00',
endDate: '2022-05-09T20:00:00',
...
});

[Simba-Mupfunya]

Thanks I know how to solve by splitting the schedule item into two (Day before and Day after) it makes sense