dayStartFrom - dayStopTo not working!

Hawwash76 commented 1 year ago

they seem to not work, the scheduler renders on 12am no matter what i set it to

hbatalhaStch commented 1 year ago

I just tested it and it seems to working fine on my end, could you share your code?

Hawwash76 commented 1 year ago

Sure, this is what how i'm using it

let schedulerData = new SchedulerData('2023-3-3', ViewTypes.Day, false, false);

export const TeamCalendar = () => {
  useEffect(() => {
    schedulerData.setEvents(events);
    schedulerData.config.schedulerWidth = '82.3%';
    schedulerData.config.dayStartFrom = 9;
    schedulerData.config.dayStopTo = 18;
    schedulerData.config.headerEnabled = false;
    schedulerData.config.nonWorkingTimeHeadColor = '#ffffff';
    schedulerData.config.nonWorkingTimeHeadBgColor = '#262626';
    schedulerData.config.nonWorkingTimeBodyBgColor = '#262626';
    schedulerData.config.dayCellWidth = 60;
    schedulerData.config.movable = false;
    schedulerData.config.creatable = false;
    schedulerData.config.dragAndDropEnabled = false;
    schedulerData.config.eventItemHeight = 43;
    schedulerData.config.eventItemLineHeight = 60;
    schedulerData.config.resourceName = 'Sales Team (24)';
    schedulerData.setResources(resources);
    schedulerData.setEvents(events);
  }, []);

      <Scheduler
        schedulerData={schedulerData}
        eventItemTemplateResolver={eventItemTemplateResolver}
      />

};

hbatalhaStch commented 1 year ago

JavaScript

import dayjs, { Dayjs } from 'dayjs';
import React, { useEffect, useState } from 'react';
import Scheduler, {
    EventItem, Resource, SchedulerData, SchedulerDataBehaviors, SchedulerDataConfig, View, ViewType
} from 'react-big-scheduler-stch';
import "react-big-scheduler-stch/lib/css/style.css";

function TeamCalendar (props) {
    const [schedulerData, setSchedulerData] = useState(new SchedulerData(props.date ?? dayjs(),
        props.viewType ?? ViewType.Month,
        props.showAgenda ?? false,
        props.isEventPerspective ?? false,
        {
            ...props.schedulerDataConfig,
            dayStartFrom: 9,
            dayStopTo: 18
        }
    ))

    useEffect(() => {
        schedulerData.setResources(props.resources);
        schedulerData.setEvents(props.events);
    }, [])

    const prevClick = (schedulerData) => {
        schedulerData.prev();
        schedulerData.setEvents(props.events);
        setSchedulerData(schedulerData)
    }

    const nextClick = (schedulerData) => {
        schedulerData.next();
        schedulerData.setEvents(props.events);
        setSchedulerData(schedulerData)
    }

    const onViewChange = (schedulerData, view) => {
        schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
        schedulerData.setEvents(props.events);
        setSchedulerData(schedulerData)
    }

    const onSelectDate = (schedulerData, date) => {
        schedulerData.setDate(date);
        schedulerData.setEvents(props.events);
        setSchedulerData(schedulerData)

    }

    const eventClicked = (schedulerData, event) => {

    };

    const toggleExpandFunc = (schedulerData, slotId) => {
        schedulerData.toggleExpandStatus(slotId);
        setSchedulerData(schedulerData)
    }

    return (
        <Scheduler
            parentRef={props.parentRef}
            prevClick={prevClick}
            nextClick={nextClick}
            onSelectDate={onSelectDate}
            onViewChange={onViewChange}
            toggleExpandFunc={toggleExpandFunc}
            eventItemClick={eventClicked}
            schedulerData={schedulerData}
        />
    )
}

export default TeamCalendar

TypeScript

import dayjs, { Dayjs } from 'dayjs';
import React, { useEffect, useState } from 'react';
import Scheduler, {
    EventItem, Resource, SchedulerData, SchedulerDataBehaviors, SchedulerDataConfig, View, ViewType
} from 'react-big-scheduler-stch';
import "react-big-scheduler-stch/lib/css/style.css";

interface IProps {
    date?: string | Dayjs;
    viewType?: ViewType;
    showAgenda?: boolean;
    isEventPerspective?: boolean;
    newConfig?: SchedulerDataConfig;
    newBehaviours?: SchedulerDataBehaviors;
    schedulerDataConfig?: SchedulerDataConfig;
    resources: Resource[];
    events: EventItem[];
    parentRef?: React.RefObject<any>;
}

