Migration from FullCalendar Feasiblity.

[Jake Bleazby]

Hello,

I am working on a scheduling website that uses a heavily customised and outdated version of FullCalendar. It is our intention to migrate to Syncfusion's Schedule component assuming it can meet our needs. Can you help give me an idea if what we want (or rather what we already have) is implementable in Scheduler, preferably with minimal customisation such that we can update the Syncfusion component over time?

So on Friday at 11am we have an appointment. Easily achievable.
The coloured bars are the equivalent of "IsBlock: true" as far as I'm aware. However we have 6 coloured coded reasons for blocking that need to be displayed (with excuses appearing on hover). Alternatively the bars with borders but no fill are soft blocks, and they can be scheduled over. Displaying these constraints are the deal breaker for us, without this feature we can't progress. I've not had any luck styling blocked appointments, but I suspect this is achievable by representing each 30min block as one (or maybe six overlapping) styled appointments if that can't be done.

The white / grey shading depends on some level of availability. The blue step ladder looking things are restricted start times (you can start then, but you cant have the middle of an appointment then).

Everything except the calendar can be kept, so no need to think about the week selector or any of that stuff on the far right.

We're also only using this as a front end, no need for any CRUD operations or direct API access (data will be passed in through parents props).

So yea, how achievable is this sort of styling? Thanks for your help, 
Jake

[Ravikumar Venkatesan]

Hi Jake,

Greetings from Syncfusion support.

Q1: Reasons for blocking that need to be displayed (with excuses appearing on hover)

You can show the reason for the appointment while hovering by enabling the enableTooltip property of the Schedule. We can customize the contents of the tooltip with help of the tooltipTemplate property of the Schedule.

[App.js]

export class App extends React.Component {

  instance = new Internationalization();

  getTooltipTime(value) {

    return this.instance.formatDate(value, { skeleton: 'EHm' });

  }

 

  tooltipTemplate(props) {

    return (<div className="tooltip-wrap">

      <div className="content-area">

        <div className="event-name">{props.Subject}</div>

        <div className="time">{this.getTooltipTime(props.StartTime)}</div>

        {(props.Reason !== null && props.Reason !== undefined) ? <div className="reason">{props.Reason}</div> : ''}

      </div>

    </div>);

  }

 

  render() {

    return (

      <div className="App">

        <ScheduleComponent eventSettings={{ dataSource: this.data, enableTooltip: true, tooltipTemplate: this.tooltipTemplate.bind(this) }}>

          <ViewsDirective>

            <ViewDirective option='WorkWeek' />

          </ViewsDirective>

          <Inject services={[WorkWeek]} />

        </ScheduleComponent>

      </div>

    );

  }

}

Q2: I've not had any luck styling blocked appointments, but I suspect this is achievable by representing each 30min block as one (or maybe six overlappings) styled appointments if that can't be done

The appointments overlapping will not happen if we use the block appointments. So, we have achieved your requirement with help of the read-only appointments. We have customized the appearance of the appointment content and the styles using eventTemplate of the Schedule.

[App.js]

export class App extends React.Component {

 

  data = [{

    Id: 1,

    Subject: 'Activity - Hard',

    StartTime: new Date(2022, 5, 13, 6),

    EndTime: new Date(2022, 5, 13, 12),

    EventType: 'activity',

    FillType: 'Hard',

    Reason: 'Your reason for restriction',

    Color: '#0f9ed7',

    IsReadonly: true

  }, {

    Id: 13,

    Subject: 'Normal appointment',

    StartTime: new Date(2022, 5, 17, 12),

    EndTime: new Date(2022, 5, 17, 14)

  }];

 

  instance = new Internationalization();

  getTimeString(value) {

    return this.instance.formatDate(value, { skeleton: 'hm' });

  }

 

  eventTemplate(props) {

    return (

      (props.IsReadonly) ?

        (props.FillType === 'Hard' ?

          // For hard type appointments

          (<div className={"template-wrap " + props.EventType + "-hard"} style={{ background: props.Color }}></div>) :

          // For soft type appointments

          (<div className={"template-wrap " + props.EventType + "-soft"}></div>)) :

        // For normal appointments

        <div className="template-wrap" style={{ background: props.SecondaryColor }}>

          <div className="subject">{props.Subject}</div>

          <div className="time" style={{ background: props.PrimaryColor }}>

            {this.getTimeString(props.StartTime)} - {this.getTimeString(props.EndTime)}

          </div>

        </div>

    );

  }

 

  render() {

    return (

      <div className="App">

        <ScheduleComponent cssClass="event-template" currentView='Week' eventSettings={{ dataSource: this.data, template: this.eventTemplate.bind(this) }}>

          <ViewsDirective>

            <ViewDirective option='WorkWeek' />

          </ViewsDirective>

          <Inject services={[WorkWeek]} />

        </ScheduleComponent>

      </div>

    );

  }

}

Q3: The white/grey shading depends on some level of availability

You can customize the availability color of the time cells using the renderCell event of the Schedule. The renderCell event is triggered before each time cell rendering.

[App.js]

export class App extends React.Component {

  // Available time slots colored in while color

  availableSlots = [1655116200000, 1655191800000, 1655289000000, 1655371800000, 1655454600000];

 

  onRenderCell(args) {

    if (args.elementType === 'workCells' && this.availableSlots.indexOf(+args.element.dataset.date) > -1) {

      // Setting up available time slots

      args.element.classList.add('e-available-slots');

    }

  }

 

  render() {

    return (

      <div className="App">

        <ScheduleComponent renderCell={this.onRenderCell.bind(this)}>

          <ViewsDirective>

            <ViewDirective option='WorkWeek' />

          </ViewsDirective>

          <Inject services={[WorkWeek]} />

        </ScheduleComponent>

      </div>

    );

  }

}

Q4: The blue step ladder-looking things are restricted start times (you can start then, but you can't have the middle of an appointment then)

Each of the blue step ladder-looking elements looks like an individual appointment element and is aligned always at the left side of the cells. Can you kindly share more details about the blue step ladder-looking elements? Based on that we will provide a solution.

EJ2 React Schedule Demos: https://ej2.syncfusion.com/react/demos/#/material/schedule/overview

EJ2 React Schedule Docs: https://ej2.syncfusion.com/react/documentation/schedule/getting-started/

EJ2 React Schedule APIs: https://ej2.syncfusion.com/react/documentation/api/schedule/#schedulecomponent

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: ej2reactscheduleappointmentcustomizationsample_bc3512e2.zip