[FEATURE] [Calendar] Parameterise the Time Range in the TimeGris in Day ViewType
SatkunamSuganthar opened this issue · comments
Which PCF Component
Calendar
Is your feature request related to a problem? Please describe.
Currently a Day View range from 12 AM to 11 PM. Is it possible to set the custom range based on the Business Hours. (8 AM to 6 PM)
Describe the solution you'd like
Would like to be parameterised and used should able to select the start and end time in TimeGrid Library from React Big Calendar.
@rwilson504 / @powerappsdev / @seniormeow Is it possible to achieve ?
Thanks @ArtKarp for the reply. Is it the Min and Max ?
Currently there is no way set the start/end time for the agenda view, but you can have the view automatically scroll to a certain time of day.
Use the 'Calendar Scroll To Time' property. Enter the hour of the day (0 - 23) you would like the calendar to automatically scroll to for the day view."
For instance, if the typical workday starts at 8AM then enter 8 into that property.
@seniormeow you are not marked as a Collaborator on the project. Are you sure you don't just have a Watch turned on for the repo.
Currently there is no way set the start/end time for the agenda view, but you can have the view automatically scroll to a certain time of day.
Use the 'Calendar Scroll To Time' property. Enter the hour of the day (0 - 23) you would like the calendar to automatically scroll to for the day view."
For instance, if the typical workday starts at 8AM then enter 8 into that property.
Thanks @rwilson504.
I have explored that options Scroll to Time as you mentioned. But my client does not want that.
We are using work_week view, I believe it is not possible to achieve in this too.
Based on the docs from React-Big-Calendar I also don't believe this is possible. I'm going to close this for now, if that library ever gets updated with that capability feel free to re-open.
Hi @rwilson504, We are using the work_week view and looks like it is possible to achieve.
See the below Code in the Sanbox
`import { Calendar, momentLocalizer } from "react-big-calendar";
import "react-big-calendar/lib/css/react-big-calendar.css";
import moment from "moment";
import "moment-timezone";
// Calendar should show dates in the GMT+9 (Asian/Tokyo) time zone
// instead of in the client time zone.
moment.tz.setDefault("Australia/Sydney");
const localizer = momentLocalizer(moment);
export default function App() {
const minTime = new Date();
minTime.setHours(9, 0, 0);
const maxTime = new Date();
maxTime.setHours(18, 0, 0);
const events = [
// Single day event (start of day) ✅
{
title: "Event 1",
start: moment("2022-01-03T09:00:00").toDate(),
end: moment("2022-01-03T18:00:00").toDate()
},
// Single day event (end of day) ✅
{
title: "Event 2",
start: moment("2022-01-03T09:00:00").toDate(),
end: moment("2022-01-03T18:00:00").toDate()
},
// Should span from 2022-01-10 00:00:00 to 2022-01-14 23:59:59 ❌
// Does not work correctly when the client time zone is set to
// America/Los_Angeles, Europe/Brussels.
{
title: "Event 3 (10/01 - 14/01)",
start: moment("2023-07-22T09:00:00").toDate(),
end: moment("2022-07-22T18:00:00").toDate()
}
];
return (
<div style={{ height: 700 }}>
<Calendar localizer={localizer} events={events}
min={minTime} // Set the minimum time (start of the day)
max={maxTime} // Set the maximum time (end of the day)
/>
);
}
`
The IRL of the codesandbox is as below
https://codesandbox.io/s/keen-mopsa-wb63ky?file=/src/App.js:0-1504
I'm going to try to amend the PCF code as parametrised start time and end time, if it works, I will raise the PR for your review.
@SatkunamSuganthar, I tried out that code above in that sandbox and when I click on the week/work week/day views, I get that the index is out of range. The agenda and month views seem to work.
@rwilson504 Interesting, it perfectly works for me. I do not think it is related to the Library. could be specific to the Sanbox.
I think it will work with PCF control if I add correct code in your PCF control.