function TeamCalendar (props: IProps) {
    const [schedulerData, setSchedulerData] = useState(new SchedulerData(props.date ?? dayjs(),
        props.viewType ?? ViewType.Month,
        props.showAgenda ?? false,
        props.isEventPerspective ?? false,
        {
            ...props.schedulerDataConfig,
            dayStartFrom: 9,
            dayStopTo: 18
        }
    ))

    useEffect(() => {
        schedulerData.setResources(props.resources);
        schedulerData.setEvents(props.events);
    }, [])

    const prevClick = (schedulerData: SchedulerData) => {
        schedulerData.prev();
        schedulerData.setEvents(props.events);
        setSchedulerData(schedulerData)
    }

    const nextClick = (schedulerData: SchedulerData) => {
        schedulerData.next();
        schedulerData.setEvents(props.events);
        setSchedulerData(schedulerData)
    }

    const onViewChange = (schedulerData: SchedulerData, view: View) => {
        schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
        schedulerData.setEvents(props.events);
        setSchedulerData(schedulerData)
    }

    const onSelectDate = (schedulerData: SchedulerData, date: string) => {
        schedulerData.setDate(date);
        schedulerData.setEvents(props.events);
        setSchedulerData(schedulerData)

    }

    const eventClicked = (schedulerData: SchedulerData, event: EventItem) => {

    };

    const toggleExpandFunc = (schedulerData: SchedulerData, slotId: string) => {
        schedulerData.toggleExpandStatus(slotId);
        setSchedulerData(schedulerData)
    }

    return (
        <Scheduler
            parentRef={props.parentRef}
            prevClick={prevClick}
            nextClick={nextClick}
            onSelectDate={onSelectDate}
            onViewChange={onViewChange}
            toggleExpandFunc={toggleExpandFunc}
            eventItemClick={eventClicked}
            schedulerData={schedulerData}
        />
    )
}

export default TeamCalendar

Note that I use it in a class component so I haven't much tested it in function components My personal usage:

import dayjs, { Dayjs } from 'dayjs';
import React, { Component } from 'react';
import "react-big-scheduler-stch/lib/css/style.css";
import Scheduler, {
    EventItem, Resource, SchedulerData, SchedulerDataBehaviors, SchedulerDataConfig, SchedulerProps, View, ViewType
} from 'react-big-scheduler-stch';

export interface SState {
    viewModel: SchedulerData
}

interface IProps<T extends EventItem = EventItem>
    extends Omit<SchedulerProps<T>, 'schedulerData' | 'prevClick' | 'nextClick' | 'onSelectDate' | 'onViewChange' | 'toggleExpandFunc'> {
    date?: string | Dayjs;
    viewType?: ViewType;
    showAgenda?: boolean;
    isEventPerspective?: boolean;
    newConfig?: SchedulerDataConfig;
    newBehaviours?: SchedulerDataBehaviors;
    schedulerDataConfig?: SchedulerDataConfig;
    resources: Resource[];
    events: EventItem[];
    onYearChange?: (year: number) => void;
}

export default class BigScheduler<T extends EventItem = EventItem> extends Component<IProps<T>, SState> {
    private viewDate = dayjs();

    constructor(props: IProps<T>) {
        super(props);
        let schedulerData = new SchedulerData(props.date ?? dayjs(),
            props.viewType ?? ViewType.Month,
            props.showAgenda ?? false,
            props.isEventPerspective ?? false,
            props.schedulerDataConfig,

        );
        schedulerData.setResources(props.resources);
        schedulerData.setEvents(props.events);
        this.state = {
            viewModel: schedulerData
        }
    }

    render() {
        const { viewModel } = this.state;
        return (
            <Scheduler
                schedulerData={viewModel}
                prevClick={this.prevClick}
                nextClick={this.nextClick}
                onSelectDate={this.onSelectDate}
                onViewChange={this.onViewChange}
                toggleExpandFunc={this.toggleExpandFunc}
                {...this.props}
            />
        )
    }

    onDateChange = (schedulerData: SchedulerData) => {
        const newDate = schedulerData.getViewStartDate();
        if (this.viewDate !== newDate) {
            if (this.viewDate.year() !== newDate.year()) {
                const { onYearChange } = this.props;
                if (!!onYearChange) {
                    onYearChange(newDate.year())
                }
            }
            this.viewDate = newDate;
        }
    }

    prevClick = (schedulerData: SchedulerData) => {
        schedulerData.prev();
        this.onDateChange(schedulerData)
        schedulerData.setEvents(this.props.events);
        this.setState({
            viewModel: schedulerData
        })
    }

    nextClick = (schedulerData: SchedulerData) => {
        schedulerData.next();
        this.onDateChange(schedulerData)
        schedulerData.setEvents(this.props.events);
        this.setState({
            viewModel: schedulerData
        })
    }

    onViewChange = (schedulerData: SchedulerData, view: View) => {
        const start = new Date();
        schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
        schedulerData.setEvents(this.props.events);
        this.setState({
            viewModel: schedulerData
        })
    }

    onSelectDate = (schedulerData: SchedulerData, date: string) => {
        schedulerData.setDate(date);
        this.onDateChange(schedulerData)
        schedulerData.setEvents(this.props.events);
        this.setState({
            viewModel: schedulerData
        })
    }

    toggleExpandFunc = (schedulerData: SchedulerData, slotId: string) => {
        schedulerData.toggleExpandStatus(slotId);
        this.setState({
            viewModel: schedulerData
        });
    }
}

hbatalhaStch / react-big-scheduler

dayStartFrom - dayStopTo not working! #8