CODEWITHSUNDEEP
javascriptreactjsfullcalendar
Kusal Kithmal
Kusal Kithmal

Reputation: 1313

Is there any way to set a background colour to the full column for Saturday and Sunday in 'React Full Calendar'

I am using 'react full calendar' for my react application. I want to change the background color for the full column for Saturday and Sunday. How can I achieve this?

const {withHtml} = this.state;

    return (

        <div className="calendar-wrapper ">

            <BigCalendar
                selectable
                events={events}
                views={""}
                onSelectSlot={event => this.onSelectSlot() }
                defaultDate={new Date()}

            />

                <SweetAlert
                    show={withHtml}
                    btnSize="sm"
                    title={<span>HTML <small>Title</small>!</span>}
                    onConfirm={() => this.onConfirm('withHtml')}>
                    <span>A custom <span style={{color: '#642aff'}}>html</span> message.</span>
                </SweetAlert>


        </div>




    );

Upvotes: 3

Views: 711

Answers (1)

Just code
Just code

Reputation: 13801

You can use dayPropGetter property to customize it

Here is how your function should looks like

const customDayPropGetter = (date: Date) => {
  if (date.getDate() === 7 || date.getDate() === 6)
    return {
      className: 'special-day',
      style: {
        border: 'solid 3px ' + (date.getDate() === 7 ? '#faa' : '#afa'),
      },
    };
  else return {};
};

and assign function like this

 dayPropGetter={customDayPropGetter}

demo

source

Upvotes: 1

Related Questions