search

jquense / react-big-calendar

gcal/outlook like calendar component
http://jquense.github.io/react-big-calendar/examples/index.html
MIT License
7.79k stars 2.23k forks source link

Time Slot Issue In Week View #2614

Open Vedantcm opened 3 months ago

Vedantcm commented 3 months ago

Check that this is really a bug

Reproduction link

https://codepen.io/vzvu3k6k/pen/ewRGwW

Bug description

this is previous bug link raised by me https://github.com/jquense/react-big-calendar/issues/2613 as you told From your description "records have start date - 13-04-2024 and end date - 14-04-2024 and start time for this 22:30 and end time is 22:45" and

const startDateTime = ${calendar?.start}T${calendar?.program_start_time}; const startTimeDate = new Date(startDateTime); const endDateTime = ${calendar?.end}T${calendar?.program_end_time}; Your primary issue is date format. The Date object constructor requires an ISO8601 compliant date.

What you're giving Date: new Date("13-04-2024T22:30") What you should be giving Date: new Date("2024-04-13T22:30") i tried this but still same issue happening Ex: this is my sample data { "title": 534, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-10T23:00:00.000Z", "program_start_time": "04:30", "end": "2024-07-13T23:13:00.000Z", "program_end_time": "04:43", "speaker_name": "Warner Loise", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "Empire State Building", "topic_name": " updated name

", "program_host": null, "is_hub_spoke_program_joinable": false },

Expected Behavior

event should be display in week view or day view according to start date and end date

Actual Behavior

event is not displaying for start date or end date

react-big-calendar version

1.8.5

React version

18.2.0

Platform/Target and Browser Versions

all browser

Validations

Would you like to open a PR for this bug?

cutterbl commented 3 months ago

But, when putting your events in the Calendar, are your start and end dates Date objects? This is outlined in the documentation and all examples.

Vedantcm commented 3 months ago

@cutterbl i tried both thing i passed start and end date like this Ex- api .get<never, programCalendars[]>(getProgramCalendar, { params: { year: currentYear, }, }) .then((res) => { const calendarsWithDateObjects = res?.map((calendar) => { const startDateTime = ${calendar?.start}T${calendar?.program_start_time}; const startTimeDate = new Date(startDateTime); const endDateTime = ${calendar?.end}T${calendar?.program_end_time}; const endTimeDate = new Date(endDateTime); return { ...calendar, start: new Date(startTimeDate), end: new Date(endTimeDate), }; }); setProgramCalendarsData(calendarsWithDateObjects); }); and also without this api .get<never, programCalendars[]>(getProgramCalendar, { params: { year: currentYear, }, }) .then((res) => { const calendarsWithDateObjects = res?.map((calendar) => { const startDateTime = ${calendar?.start}T${calendar?.program_start_time}; const startTimeDate = new Date(startDateTime); const endDateTime = ${calendar?.end}T${calendar?.program_end_time}; const endTimeDate = new Date(endDateTime); return { ...calendar, start: startTimeDate, end: endTimeDate, }; }); setProgramCalendarsData(calendarsWithDateObjects); });

cutterbl commented 3 months ago

OK, you have true Date objects now. So the next questions become "What is the actual problem you are having? And what were the actual values of startDateTime and endDateTime used to create your Date objects?

Looking at your reproduction Codepen, start and end are being applied exactly as you have specified them to. If your events do not appear in the correct slots then it is almost always a data issue of some kind.

Vedantcm commented 3 months ago

