[FEATURE] [Calendar] Parameterise the Time Range in the TimeGris in Day ViewType

[SatkunamSuganthar]

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 ?

[ArtKarp]

Yes. There is a property to set the grid default start time. I am not at my computer right now so I don’t have the exact name.

-Art

On Wed, Jul 19, 2023 at 4:51 AM SatkunamSuganthar ***@***.***> wrote: *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) [image: image] <https://user-images.githubusercontent.com/97066265/254564062-2156c792-a59a-43d4-a920-2beff1ea26b8.png> *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 <https://github.com/rwilson504> / @powerappsdev <https://github.com/powerappsdev> / @seniormeow <https://github.com/seniormeow> Is it possible to achieve ? — Reply to this email directly, view it on GitHub <#317>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGEB6IW7ZZXGXZB5U6E5P3DXQ7C4LANCNFSM6AAAAAA2PZSTPU> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Sent from my mobile phone

[SatkunamSuganthar]

Thanks @ArtKarp for the reply. Is it the Min and Max ?

[rwilson504]

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]

Why am I in this discussion? I do not develop this app. Please remove my git from this repo.

…

On Fri, Jul 21, 2023 at 6:27 PM Rick Wilson ***@***.***> wrote: 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. — Reply to this email directly, view it on GitHub <#317 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIQZLMZIXYZ5TDHDIOEF7V3XRL657ANCNFSM6AAAAAA2PZSTPU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[rwilson504]

@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.

https://docs.github.com/en/account-and-profile/managing-subscriptions-and-notifications-on-github/managing-subscriptions-for-activity-on-github/managing-your-subscriptions#unwatching-repositories

[SatkunamSuganthar]

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.

[rwilson504]

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.

[SatkunamSuganthar]

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.

[rwilson504]

@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.

https://codesandbox.io/s/quiet-violet-89nklg

[SatkunamSuganthar]

@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.