React-big-calendar: Not Support the safari and IOS Safari

[Chinajiyong]

Hi Anyone,

For 0.20.3 release version, I have create a page with Calendar, but the events cannot render in Calendar in Mac Safari and iPhone Safari. Please help me find what's the problem, Thanks in advance.

Below is the @code:

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Card,Form,Layout} from 'antd';
import BigCalendar from 'react-big-calendar';

import 'react-big-calendar/lib/less/styles.less';

const { Content } = Layout;

@connect(({ school, loading }) => ({
  school,
  loading: loading.effects['school/fetch'],
}))

@Form.create()
class SchoolProgram extends PureComponent {
  state = {
  }

  // Page loaded
  componentDidMount() {
  }

  event = event => {
    return (
      <span>
        {event.title}
      </span>
    );
  };

  render() { 
    const eventList = [
        {
          id: 0,
          title: 'Board meeting',
          start: new Date('2018-12-08 07:08:00'),
          end: new Date('2018-12-09 10:10:00'),
          eventTypeId:1,
          resourceId: 1,
        },
        {
          id: 1,
          title: 'MS training',
          allDay: true,
          start: new Date('2019-01-10 06:08:00'),
          end: new Date('2019-01-11 10:10:00'),
          eventTypeId:1,
          resourceId: 2,
        },
        {
          id: 2,
          title: 'Team lead meeting',
          start: new Date('2019-01-12 05:08:00'),
          end: new Date('2019-01-12 10:10:00'),
          eventTypeId:2,
          resourceId: 3,
        },
        {
          id: 11,
          title: 'Birthday Party',
          start: new Date('2019-01-15 04:08:00'),
          end: new Date('2019-01-15 10:10:00'),
          eventTypeId:2,
          resourceId: 4,
        },
      ];
    const localizer = BigCalendar.momentLocalizer(moment); 
    return (
      <Layout>
        <Content title="School">
          <Card bordered={false}>
            <div style={{ height: '75vh',minHeight:"580px",minWidth:"650px", background:"#fff",padding: "15px" }}>
              <BigCalendar
                localizer={localizer}
                events={eventList}
                startAccessor="start"
                endAccessor="end"
              />
            </div>
          </Card>
        </Content>
      </Layout>
    );
  }
}

export default SchoolProgram;

[RusinovAnton]

Looks like there is only div being returned from render() or code isn't complete?

Quick tip: you might want to use multiline code formatter like this:

````

< your code here>

````

[Chinajiyong]

Looks like there is only div being returned from render() or code isn't complete?

Quick tip: you might want to use multiline code formatter like this:

```jsx
< your code here>

```

@RusinovAnton Thanks for your tips, now I have updated the code formatter, please take a look the code. Thanks again.

[vanessaleo]

Hi, has everyone solved this issue?
+1

[Chinajiyong]

Can anyone help to look int this issue? Thanks in advance.

[8ctopotamus]

@Chinajiyong Try formatting your new Date() with a "T" between the date and time.

Example: new Date(new Date('2019-01-12T05:08:00')).

For some reason, Safari requires the "T" to consider it a valid date.

[Chinajiyong]

@Chinajiyong Try formatting your new Date() with a "T" between the date and time.

Example: new Date(new Date('2019-01-12T05:08:00')).

For some reason, Safari requires the "T" to consider it a valid date.

Thanks. The issue has been solved.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.