i debuged my code many time also checked my data EX: { "title": 534, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-10T23:00:00.000Z", "program_start_time": "04:30", "end": "2024-07-13T23:13:00.000Z", "program_end_time": "04:43", "speaker_name": "Warner Loise", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "Empire State Building", "topic_name": "

u<span style=\"color:hsl(0, 75%, 60%);\">pdated <span style=\"background-color:hsl(0, 75%, 60%);\">name 

", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 459, "hub_spoke_program": "No", "max_spoke_program_permitted": 0, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": null, "program_start_time": "", "end": null, "program_end_time": "", "speaker_name": "Header Test", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": false, "venue_name": "test venue", "topic_name": "

u<span style=\"color:hsl(0, 75%, 60%);\">pdated <span style=\"background-color:hsl(0, 75%, 60%);\">name 

", "program_host": "John Doe", "is_hub_spoke_program_joinable": false } after converting this is my event data first one is containing start and end date but second one is not containing start and end date because these field have no data at starting time so according to me this data is not issue for not showing events in week/day view i also checked zone so in my component i am setting timezone this EX:

moment.tz.setDefault('America/New_York'); const localizer = momentLocalizer(moment);

and i am in india so i changed my system time zone for according to this data still not working
this is my component 1---------- <Calendar localizer={localizer} key={defaultDate.toISOString()} events={programCalendarsData} eventPropGetter={eventStyleGetter} dayPropGetter={dayPropGetter} popup={true} formats={formats} messages={messages} onSelectEvent={handleSelectEvent} onDrillDown={onDrillDown} components={components} onView={onView} defaultDate={defaultDate} onNavigate={handleNavigate} tooltipAccessor={() => { return ''; }}

                />

2--------------------

cutterbl commented 3 months ago

Doing a quick calendar, setting timezone, and using your events. I got the following:

Screenshot 2024-07-03 at 8 27 15 AM

As you can see, your one event (the one with a 'start') is displayed at the top in the 'all day' row, spanning from the 10th thru the 13th as expected.

One thing to note is your events without date data. You will want to filter those out prior to applying your events to your Calendar, as that will cause unexpected results.

The only issue I had was creating the events data, where you used double quotes (in topic_name) inside double quotes. Changing those to single quotes fixed it for me.

Vedantcm commented 3 months ago

as you told i followed everything still my event is not display this is my function function isValidDate(d: any) { return d instanceof Date && !isNaN(d.getTime()); }

const getAllProgramCalendar = () => { api .get<never, programCalendars[]>(getProgramCalendar, { params: { year: currentYear, }, }) .then((res) => { const calendarsWithDateObjects = res?.map((calendar) => { const startDateTime = ${calendar?.start}T${calendar?.program_start_time}; const startTimeDate = new Date(startDateTime); const endDateTime = ${calendar?.end}T${calendar?.program_end_time}; const endTimeDate = new Date(endDateTime); return { ...calendar, start: startTimeDate, end: endTimeDate, topic_name: extractPlainTextFromHTML(calendar.topic_name ?? ''), }; }); const filterDate = calendarsWithDateObjects.filter((x) => isValidDate(x.start) && isValidDate(x.end));

    setProgramCalendarsData(filterDate);
  });

}; then this object is coming [ { "title": 450, "hub_spoke_program": "No", "max_spoke_program_permitted": 0, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj module test", "start": "2024-06-18T14:42:00.000Z", "program_start_time": "20:12", "end": "2024-06-28T13:43:00.000Z", "program_end_time": "19:13", "speaker_name": null, "program_type": "Virtual", "brand_id": 107, "is_greater_than_current_date": false, "venue_name": null, "topic_name": "", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 456, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 3, "sub_hub_spoke_program_count": 1, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-06-19T11:54:00.000Z", "program_start_time": "17:24", "end": "2024-06-28T12:55:00.000Z", "program_end_time": "18:25", "speaker_name": "Amol R", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": false, "venue_name": "rweyfasdhvcifdsk", "topic_name": "updated name ", "program_host": "Cecilio Ambrogioni", "is_hub_spoke_program_joinable": false }, { "title": 463, "hub_spoke_program": "No", "max_spoke_program_permitted": 0, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj spoke", "start": "2024-06-25T11:05:00.000Z", "program_start_time": "16:35", "end": "2024-06-28T09:05:00.000Z", "program_end_time": "14:35", "speaker_name": null, "program_type": "spoke", "brand_id": 125, "is_greater_than_current_date": false, "venue_name": "venue washington resto", "topic_name": "Test Bold Red asa", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 465, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 8, "sub_hub_spoke_program_count": 4, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-06-28T13:33:00.000Z", "program_start_time": "19:03", "end": "2024-06-29T13:46:00.000Z", "program_end_time": "19:16", "speaker_name": "fghj dfghjk", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": false, "venue_name": "Empire State Building", "topic_name": "updated name ", "program_host": "testcard testcard", "is_hub_spoke_program_joinable": false }, { "title": 484, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 9, "sub_hub_spoke_program_count": 9, "meeting_status_id": 11, "program_status": "Program Occurred", "resource": "Completed", "project_name": "proj new 1701", "start": "2024-06-25T13:05:00.000Z", "program_start_time": "18:35", "end": "2024-06-29T14:03:00.000Z", "program_end_time": "19:33", "speaker_name": "John Doe", "program_type": "Secure Hood", "brand_id": 125, "is_greater_than_current_date": false, "venue_name": "Empire State Building", "topic_name": "topic ix new test 1701", "program_host": "sharad11 taur1", "is_hub_spoke_program_joinable": false }, { "title": 497, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 8, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-06-24T21:27:00.000Z", "program_start_time": "02:57", "end": "2024-06-30T01:45:00.000Z", "program_end_time": "07:15", "speaker_name": "Emily Snow", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": false, "venue_name": null, "topic_name": "updated name ", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 502, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj test final", "start": "2024-06-25T23:07:00.000Z", "program_start_time": "04:37", "end": "2024-06-27T00:08:00.000Z", "program_end_time": "05:38", "speaker_name": null, "program_type": "Picture Perfect", "brand_id": 123, "is_greater_than_current_date": false, "venue_name": null, "topic_name": "wwwwwwww", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 503, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh 13-06", "start": "2024-06-26T23:09:00.000Z", "program_start_time": "04:39", "end": "2024-06-30T00:11:00.000Z", "program_end_time": "05:41", "speaker_name": null, "program_type": "Growth Guide", "brand_id": 125, "is_greater_than_current_date": false, "venue_name": "Fairfield Inn & Suites", "topic_name": "topic ix new test 1701", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 504, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 8, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj end time and duration", "start": "2024-06-26T20:09:00.000Z", "program_start_time": "01:39", "end": "2024-06-29T22:09:00.000Z", "program_end_time": "03:39", "speaker_name": null, "program_type": "Secure Hood", "brand_id": 124, "is_greater_than_current_date": false, "venue_name": "123 Florida", "topic_name": "topic ix new test 1701", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 528, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-06-26T17:05:00.000Z", "program_start_time": "22:35", "end": "2024-06-26T17:18:00.000Z", "program_end_time": "22:48", "speaker_name": "Siddesh B", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": false, "venue_name": "Empire State Building", "topic_name": "updated name ", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 532, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 8, "sub_hub_spoke_program_count": 0, "meeting_status_id": 11, "program_status": "Program Occurred", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-06-30T10:14:00.000Z", "program_start_time": "15:44", "end": "2024-07-17T10:27:00.000Z", "program_end_time": "15:57", "speaker_name": "Matisagar Dol", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": false, "venue_name": "Empire State Building", "topic_name": "updated name ", "program_host": "First Name Last Name", "is_hub_spoke_program_joinable": false }, { "title": 534, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-10T23:00:00.000Z", "program_start_time": "04:30", "end": "2024-07-13T23:13:00.000Z", "program_end_time": "04:43", "speaker_name": "Warner Loise", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "Empire State Building", "topic_name": "updated name ", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 536, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 14, "program_status": "Logistics Confirmed", "resource": "Confirmed", "project_name": "proj ganesh all check", "start": "2024-06-28T13:35:00.000Z", "program_start_time": "19:05", "end": "2024-07-29T13:48:00.000Z", "program_end_time": "19:18", "speaker_name": null, "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": false, "venue_name": "Empire State Building", "topic_name": "updated name ", "program_host": "First Name Last Name", "is_hub_spoke_program_joinable": false }, { "title": 537, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 3, "sub_hub_spoke_program_count": 0, "meeting_status_id": 14, "program_status": "Logistics Confirmed", "resource": "Confirmed", "project_name": "proj ganesh all check", "start": "2024-06-29T14:44:00.000Z", "program_start_time": "20:14", "end": "2024-07-07T17:57:00.000Z", "program_end_time": "23:27", "speaker_name": "John Doe", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": false, "venue_name": "rweyfasdhvcifdsk", "topic_name": "updated name ", "program_host": "Vinayak Tupe", "is_hub_spoke_program_joinable": false }, { "title": 551, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 3, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-04T11:54:00.000Z", "program_start_time": "17:24", "end": "2024-07-16T04:54:00.000Z", "program_end_time": "10:24", "speaker_name": null, "program_type": "spoke", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "123 Florida", "topic_name": "updated name ", "program_host": "Brien Leband", "is_hub_spoke_program_joinable": false }, { "title": 565, "hub_spoke_program": "Hub", "max_spoke_program_permitted": 8, "sub_hub_spoke_program_count": 2, "meeting_status_id": 14, "program_status": "Logistics Confirmed", "resource": "Confirmed", "project_name": "proj ganesh all check", "start": "2024-07-15T01:10:00.000Z", "program_start_time": "06:40", "end": "2024-07-30T15:13:00.000Z", "program_end_time": "20:43", "speaker_name": "Siddesh B", "program_type": "Picture Perfect", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "sans fransisco", "topic_name": "updated name ", "program_host": "First Name Last Name", "is_hub_spoke_program_joinable": true }, { "title": 566, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-15T01:10:00.000Z", "program_start_time": "06:40", "end": "2024-07-30T15:13:00.000Z", "program_end_time": "20:43", "speaker_name": "Siddesh B", "program_type": "spoke", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "Empire State Building", "topic_name": "updated name ", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 567, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-15T01:10:00.000Z", "program_start_time": "06:40", "end": "2024-07-30T15:13:00.000Z", "program_end_time": "20:43", "speaker_name": "Siddesh B", "program_type": "spoke", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "Spring1", "topic_name": "updated name ", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 568, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-15T01:10:00.000Z", "program_start_time": "06:40", "end": "2024-07-30T15:13:00.000Z", "program_end_time": "20:43", "speaker_name": "Siddesh B", "program_type": "spoke", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "rweyfasdhvcifdsk", "topic_name": "updated name ", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 570, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-15T01:10:00.000Z", "program_start_time": "06:40", "end": "2024-07-30T15:13:00.000Z", "program_end_time": "20:43", "speaker_name": "Siddesh B", "program_type": "spoke", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "amol caterer", "topic_name": "updated name ", "program_host": null, "is_hub_spoke_program_joinable": false }, { "title": 571, "hub_spoke_program": "No", "max_spoke_program_permitted": null, "sub_hub_spoke_program_count": 0, "meeting_status_id": 1, "program_status": "Submitted by Rep", "resource": "Completed", "project_name": "proj ganesh all check", "start": "2024-07-15T01:10:00.000Z", "program_start_time": "06:40", "end": "2024-07-30T15:13:00.000Z", "program_end_time": "20:43", "speaker_name": "Siddesh B", "program_type": "spoke", "brand_id": 122, "is_greater_than_current_date": true, "venue_name": "rweyfasdhvcifdsk", "topic_name": "updated name ", "program_host": null, "is_hub_spoke_program_joinable": false } ]

may be you will surprise except 528 event others events is not displaying in week,day view and in agenda it's display like image

cutterbl commented 2 months ago

I see 528. Not looking at each one, but don't seem to be missing anything

Screenshot 2024-07-08 at 10 47 35 AM Screenshot 2024-07-08 at 10 47 46 AM Screenshot 2024-07-08 at 10 47 56 AM Screenshot 2024-07-08 at 10 48 23 AM Screenshot 2024-07-08 at 10 49 31 AM Screenshot 2024-07-08 at 10 50 02 AM

Vedantcm commented 2 months ago

(i am using react with typescript) i can see my data is working at your side so i am not able to understand what is the main reason it's not working in my side can you provide code snippet what you configured in your side

cutterbl commented 2 months ago

https://codesandbox.io/p/sandbox/z2jqpmlr14

Vedantcm commented 2 months ago

hi @cutterbl i tried your solution but still not working i don't know why i am clue less now how to solve it can i request you if you have time can i sync with you in meeting for 15 minute because i need to resolve this i also know only you can help me i found one thing when start date and end date is same then event is displaying when start and end date have range then it'snot displaying in my side EX: // return { // ...calendar, // start: new Date(2024, 7, 20, 2, 30,0), // end: new Date(2024, 9, 20, 3, 45,0), // };

Vedantcm commented 2 months ago

@cutterbl I want to thank you for your help and guidance now i solved this problem